nuxt2项目配置

vue是大家比较熟悉的一款前端框架，但是vue有一个缺点就是单页面应用，不利于seo，所以这篇文章主要是vue的衍生版nuxt，用的是vue的语法，做的是ssr（服务端渲染）

1、nuxt生命周期

服务端钩子：

nuxtServerInit
middleware
validate
asyncData
fetch

服务端客户端都存在的钩子:

beforeCreated
created

客户端钩子：

beforeMounted
mounted
beforeUpdate
updated
beforeDestroy
destroyed

1-1、 生命周期详解

nuxtServerInit是服务端钩子，一般用在store中，初始化一些store的数据，一般用的比较少

middleware 主要用于页面鉴权的工作，生命钩子有三种用法

第一种（nuxt.config.js配置）：

auth.js文件里面

第二种（layouts布局）：

第三种（页面）：

2、路由

nuxt中的路由和vue中的路由有点不一样，nuxt中的路由主要采用的是约定的思想，不需要自己配置

路由按照 nuxt 配置好，接下来路由跳转传参和动态路由跳转

2-1、扩展路由

nuxt中的路由表都是约定配置好的，根据pages目录里面创建的vue文件自动配置好路由，同时nuxt也支持自己配置个性化的路由

2-2、参数校验、错误页面配置

nuxt配置好了自己的错误页面，也可以如下图做自定义错误页面

2-3、路由切换动画

assets中的transition.css文件是自己写的，所以需要在nuxt.config.js文件中配置一下

2-4、路由个性化切换动画

2-5、路由守卫

2-5-1、前置守卫（中间件middleware）

1、全局守卫 nuxt.config.js

2、布局守卫 layouts

3、组件独享守卫 middleware
组件内部的守卫用法和上面的两种方法一样

4、插件全局守卫（前置）

2-5-2、后置守卫（beforeRouteLeave）

1、全局后置守卫

2、组件独享后置守卫 beforeRouteLeave

3、nuxt中的数据交互 axios

yarn add @nuxtjs/axios @nuxtjs/proxy

axios的二次封装

在 plugins 中创建httpInstance.js 文件

在组价中使用

4、配置loading

注意：也可以在axios的二次封装中添加 Loaidng 加载

5、store使用

nuxt中的vuex的使用和vue中的使用很相似

子模块

组件中使用

5-1、vuex持久化

yarn add cookie-universal-nuxt

存值的时候vuex和cookie同时存进去

刷新页面在 nuxtServerInit 服务端生命周期函数，从cookie 取出值存在 vuex 里面

6、nuxt中使用 elementUI 库

yarn add element-ui -D

nuxt.config.js配置

在plugins创建elementUI.js文件

7、nuxt中使用公共方法，指令，定义全局组件，mixins（插件的方式）

以插件的方式在nuxt.config.js中引入

8、meta信息 SEO，红蜘蛛抓取

全局配置 nuxt.config.js

每个页面也可以配置

1. 由于每个页面都需要配置head太麻烦了，可以使用mixin封装方法，在每个页面调用即可

2. 页面中调用

9、nuxt中sass的使用以及全局sass变量配置

1. 使用scss

直接安装 sass-loader 和 node-sass 包即可
yarn add [email protected] sass-loader@10 -D
注意： 版本不易过高，不然会报错

2. 全局引入scss变量

yarn add @nuxtjs/style-resources

直接在组件中使用即可

10、nuxt打包部署

yarn buld 打包

打包完之后将 .nuxt、nuxt.config.js、package.json、static 四个文件夹放到服务器上

yarn install 下载依赖

yarn start 启动项目

到此就启动完成了，但是有个问题是窗口一关闭程序就停止了，可以使用 pm2 来解决

11、pm2使用

1. 下载pm2 ： cnpm i pm2 -g
2. 在服务端nuxt根目录中创建 ecosystem.config.js 文件

// ecosystem.config.js

module.exports = {
    apps: [
		{
			name: 'nuxt2test1', 
			exec_mode: 'cluster',
			instances: '1', // Or a number of instances
			script: './node_modules/nuxt/bin/nuxt.js',
			args: 'start'
		}
    ]
};

3. 启动项目： pm2 start
4. 访问端口就是上面配置的 10020

pm2 命令：
启动项目： pm2 start
查看启动的项目列表：pm2 list
关闭当前正在启动的项目 pm2 delete + 项目的名字

散花，完结