介绍项目详细开发流程:

1.首先要根据项目效果图,观察是pc端的还是移动端的,需要用什么框架写,所需要引入什么组件
【这里选择(vue:因为他使用起来简单,灵活,高效率)(vant:他是一个轻量、可靠的移动端 Vue 组件库,使用起来很容易上手)】
2.移动端我还会配置一下rem,安装好对应插件,可以让px自动转换成rem自适应布局,或者使用vw、vh以及百分比来实现自适应布局,之后还可以封装一些scss公共的样式。
【(可以使用混入的方式,先创建好一个mixins.scss文件里面设置一些常用的公共样式,那个组件使用时通过@import直接导入混入的组件,样式使用时通过@include 名称 来使用)】
3,封装网络模块接口,安装axios
【(封装网络模块思路:)(之后安装axios,对axios进行封装,添加请求拦截,和响应拦截,我一般在请求拦截器中,给请求头添加token字段。当然这个token要存储在vuex中,因为很多页面功能都要用到token,所以用vuex对数据进行了共享,还有loding动画的开启,响应拦截器中,我一般会关闭请求时开启的动画,根据后端返回的状态码(code值),验证token是否有效或过期(一般401表示token无效,402表示token过期)。)(,一开始不会全部封装,会先封装几个,其它的等写到的时候在封装)】
4.还需要配置一下多环境变量。
【(分别是开发环境,测试环境,上线环境,并创建相应的文件以及不同环境配置:.env.development 本地开发环境配置;.env.staging 测试环境配置;.env.production 正式环境配置,为了修改起来方便,我们需要去config 下新建三个于环境配置相对应的.js文件,在里面创建本地api请求地址,项目地址等,再去config中根据环境引入不同配置 process.env.NODE_ENV,最后在网路模块核心文件中的baseurl根据环境不同引入不同baseApi地址)详情请看{ 多环境配置的详细思路: }】
5.一系列配置做好之后配置路由,拆分组件以及vuex的使用,我通常会把常用的组件单独封装起来,底部的tabber、上拉加载、下拉刷新、点击回顶部等,使用时直接调用,比较方便。
【(刷新页面vuex数据丢失的问题,可以用数据持久化解决,原理就是把vuex中的数据,同步到sessionStorage中,用一个插件就可以解决vuex-persistedstate。)】

你可能感兴趣的:(vue)