vue服务器端渲染

1.服务器端渲染时。第一次请求页面的时候，由服务器帮忙发送请求拼接好数据，并将拼接好的页面数据返回交给前端渲染。
2.当下次客户端要去跳转页面的时候，此时页面结构页面中的数据全部交给客户端渲染

npm i create-nuxt-app -g
create-nuxt-app my-nuxt-demo    //my-nuxt-demo  是名字，选择的时候第一个确定，第二个额选择none，第三个选择none，第四个选择选un，第五个看情况选择，第六个yes，第七个none，第八个确定，第九个npm
cd my-nuxt-demo
npm run dev

路由跳转
第一种方式：

给相应的标签绑定@click=’jumpTo’
然后在函数方法中//
this.$router.push('/相应的路径')

第二种，如果使用组件跳转用nuxt-link组件，它和router-link作用一样，必须要有to属性

    <li 
        v-for="(item,index) in teachers" 
        :key="index" 
      >
        <nuxt-link to="/teacher/deta">
          {{ item.name }}
        </nuxt-link>
       
      </li>

路由参数
在详情页文件夹中创建一个文件夹叫_id文件夹，把详情页写在里面。
然后在需要点击跳转的页面里加``好跟相应的id
参数校验
校验路由参数，通过validte方法去校验，这个方法不能写到methods中，有一个必须返回的返回值，该值为布尔类型。如果为true就表示校验通过，如果为false就表示校验不通过, 那么就会报页面没有找到

  validate(obj) {
    // 参数里面可以获取到路由参数
    return /^\d+$/.test(obj.params.id)
  }

嵌套路由

1. 添加一个Vue文件，作为父文件
2. 添加一个与父文件同名的文件文件夹来存放子视图组件
3. 在父文件中，添加<nuxt-child></nuxt-child>组件，用于展示匹配到的子视图

components
在components文件夹下面新建一个Header.vue组件
引入组件，注意路径的~符号，表示根目录

import .......
components：{}
挖坑

创建layout

1. 去layouts文件夹下面新建一个新的layout组件，例如teachers.vue，并在这个组件中添加<nuxt />组件，这样，所有和teachers相关的页面都会有公共的layout
2. 给需要用到teachers.vue的组件添加layout属性，并指定需要使用的layout，例如：layout: 'teachers'在js中
   1.3.2 创建特殊layout : error
   layouts文件夹下面新建error.vue，error是关键字
   1.3.4 样式配置

nuxt.config.js中设置设置全局样式文件路径，例如

      css: [
        '~/assets/styles/index.css'
      ],

ElementUI使用

1. 下载npm i element-ui -S
2. 在plugins文件夹下面，创建ElementUI.js文件

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

3.在nuxt.config.js中添加配置

css: [
  'element-ui/lib/theme-chalk/index.css'
],
plugins: [
  {src: '~/plugins/ElementUI', ssr: true }
],
build: {
  vendor: ['element-ui']
}

异步数据
如果在created钩子中写异步，是在客户端渲染的而不是在服务端
asyncData(context, callback) {callback(null, data)}
这个函数中不能使用this
context.route.params.xxx获取参数
callback(new Error(), data)渲染出错的页面
这个方法在服务器端执行和在客户端执行的区别
axios的使用
安装

npm install --save axios

使用

import axios from 'axios'

asyncData(context, callback) {
  axios.get('http://localhost:3301/in_theaters')
    .then(res => {
      console.log(res);
      callback(null, {list: res.data})
    })
}

为防止重复打包，在nuxt.config.js中配置

module.exports = {
  build: {
    vendor: ['axios']
  }
}