缘起

大家都知道vue是主流的前端开发语音，基于vue也诞生了很多牛叉的框架，
对于后端人员只要花点心思总是可以上手用起来的，这也要归功于专业的前端技术人员，
开发出了很多脚手架，降低了小白的入手难度，但是比方说要开发门户网站，
针对于搜索引擎需要做SEO优化，vue这种单页面程序，明显是存在短板，
然而我这次想着也可以一起瞻仰下，vue是怎么处理这个棘手的问题，谷歌了一波，
还是有很多方式都可以提升VUE的SEO效果，较为出名的方式也比较多，
这里不一一赘述，这里也是随便搜了下哈，下面有列出链接可以看下

那么本次的主角是NuxtJs，我会结合着本次的学习，重新温习vue，将NuxtJs融合进去

开发门户网站过程

我会尽可能的将有效的开发过程记录下来，便于后边回顾使用
这次记录内容不会涉及到具体的业务内容，只是把框架的使用心得记录下来

初始化项目

~~yarn create next-app bls-portal~~

如何保存状态？
store文件夹新建 userInfo.js文件

安装vant组件

npm i vant@2.12.50

在plugins文件夹下，增加vant.js文件

import Vue from 'vue';
import { Popup, Area } from 'vant'; 
import 'vant/lib/index.css';
Vue.use(Popup); 
Vue.use(Area);

在nuxt.config.js文件中导入

plugins: [ '@/plugins/vant' ],

至此引入完成，VantUI组件库

引入AliPlayer
颜色转换网站

定义路由&路由守卫

中间件

a>全局
nuxt.config.js中增加以下内容
router: {
  middleware: 'auth'
}
新增目录middleware，并在目录中创建auth.js
在auth.js中增加以下内容进行路由跟踪
export default function({store,route,redirect,params,query,req,res}){
  console.log(store.state.userInfo,'middleware')
}
b>局部
参照[Nuxt中间件](https://www.nuxtjs.cn/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6)