Nuxt.js 使用教程指北

Nuxt .js 是脱胎与 React 中的 SSR 方案 Next.js 的，基本使用方法都类似。

1，破剑式：

安装:

yarn create nuxt-app <项目名>

需要注意的是，这类 SSR 框架推崇约定大于配置，所以生成的项目目录结构是不能修改的，不过其实这个结构和我们平常使用的 Vue-cli 生成的目录结构是差不多的。

2，破刀式：

配置：
Nuxt.js 默认帮我们进行了配置，但是如果我们想扩展其配置，可以在 nuxt.config.js 上进行修改。

css   是配置全局CSS的
env   是配置环境变量的
head  是配置head中的 meta 和 link 等等
router 可以扩展Nuxt帮我们生成的router目录，比如增加 redirect 配置

3，破枪式：
路由：
Nuxt 会自动把 pages 的 .vue 生成路由配置，路由之间的跳转使用 <nuxt-link>，<router-view> 需要使用 <nuxt-child> 来代替。如果需要自定义其路由文件，需要在 nuxt.config.js 中进行修改，生成的文件在 .nuxt 中可以看到

4，破鞭式：
布局：
Nuxt 会自动生成一个 layout 目录，内部就是布局文件，当然我们可以自定义修改，然后在需要使用该布局文件的地方配置 layout: name 即可，另外 Nuxt 约定了一个全局的错误页面， error.vue

5，破索式：
异步数据
Nuxt 给我们在 pages 中的 vue 文件都提供了一个 asyncData 方法，该方法在每次加载之前被调用，在服务端和客户端都会被调用，需要注意的是，其方法是在 beforeCreate 之前执行的，所以内部是无法拿到 this ，这有点像 React 16 中的 getDerivedStateFromProps ，通过 retrun 把返回值注入到 data 中。 asyncData 接收一个参数 ctx ，里面可以拿到 query params 等路由相关信息。

6，破掌式：
插件
使用需要 Vue.use 的插件的时候需要在 plugins 中新建一个 js 的文件，例如当我们需要使用 vue-notifications 时，新增一个 vue-notifications.js 文件

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

然后需要在 nuxt.config.js 的 plugins 中增加其配置 :

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

7，破箭式：
使用预处理器：
因为内部使用 vue-loader ，所以直接安装 less less-loader 等相关模块即可。

8，破气式：
使用跨域代理：
安装 @nuxtjs/proxy 模块
在 next.config.js 中设置：

modules: [
	'@nuxtjs/axios',
	'@nuxtjs/proxy'
],
axios: {
	proxy: true
},
proxy: {
	'/api': {
		// todo
	}
}

9，总诀式：
部署
在 package.json 中，修改其配置:

"scripts": {
	"build": "nuxt build && nuxt start",
}

然后在把项目上传到服务器上，直接执行 yarn build 即可
如果想要使用 PM2 来启动，则执行

pm2 start ./node_modules/nuxt/bin/nuxt -- start

这里需要注意的是，后面的start参数是一定要传的，否则启动的是dev开发者模式，这样导致我们网站的加载速度非常慢。