1、兼容浏览,npm install babel-polyfillIE -S ,使IE能将es6转es5,自适应窗口calc()计算、flex布局
babel-polyfillIE 是兼容IE的
2、项目结构,细分
3、vuex拆分模块(module)【一般按后端返回的数据model分类】、router拆分、
4、禁止地址栏输入url地址直接访问需要登录的页面,禁止无权限访问,
(router.beforeEach)
5、后端接口 api 分类
6、尽可能减少一个.vue文件的代码行数(模块化【组件】开发)
7、设置api请求的拦截器(如axios的拦截器)。每次请求后台数据的时候,禁用当前页面所有的事件(可以使用elementUI的Loading)(比如增删改查的时候,等待请求结果过程就很需要禁用当前页的其他事件)
8、子组件使用computed来监听父传子数据。全局变量在computed中被赋值时,最好不要再去做其他的运算。不然会无限执行computed中的方法(溢出)。
9、第一次渲染页面的时候,session保存vuex的内容,避免刷新页面的时候vuex数据丢失。注销登录的时候,要重置vuex的值
(window.location.reload()、sessionStorage.clear()、(window.localStorage.clear()(可选));)。
10、使用解耦方式设置model值(比如编辑和新增使用的数据格式是一样,使用解耦方式就不用一个一个的属性赋值了)
11、build打包的时候,要使门户网站加载速度尽量快(网站首次加载特别的缓慢的问题)
设置build的配置文件
1)router.js内使用懒加载模式加载.vue文件
2)config -> index.js(webpack配置)
productionSourceMap: false,//打包后,去掉dist/static/js下的.map文件
12、每次网页版本更新都要清理浏览器的缓存
清理缓存方式
1)、手动去浏览器的设置清理(不可能的)
2)、index.html设置 no-cache,(在前后端分离的情况下貌似没有用)
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Cache" content="no-cache"> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />3)我发现每次build 后,dist下的js文件和css文件,有时候跟上一次build的文件名是一样的。所有在webpack.pro.js中设置打包的时候的文件名,最好加时间戳。这样每次打包后形成的js和css的文件名就不一样。网站加载的时候也会重新加载数据。
13、前端加载后台的数据的时候,会有时间延迟,最好有一个全局的进度动画。这样友好度会不错。(比如element UI 的Loading组件、或者自己定义)
还有什么?......