vue中的项目开发流程

项目开发流程

你好，这个后台管理的项目,我呢下面给您介绍一个这个项目从0到上线的一个大概流程。
首先呢，这个项目主体上是我通过vue-cli3的脚手架和element-ui相结合开发完成的。
我是通过vue create 项目名称 安装的脚手架，之后会下载一些项目相关的插件进行配置，例如element-ui,axios等。

axios封装
在项目中我是先对axios进行的封装，添加请求拦截和响应拦截。在请求拦截中，会给请求头添加token字段，还有loading动画的开启。在响应拦截中，可以做一些loading动画的关闭，还有可以根据后端返回的状态码，做一些检验token是否有效或者过期的操作。接着就是做一些axios进行的api接口的封装，这里我用到了async，await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回调地域的出现。

多环境变量
之后就是做的一个多环境变量的配置，首先是通过在根目录下创建.env.*文件，development 本地开发环境配置、staging 测试环境配置、production 正式环境配置。因为在文件中并没有定义很多变量，只定义了基础的env，所以需要在src目录下创建一个config文件夹，创建对应的环境变量文件，用来管理不同的环境。在config中创建对应的文件是为了后期修改起来方便，不需要重启项目，符合开发习惯。之后就是根据需要的环境，在封装的axios中通过解构赋值的方式导入，放在baseURL中就可以使用。

组件化
之后就是根据vue中组件化的思想，在开发初期，首先我会创建不同的目录，来存放不同的组件。有views目录用来存放（页面级组件目录，比如home页面，category分类，detail详情页等），common（公共组件目录，例如：header公共头部组件，swiper轮播组件，list上拉列表组件等），feature（功能性组件，比如点击返回顶部，search搜索组件，sku商品规格组件等）

代码优化

第一步：是使用keep-alive缓存不活动的组件，能够在组件切换的过程中，把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。

第二步：配置路由懒加载，防止进入首页时，加载的资源过多，页面会出现白屏的情况。使用懒加载的方式能够把不同的路由分割成不同的代码块，之后路由被访问才加载对应的组件，这样效率就能更加高效了。

第三步：图片懒加载，通过下载一个vue-lazyload插件，对于图片多的页面，可以防止图片一下全部加载出来，这样会影响页面的加载速度，懒加载可以使页面滚动到哪个页面了，哪个页面的图片才会加载出来，这样提高了用户的体验。

第三步：节流防抖函数的使用，防抖函数，可以处理多次被触发的事件，只执行最后一次。节流函数，可以在规定的时间内，只触发一次函数，如果触发了多次，只有一次才会生效。

第四步：v-if和v-show区分场景使用，

第五步：v-for遍历必须为item添加key,并且避免同时使用v-if

第六步：第三方插件的按需引入，如果直接引入整个插件，会导致项目的体积太大，但可以通过按需引入的方式，只引入需要的插件，可以达到减小项目体积的目的。

webpack优化
一、去除生产环境sourceMap
二、去除console.log打印以及注释
三、使用CDN 加速优化
四、对资源文件进行压缩
五、对图片压缩
六、公共代码抽离
七、骨架屏

打包上线

最后就是通过vue run build做的一个打包上线，打包上线前做的webpack打包可以减少代码很大的体积，webpack优化前打包完后的体积可能是十几MB，但优化完后，打包后的代码达到几MB或者几百KB。这样使上线后的速度有很大的提高。