SongChao1123 / nuxt.js

use Nuxt.js as an SSR framework for multiple-page apps. 使用 Nuxt.js 作为多页应用项目的 UI 渲染框架。

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

使用

命令

# 开发调试
$ npm run dev

# 服务端渲染应用部署

# 构建
$ npm run build

# 启动
$ npm start

修改 nuxt.config.js

添加全局 CSS:

css: [
  '~/assets/styles/global/index.scss'
]

参考:https://zh.nuxtjs.org/guide/configuration#css

CSS 提取到一个单独的 CSS 文件中:

build: {
  extractCSS: true
}

参考:https://zh.nuxtjs.org/api/configuration-build#extractcss

默认首页改为 pages/index/index.vue:

router: {
  extendRoutes (routes, resolve) {
    routes.splice(routes.findIndex(item => item.name === 'index'), 1, {
      name: 'index',
      path: '/',
      component: resolve(__dirname, 'pages/index/index.vue')
    })

    routes.splice(routes.findIndex(item => item.name === '404'), 1, {
      name: '404',
      path: '*',
      component: resolve(__dirname, 'pages/404/index.vue')
    })
  }
}

参考:https://zh.nuxtjs.org/api/configuration-router/#extendroutes

修改 layouts/default.vue

去掉 <style>。

页面目录规范

|-- page                      // 页面
|   |-- index.vue             // 页面入口
|   |-- styles                // 样式
|       |-- index.scss        // 样式入口
|       |-- images            // 样式引用图片
|   |-- images                // 页面引用图片

组件目录规范

与页面目录规范一致。

参考

文档

文章

视频

About

use Nuxt.js as an SSR framework for multiple-page apps. 使用 Nuxt.js 作为多页应用项目的 UI 渲染框架。


Languages

Language:JavaScript 60.6%Language:Vue 20.5%Language:CSS 18.9%