nuxtjs--ssr web界面模板

由于最近工作内容大部分时间转移到了android 和 flutter的研发上，web端的内容很久没有记录和更新了，还是需要把前面了解过的vuejs ssr方面的内容记录以下。

内容--说明

1、仅仅只是一个使用nuxtjs 搭建的web界面模板
2、demo中包含的内容，包含基本的用法和插件

内容--demo包含

1、表单验证
2、多语言
3、登录验证
4、时间格式化
5、axios基本封装
6、浏览器历史记录，前进，后退，浏览器直接输入地址，菜单需要选中对应的位置

内容--插件

1、vuejs
2、momentjs
3、vue-i18n
4、axios
5、@nuxtjs/proxy
6、iview

内容--修改默认body样式

在默认的nuxtjs环境搭建完成后，默认的body样式会有一个margin:8px的样式。
修改方法：nuxt.config.js 文件中 header 中加入内容
bodyAttrs:{ class: 'body-class' }
body-class: 样式文件的某个类样式。

内容--表单验证

使用 async-validator 插件
1、封装文件位置：plugins/validation
2、使用方法：:rules="$filter_rules({required:true,type:'ip'})" 表示必填和验证ip地址

内容--多语言

使用vue-i18n插件
1、封装文件位置：plugins/i8n 、 middleware/i18n 、 store/index
2、使用方法： {{$t('lang.menuTest')}}
3、说明：需要在项目路径下创建locales/zh.json和其他语言文件
4、问题：刷新页面后，语言回恢复到默认的语言环境，并且会出现先显示默认语言，再显示设置后的语言。
5、解决思路：使用session或者cookie 配合 store来进行设置即可。具体在以上3个文件中。

内容--登录验证

无插件，如果需要完整的网络请求流程，需要axios插件配合
1、封装文件位置：middleware/auth 、utils/utils 、plugins/axios
2、使用方法：this.$api.get('/proxy/api地址',params,res => {});
3、问题：如何区分客户端和服务端
4、解决方法：let isClient = process.client; let isServer = process.server;

内容--时间格式化

使用momentjs插件
1、封装文件位置：plugins/moment
2、注意事项:所有的操作其实都是通过客户端进行，但是实际在使用的时候，nuxtjs服务端和客户端会同时进行操作，所以会出现语言显示不正确的问题。
3、解决思路：因为我们是使用web，那这里直接在客户端上进行操作即可。

内容--axios基本封装

使用axios插件
1、封装文件位置：plugins/axios
2、说明：其实没啥说明，就是简单的axios操作

内容--浏览器历史记录，前进，后退，浏览器直接输入地址，菜单需要选中对应的位置

采用的iview组件
1、思路：通过监听路由变化，将菜单选中的变量重新赋值，然后进行菜单组件的更新即可
this.$refs.top_menu.updateOpened();
this.$refs.top_menu.updateActiveName();
this.$refs.top_menu.updateOpenKeys();
2、注意：需要在$nextTick下执行。

3、具体操作见layout/default

总结

其实nuxt很多操作都是通过plugins 和 middleware 来配合完成的。

好像也没啥可以写的，就简单记录一下，其实也就是借用别人的成熟框架，做一些应用层面的事情，没啥好高级的技术。如果有幸被看到，写的不好，请见谅。

demo地址：https://github.com/522011796/ssr-vuejs-pc-web