Vue项目开发

项目开发流程

前言:人生所谓的成功，就是坚持把一件事情做到极致

在开发项目的过程中，每个人写代码的格式都是不一样，为了代码规范，会开启eslint（严格）规范，帮助检测代码是否规范，如果不规范，自动按着既定的规范格式化，在搭建脚手架之前，要在编辑器安装eslint插件，配置编辑器的自动保存eslint格式，然后在首选项打开设置json里进行配置，用eslint的规范来检测文件，比如js文件。
首先，要搭建脚手架 ，因为eslint版本的不同，可以手动自己下载插件进行配置，脚手架搭建成功后，
要在package.json文件中的devDependencies里面配置eslint版本，配置完成后，重新下载依赖库，然后在根目录下创建一个vue.config.js文件进行配置 lintOnSave改成"warning"，还要在根目录下创建一个.eslintrc.js文件进行代码规范的配置，这样eslint规范就配置完成啦。
在一个项目中，还要进行多环境变量的配置，首先要在package.json 里的 scripts 配置 serve stage build来执行不同的环境,然后在根目录下新建以.env开头的三个文件，这三个文件分别是，开发环境，测试环境，生产环境，在三个文件中，只定义了基础的变量，我们要统一在src下新建config的env.环境名.js里进行管理，然后在config文件下的index.js中导出，在src下创建一个http文件夹，有index.js文件封装axios，首先导入axios，在创建axios实例，配置拦截器，请求拦截器和响应拦截器，在导出axios实例，还要根据环境不同引入不同baseApi地址，在创建axios实例的请求接口换成引入的地址接口。
项目中需要进行请求接口，为了避免麻烦，方便日后维护，在src下新建一个api文件夹，有api.js文件先引入axios的实例，然后封装api接口，然后注册接口，调用即可。
在做移动端的项目时候，要安装vantui组件方便布局，vantui我使用的是按需引入的形式，所以，还要安装一个组件是 babel-plugin-import -D的组件，编译的过程中将import的写法自动转化为按需引入的方式，然后在babel.config.js中，进行配置，在单健一个vant.js文件，在文件中先引入vue实例，在引入要使用的组件，利用import引入，然后使用组件vue.use（组件名），还要在main.js里引入vant.js以及css样式，这样就可以按需引入的形式来使用vantui。
移动端项目，样式是需要手动写的，为了节省时间加快效率可以对sass封装。先创建一个global.scss文件做一下样式清除，和公共的一些样式美化。在创建一个mixins.scss文件存放一些比如清除浮动或者多行文本溢出的公用样式，这些都是每个项目会用到的东西，所以配置好了放入项目中直接进行调用即可。
最后还需要进行移动端适配，主流的有rem和vm两种，在这个项目中我用的是rem。先下载lib-flexible postcss-plugin-px2rem这两个插件，然后创建vue.config.js文件进行配置，最后在main.js 文件中导入： import “lib-flexible/flexible”;就可以用啦。
项目中，常用的组件
1.返回顶部组件
2.上拉加载更多组件
3.吸顶效果组件
4.搜索组件

7.优化