项目开发流程（简述）

一、开头

我是xxx公司的去哪了这个项目是我自己独立开发的，下面我给您介绍一下，我从0开始，到发布上线的流程。

二、框架
我们使用到的框架

vue2.0+多环境变量+axios+vuex+router+vant+element.ul+fastclick(解决点击300毫秒问题)
+rem(amfe-flexible)

三、框架使用
1.vue2.0

我们要创建vue项目的话需要新建一个文件夹
然后在文件夹目录输入cmd
然后用命令行 vue create 项目名称 创建一个项目

2.多环境变量

项目搭建好以后我们首先要配置环境变量，以便后期的测试

3.axios

方便我们获取接口中的数据，我们可以分装axios、添加请求拦截、响应拦截、基地址、超时时间，我们一般在请求拦截器里面给请求头添加token字段。当然这个token要存储在vuex中，还有loding效果也在请求拦截器里面

4.vuex

我们可以使用vuex中的五大核心
state(存储数据的)
mutations(可以直接操作state中的数据)
actions(异步掉用，通过dispath调用actions中的方法)
getters(类似于计算属性可做一些逻辑性的操作)
modules(分模块话存储)

我们可以使用vuex中的state存储数据来存储本地token值，还有组件传值的数据等等
但是现在在刷新页面的时候会丢失我们还要配置持久化用vuex-persist就可以解决

5.router

这是路由可以定义路由，定义好以后可以在页面的路径上访问的到

6.vant+element.ul

我们可以使用vant的组件跟element的组件快速开发

7.fastclick

解决点击延迟300毫秒的问题

8.rem(amfe-flexible)

rem 是移动端布局的单位

9.组件化拆分，开发项目
组件拆分可以让后面用到这个模块的时候直接引入即可非常方便

去哪里这个项目我们可以拆分成几部分 ，组件拆分的话可以根据自己的思想拆即可。
头部（herder）
轮播（swipe）
九宫格（grid）
商品卡片（card）

10、项目优化

使用keep-alive缓存不活动的组件
使用路由懒加载
图片懒加载
使用节流防抖函数(性能优化)
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
长列表性能优化
事件的销毁

11、打包优化

打包优化

打包优化的目的

1、项目启动速度，和性能
2、必要的清理数据
3、减少打包后的体积
第一点是核心，第二点呢其实主要是清理console

性能优化的主要方向

1、去除map文件
2、开启CND加速
3、代码压缩
4、图片压缩
5、公共代码抽离
6、首屏骨架屏优化
7、开启Gzip压缩