Nuxt.js学习之旅

前言

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。目前，Nuxt.js也是非常流行且广受关注的基于Vue的服务端渲染框架。

一、初始化项目

手动创建Nuxt.js项目

• 新建文件

  mkdir nuxtDemo
  cd nuxtDemo
  

• 编辑package.json

  {
    "name": "nuxt-demo",
    "scripts": {
      "dev": "nuxt"
    }
  }
  

• 安装Nuxt

  npm install nuxt --save 
  # OR
  npm i nuxt -S
  

• 新建pages文件夹
  Nuxt.js 会依据 pages 目录中的所有 *.vue文件生成应用的路由配置
• 尝试开发首页代码 pages/index.vue

  <template>
    <h1>Hello world!</h1>
  </template>
  

• 启动项目，在浏览器中预览

  npm run dev
  

  在http://localhost:3000下访问

使用@vue/cli创建Nuxt应用

• 安装

  npm i -g @vue/cli-init
  vue init nuxt/starter <项目名>
  cd <项目>
  npm install
  npm run dev
  

  同样在http://localhost:3000下访问

使用create-nuxt-app创建Nuxt应用

• 安装

  npm i npx -g 
  npx create-nuxt-app <项目名>
  # OR
  yarn create nuxt-app <项目名>
  

  在安装过程中，将会让开发者选择安装相关配置，根据需求选择即可。

拓展：集成Koa创建Nuxt应用

• 安装 github中相关介绍

  vue init nuxt-community/koa-template <项目名>
  cd <项目>
  npm install
  npm run dev
  

项目目录结构

    |-- .nuxt             // Nuxt自动生成
    |-- assets            // 放置静态资源，如：LESS、SASS 或 JavaScript
    |-- components        // 开发中编写的Vue组件
    |-- layouts           // 布局组件
    |-- middleware        // 中间件
    |-- pages             // 页面路由组件
    |-- plugins           // JavaScript插件
    |-- static            // 静态资源文件，如图片
    |-- store             // 应用的Vuex状态管理
    |-- .editorconfig     // 开发工具格式配置
    |-- .eslintrc.js      // ESLint的配置文件
    |-- .gitignore        // 配置git上传忽略项
    |-- nuxt.config.json  // 织Nuxt.js应用配置
    |-- package.json      // npm包管理配置文件

Nuxt渲染流程

二、Nuxt基础应用

package.json配置IP和端口

"config":{
   "nuxt":{
      "host":"127.0.0.1",
      "port":"3001"
    }
}

使用全局css文件

• 在assets/css目录下新建main.css当作全局css文件
• 在nuxt.config.js中配置

  module.exports = {
      // ~ 为根目录别名
      css: ['~assets/css/main.css'],
  }
  

在Nuxt中使用sass、less等预处理器

npm i sass-loader node-sass --save-dev

配置个性化布局组件

• Nuxt中使用layouts/default.vue文件作为默认布局，当然我们也可以自定义其他的布局组件，并在相关路由组件中引入
• 在layouts目录下自定义新的blank.vue文件，Nuxt会自动创建blank布局组件

  <template>
    <div class="layout-blank">
      <nuxt />   // 相当于 
    </div>
  </template>
  
  <script>
  export default {
  }
  </script>
  
  <style lang="css">
  </style>
  

• 在路由组件中引入

  <template>
      <div>This is Index</div>    
  </template>
  <script>
  export default {
      layout: 'blank'  // 重点
  }        
  </script>
  <style lang="css">
  </style>
  

Nuxt路由

nuxt-link标签导航

<template>
  <div>
    <nuxt-link :to="{name:'index'}">跳转根路由下的页面</nuxt-link>
    <nuxt-link to="/about">跳转/about</nuxt-link>
  </div>
</template>

路由传参

<template>
  <div>
    <nuxt-link :to="{name:'index', params: {id:1}}">Home</nuxt-link>
  </div>
</template>

接收路由参数

<template>
  <div> id: {{$route.params.id}} </div>
</template>

动态路由传参

• Nuxt.js默认以下划线为前缀的vue文件就是动态路由
• 示例：创建pages/news/_id.vue文件，之后如/news/xxx类的路由将会跳转_id.vue文件，其路由参数就是id

动态路由参数校验

• pages/news/_id.vue

export default {
  validate ({ params }) {
    // 正则校验
    // 若路由参数是数字组成，则认为是符合id，return true 进入页面
    // 若 return false，则进入404页面
    return /^\d+$/.test(params.id)
  }
}

全局路由动画

• 在全局css文件中使用

  .page-enter-active, .page-leave-active {
      transition: opacity 2s;
  }
  .page-enter, .page-leave-active {
      opacity: 0;
  }
  

ansycData

在之前的Vue项目中，通常在mounted生命周期中请求远程数据渲染到页面，这样的结果是不利于SEO。在Nuxt进行服务端渲染后，可以使用ansycData方法请求数据。查看Nuxt渲染流程图可以知道，ansycData是在服务端渲染前执行，所以在该方法内的请求得到的数据将会在服务端渲染中渲染到页面中再返回给客户端。

• 注意：
  1. asyncData中没有this指向
  2. 服务端渲染只执行created()，不会执行mounted()，mounted方法将在客户端执行，所以在该生命周期中请求的数据，不会在网页源代码中体现，不利于SEO

npm install --save axios

<template>
  <div>{{ info.id }}</div>
</template>
<script>
import axios from 'axios'
export default {
  async asyncData(){
      let {status, data} = await axios.get(url)
      if(status === 200){
          return { info: data }
      }
  }
}
</script>

Nuxt集成Vuex

• Nuxt默认会去找store文件夹，并自动做好相应配置，极大方便开发过程
• 在Nuxt新版本中，不再需要modules目录存放子模块
• store目录下的每个 .js文件会被转换成为状态树指定命名的子模块
  具体使用可以参考官方文档 Vuex 状态树