1.项目结构

nuxt.js固化了很多项目结构

project-name—————————-项目名
|-assets———————————-放置静态文件
|-components—————————-没有asyncData方法
|-layouts———————————-布局组件
|-middleware——————————自定义一个函数运行在一个页面或一组页面渲染之前
|—-auth.js——————————文件名就是中间件名,但是需要在nuxt.config.js中配置
|-pages————————————页面组件,nuxt会根据pages目录自动生成路由
|—user.vue
|——asyncData(){}———————服务端获取并渲染数据
|——fetch(){}—————————在渲染页面前填充store的数据
|——head(){}—————————设置页面title及meta信息
|——key(){}—————————-设置组件的key属性
|——layout(){}————————-引用layout属性
|——loading(Boolean)—————-设置路由跳转之间的进度条
|——middleware(String/Array)——-在页面中设置中间件,值是中间件的名称
|——scrollToTop(Boolen)————-控制页面渲染前是否滚动至页面顶部
|——transition(String/Object/Function)-设置路由切换时的过渡动效
|——validate(){}—————-在动态路由对应的页面组件配置校验方法来校验路由参数的有效性
|——watchQuery(Boolean/Array)-监听参数字符串更改时执行组件方法(asyncData, fetch, validate..)
|-plugins———————————使用的第三方包或者库需要在此定义,在配置文件配置
|-static———————————-放置静态文件,此类文件不会被nuxt.js调用webpack构建编译
|-store————————————状态树,需要特殊注意一个action方法 nuxtServerInit
|-nuxt.config.js————————-配置自定义路由规则,导入插件等
|-package.json————————-应用的依赖关系/对外暴露的脚本接口
|-app.html——————————-用来替换nuxt默认的模版文件

2.router-路由

  1. 路由配置 ```javascript // 页面中使用路由: user

// 页面中路由出口

// 命名视图, 需要nuxt.config.js文件中配置

// 或

// nuxt.config.js, 命名视图的名称为top export default { router: { extendRoutes(routes, resolve) { const index = routes.findIndex(route => route.name === ‘main’) routes[index] = { …routes[index], components: { default: routes[index].component, top: resolve(__dirname, ‘components/mainTop.vue’) }, chunkNames: { top: ‘components/mainTop’ } } } } }

  2. 2. **动态路由**
  4.  **在Nuxt.js里定义带参数的动态路由,需要创建对应的以下划线作为前缀的Vue文件或目录**<br />** 目录结构:**

pages/ —| _slug/ ——-| comments.vue ——-| index.vue —| users/ ——-| _id.vue —| index.vue

  1. Nuxt.js 自动生成的路由配置如下:
  2. ```javascript
  3. routes: [
  4.     {
  5.       name: 'index',
  6.       path: '/',
  7.       component: 'pages/index.vue'
  8.     },
  9.     {
  10.       name: 'users-id',
  11.       path: '/users/:id?',
  12.       component: 'pages/users/_id.vue'
  13.     },
  14.     {
  15.       name: 'slug',
  16.       path: '/:slug',
  17.       component: 'pages/_slug/index.vue'
  18.     },
  19.     {
  20.       name: 'slug-comments',
  21.       path: '/:slug/comments',
  22.       component: 'pages/_slug/comments.vue'
  23.     }
  24.   ]
  25. }
  1. 嵌套路由

创建内嵌子路由, 需要添加一个vue文件,同时添加一个与该文件同名的目录用来存放子视图组件
注意: **别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容**
文件结构如下:

  1. pages/
  2. --| users/
  3. -----| _id.vue
  4. -----| index.vue
  5. --| users.vue

Nuxt.js 自动生成的路由配置如下:

  1. router: {
  2.   routes: [
  3.     {
  4.       path: '/users',
  5.       component: 'pages/users.vue',
  6.       children: [
  7.         {
  8.           path: '',
  9.           component: 'pages/users/index.vue',
  10.           name: 'users'
  11.         },
  12.         {
  13.           path: ':id',
  14.           component: 'pages/users/_id.vue',
  15.           name: 'users-id'
  16.         }
  17.       ]
  18.     }
  19.   ]
  20. }
  1. 路由参数校验:

