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
每个页面也可以配置
- 由于每个页面都需要配置head太麻烦了,可以使用mixin封装方法,在每个页面调用即可
2. 页面中调用
9、nuxt中sass的使用以及全局sass变量配置
- 使用scss
直接安装 sass-loader 和 node-sass 包即可
yarn add node-sass@7.0.3 sass-loader@10 -D
注意: 版本不易过高,不然会报错
- 全局引入scss变量
yarn add @nuxtjs/style-resources
直接在组件中使用即可
10、nuxt打包部署
yarn buld 打包
打包完之后将 .nuxt、nuxt.config.js、package.json、static 四个文件夹放到服务器上
yarn install 下载依赖
yarn start 启动项目
到此就启动完成了,但是有个问题是窗口一关闭程序就停止了,可以使用 pm2 来解决
11、pm2使用
- 下载pm2 : cnpm i pm2 -g
- 在服务端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'
}
]
};
- 启动项目: pm2 start
- 访问端口就是上面配置的 10020
pm2 命令:
启动项目: pm2 start
查看启动的项目列表:pm2 list
关闭当前正在启动的项目 pm2 delete + 项目的名字