超级详细的开发项目的流程
前言: 拿到一个项目任务首先了解是一个什么样的项目，项目开发中有没有什么外部的文件（css, js, json，icon）等需要配合完成项目的开发，确认开发的项目方向从而确定是否需要搭配那些依赖的配合开发以及合适的组件库的安装以及引入（Element-ui 、Vant-ui 、Mint UI 、Bootstrap Vue）等，达到不论从用户使用中的视觉体感以及编程开发中的编程思路清晰明了。
项目开发前我们进行如下操作
第一步 （安装vue脚手架 ---- npm install creata ‘项目工程名’）
npm install creata project //project为项目的工程名，自定义
第二步 （axios配置）
为了编程的开发的操作清晰明了以及后期不同环境下的请求改变问题，我们选择对axios合理有效的配置和不同接口的封装。首先在项目的src目录中，新建一个utils文件夹，然后在里面新建一个requset.js用来封装axios。配置环境的切换，设置axios的基础请求地址，请求规定超时的时间，添加请求拦截器和响应拦截器 。 然后在src下创建http文件夹里面创建api.js,导入配置好的axios，然后可以对不同接口进行封装，其中我们可以设置请求的地址（url），发起请求的方式（method）,要传入的参数值（data)以及提前配置好需要路由加载时的loading效果（hideloading）的开关
第三步 （配置多环境变量）
什么是配置多环境变量？
一般来说的我们分为开发环境、测试环境、生产环境，当每个环境都需要打包的时候，手动修改配置就很繁琐而且难免出错，比如每个环境对应的服务器地址不同，项目名称不同。我们只需要把不同环境的基础地址进行修改就可以执行命令进行不同环境的切换
。
- 首先在项目中的
package.json里的scripts配置
"serve": "vue-cli-service serve --open"
"stage": "vue-cli-service build --mode staging"
"build": "vue-cli-service build"
可以通过 npm run serve(stage、build)来执行不同环境 。 - 其次在项目根目录下创建三个文件
.env.development - 开发环境的配置
.env.staging - 测试环境的配置
.env.production - 生产上线环境的配置 - 然后在src下创建config文件夹，里面把创建三个js的子文件，分别是开发环境、测试环境、生产环境的baseUrl的基础地址 ，再创建一个index.js用于对不同环境的的地址做统一的管理。
- 最后在axios请求的地址导入前文中的统一管理的不同环境的index.js , 可以利用解构赋值的方法赋值对应不同环境的baseUrl，再设置到axios对应的基础路径里面
第四步 （组件库的下载以及配置）
我们可以根据不同项目所需要用到的轻量级的组件库（Element-ui 、Vant-ui 、Mint UI 、Bootstrap Vue）进行配置，首先通过指令 npm install 组件库 安装，同时再下载安装npm install babel-plugin-import 它是一款 babel 插件，它会在编译过程中将import 的写法自动转换为按需引入的方式，按需引入可以在后期的打包环境中大大减少项目体积。安装完成后在babel.config.js 进行设置，最后可以在src下创建一个语义化的文件夹以及子文件用于统一管理组件，用哪个引入哪个，无需在页面里重复引用。
第五步 （scss封装）
贯穿整个项目，在一些样式上我们可以对sass封装。先创建一个global.scss文件做一下样式清除，和公共的一些样式美化。在创建一个mixins.scss文件存放一些比如清除浮动或者多行文本溢出的公用样式，最后在所要应用到的不同组件中的style中 通过@import 进行引入使用