Nuxt.js 可以让你在动态路由组件中定义参数校验方法
pages/users/_id.vue

  1. export default {
  2.   validate({ params }) {
  3.     // 必须是number类型
  4.     return /^\d+$/.test(params.id)
  5.   }
  6. }

3.store-数据中心

抛开常规用法不多说
说说 nuxtServerInit方法

  1. 首先nuxtServerInit是一个特殊的action方法
  2. 调用时机: 服务端渲染期间自动调用
  3. 作用: 初始化容器数据, 传递数据给客户端使用
  4. 异步nuxtServerInit操作必须返回 Promise 来通知nuxt服务器等待它们
    1. // eg:
    2. export const actions = {
    3. // 第二个参数是页面的上下文对象
    4. nuxtServerInit({ commit }, { req }) {
    5.  let user = null
    6.  // 取api响应参数头里的cookie
    7.  const cookie = req.headers.cookie
    8.  if (cookie) {
    9.    const parsed = cookieparser.parse(cookie)
    10.    try {
    11.      user = parsed.user ? JSON.parse(parsed.user) : undefined
    12.    } catch (error) {
    13.      console.log(error)
    14.    }
    15.  }
    16.  commit("setUser", user)
    17. }
    18. }

4.plugins-插件

  1. 使用自己的库或第三方模块时需要用plugin的方式注入
  2. plugins使用说明: 客户端和服务端使用略有不同, 但有一点: 每一个plugins下的文件都需要在nuxt.config.js 文件中引入:
    1. // 配置文件nuxt.config.js:
    2. export default {
    3. plugins: [
    4.  '~/plugins/xxx.js',
    5.  '~/plugins/xx.js',
    6.  '~/plugins/yyy.js',
    7. ]
    8. }
    ```javascript // 1. Client: Vue 实例注入 // plugins/vue-inject.js: import Vue from ‘vue’ Vue.prototype.$myFn = string =>console.log(‘This is an example’, string) // 使用注入函数 export default { mounted() { this.$myFn(‘test’) } }

// 2.Server, context注入 // plugins/ctx-inject.js export default ({ app }, inject) => { app.myFn = str => str } // 在能获得context的地方,就能用该函数,如在asyncData和fetch函数中 export default { asyncData(context) { context.app.myInjectedFunction(‘ctx!’) } }

// 3.Client, Server中同时注入: export default ({ app }, inject) => { inject(“myFn”, str => str) } // 现在就可以在contex,Vue实例中的this,Vuex的actions/mutations方法中的this来调用myFn方法 // xxx.vue export default { mounted() { this.$myFn(‘works in mounted’) }, asyncData(context) { context.app.$myFn(‘works with context’) } } // store/index.js export const state = () => ({ value: ‘’ }) export const mutations = { changeValue(state, newValue) { this.$myFn(‘accessible in mutations’) state.value = newValue } } export const actions = { setSomeValueToWhatever({ commit }) { this.$myFn(‘accessible in actions’) const newValue = ‘whatever’ commit(‘changeValue’, newValue) } }

  1. <a name="TEhzY"></a>
  2. ## 5.middleware-中间件
  4. 1. 中间件的定义, 每一个中间件应放置在 `middleware/` 目录,`middleware/auth.js`将成为 `auth` 中间件
  5. 1. 作用:定义一个自定义函数运行在一个页面或一组页面渲染之前
  6. 1. 在`middleware/` 目录下定义好之后,需要在nuxt.config.js文件中做配置
  7. ```javascript
  8. // nuxt.config.js
  9. module.exports = {
  10.   router: {
  11.     middleware: 'stats'
  12.   }
  13. }
  14. //stats 中间件将在每个路由改变时被调用
  1. 中间件执行流程
    1. nuxt.config.js
    1. 匹配布局
    1. 匹配页面
  1. 也可以将 middleware 添加到指定的布局或者页面 ```javascript // xxx.vue export default { middleware: ‘stats’ }

// 1. 一个中间件接收 context 作为第一个参数 // 2. 中间件可以异步执行,只需要返回一个 Promise 或使用第 2 个 callback 作为第一个参数 // middleware/stats.js export default function ({ route, redirect, store }) { // your code… } ```

6.nuxt.config.js-配置文件

7.xxx.vue-组件