vue2.0版本搭建一个中型PC项目,注意事项

tech2024-12-13  6

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组件、或者自己定义)

还有什么?......

最新回复(0)