Nuxt.js服务端渲染

Nuxt.js服务端渲染

• 什么是Nuxt.js

Vue服务端渲染官网
Nuxt.js官网

Nuxt.js是一个基于Vue.js的通用应用框架

• Nuxt初体验

npm i create-nuxt-app -g
create-nuxt-app my-nuxt-demo
cd my-nuxt-demo
npm run dev

• 文件结构分析

└─my-nuxt-demo
  ├─.nuxt               // Nuxt自动生成，临时的用于编辑的文件，build
  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
  ├─components          // 用于自己编写的Vue组件，比如分页组件
  ├─layouts             // 布局目录，用于组织应用的布局组件，不可更改⭐
  ├─middleware          // 用于存放中间件
  ├─node_modules
  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改⭐
  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  ├─static              // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。⭐
  └─store               // 用于组织应用的Vuex 状态管理。文件夹名不可更改。⭐
  ├─.editorconfig       // 开发工具格式配置
  ├─.eslintrc.js        // ESLint的配置文件，用于检查代码格式
  ├─.gitignore          // 配置git忽略文件
  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。⭐
  ├─package-lock.json   // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
  ├─package.json        // npm 包管理配置文件
  ├─README.md

• 页面和路由

1. 基本路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
假设 pages 的目录结构如下

└─pages
    ├─index.vue
    └─user
      ├─index.vue
      ├─one.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

2. 页面跳转

1> 跳转user页面
nuxt-link与router-link的作用一样,都能用来做路由跳转
2> this.$router.push({name: 'user'}) // nuxt的name指的是pages下面的文件夹名称
this.$router.push({path: '/user'}) // 原方法
注意: 跳转 使用a标签也可以到user页面,但是相当于重新刷新页面

3. 动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
在详情页,获取动态参数{{$route.params.id}}

4.路由参数校验

Nuxt.js可以让你在动态路由对应的页面组件中配置一个validate方法用于校验路由参数的有效性.
该参数有一个布尔类型的返回值,如果返回true则表示验证通过,如果返回false则表示校验位通过.

validate (obj) {
    console.log(obj)
    // 正则表达式匹配
    return true
}

5. 嵌套路由

1> 新建一个VUE文件,作为父组件
2> 添加一个与父组件同名的文件夹来存放子视图组件
3> 在父文件中,添加组件,用于展示匹配到的子视图
// 用于存放嵌套的子组件

• 创建layouts

1. 在layouts文件夹下新建一个layout组件,例如teacher.vue,并在这个组件中添加,这样所有的和teacher相关的页面都会有公共的layout
2. 给需要用到teacher.vue的组件添加layout属性,并指定需要使用的layout,例如: layout: “teacher”
3. 创建特殊layout: 在layouts文件夹下面新建error.vue,error是关键字 当找不到页面就会显示error.vue内容
4. layout中也能使用组件: 在components文件夹下面新建一个Header.vue组件
   引入组件，注意路径的~符号，表示根目录

• 异步数据

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。所以需要注意这个函数中不能使用this

注意：常规写法如果在created钩子中写异步，是在客户端渲染的而不是在服务端

使用方法：asyncData(context, callback) {callback(null, data)}

context.route.params.xxx获取参数

callback(new Error(), data)渲染出错的页面

注意：这个方法在服务器端执行和在客户端执行的区别

• 样式配置

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