nuxt.js框架 ---vue服务端渲染应用框架

nuxt.js框架是一个基于vue.js的通用应用框架，优点：

1、资源请求量大时解决首屏加载缓慢
2、有利于SEO，搜索网站抓取内容
3、目录结构清晰，路由自动配置，可以只关注与功能
4、默认添加webpack的配置vue-loader、file-loader、url-loader、热更新等
5、默认添加eslint的配置，有利于团队合作

安装

$ npx create-nuxt-app <项目名>//创建项目

出现的报错

npm install 时出现报错,解决方案是：不要设置淘宝镜像 npm set registry https://registry.npmjs.org/

    $ npm install
    npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
    npm ERR! Unexpected end of JSON input while parsing near '...y-js/-/uglify-js-3.3.'
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\yangxiaomei\AppData\Roaming\npm-cache\_logs\2019-11-12T10_20_23_073Z-debug.log

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // 你可以为错误页面指定自定义的布局
}
</script>

middleware 中间件

路由前面的拦截器

pages 路由页面存放目录

每个vue文件会自动生成router下面的路由配置

/pages/index.vue默认根路径访问的页面

同级路由

生成的routes为：

 routes: [{
    path: "/users",
    component: _53c8fd22,
    name: "users"
  }, {
    path: "/users/detail",
    component: _84ac929e,
    name: "users-detail"
  }, {
    path: "/users/:id",
    component: _5a57e00a,
    name: "users-id"
  }, {
    path: "/",
    component: _4d741dac,
    name: "index"
  }],

嵌套路由

在文件夹同级目录创建相同名称的vue文件

注意：在该文件中需要添加,用来插入子路由的内容

生成的routes为：

routes: [{
    path: "/users",
    component: _1eafcb60,
    children: [{
      path: "",
      component: _53c8fd22,
      name: "users"
    }, {
      path: "detail",
      component: _84ac929e,
      name: "users-detail"
    }, {
      path: ":id",
      component: _5a57e00a,
      name: "users-id"
    }]
  }, {
    path: "/",
    component: _4d741dac,
    name: "index"
  }],

plugins 插件存放目录

添加插件,如：路由守卫：/plugins/router.js：

   // 参数为对象实例
    export default ({ app }) => {
     app.router.beforeEach((to, from, next) => {
       console.log('to path', to.path)
       next()
     })
   }

添加插件文件后需要在nuxt.config.js中添加配置

 plugins: [
   '@/plugins/router.js'
 ],

拦截器：/plugins/axios.js：

   // 参数为对象实例
  export default ({ $axios }) => {
     $axios.onRequest((config) => {
       // 判断如果不是服务端，获取token
       if (!process.server) {
         config.headers.token = localStorage.getItem('token')
       }
     })
   }

添加插件文件后需要在nuxt.config.js中添加配置

 plugins: [
   '@/plugins/axios.js'
 ],

server

服务器代码，解析模板、生成路由、添加热更新的监听等

store

用于存放vuex中的文件

index.js

asyncData方法

注意事项：

asyncData方法会在组件（限于页面组件）每次加载之前被调用
asyncData可以在服务器或路由更新之前被调用
第一个参数被设定为当前页面的上下文对象
nuxt.js会将asyncData返回的数据融合data中
由于asyncData方法是在组件初始化前被调用，所以在方法内是没有办法通过this来引用组件的实例对象刷新页面，第一次访问时，在server端调用，第二次通过路由跳转时则是在客户端调用，测试代码如：

<template>
  <div>
    用户列表页
    <div v-for="(item,index) in users" :key="index">
      {{ item.id }}--{{ item.name }}
    </div>
  </div>
</template>
<script>
function getUsers () {
  return new Promise((resolve) => {
    setTimeout(function () {
      resolve([
        { id: 1, name: 'aaa' },
        { id: 2, name: 'bbbb' }
      ])
    }, 2000)
  })
}
export default {
  async asyncData (context) {
    console.log('asyncData', process.server, process.client)
    const users = await getUsers()
    return { users }
  }
}
</script>

整合axios

npm install @nuxt/axios 配置nuxt.config.js

modules:[
    '@nuxtjs/axios'
],
axios:{
    proxy:true
},
proxy:{
    "/api":"http://localhost:3003"
}

nuxt.js框架 ---vue服务端渲染应用框架

安装

出现的报错

目录

assets

static

components

layouts 布局组件

创建公共的布局文件

可定制化错误页面 /layout/error.vue