如何完整的创建一个vue2 的项目

1、检查环境：

node -v,查看node版本，输出v12.13.0，没有问题。

2、 更新vue-cli：

 如果之前版本是2.x或者1.x，需要先卸载npm uninstall vue-cli -g
 输入npm install -g @vue/cli下载cli，输入vue -V查看当前版本

3、创建项目：

vue create shopk-wap，嫌麻烦直接回车选第一个Default默认配置即可

也可以自定义配置，选择第三个选项：Manually select features，我这里是这么配置的。

版本选择，选择2.x版本

路由采用history模式，直接输入y

css编译器选择less

Eslient选择标准模式

代码检查，选择保存的时候

配置文件存放地选择放在各自专用的配置文件中

然后回车即可，这个时候我们打开创建目录就可以看到已经生成了一堆文件。

4、配置项目：

4.1、创建vue.config.js文件

添加基本配置信息以及跨域配置

 const path = require('path')
 function resolve (dir) {
   return path.join(__dirname, dir)
 }
 module.exports = {
   publicPath: process.env.VUE_APP_BASE_URL, // 根地址，默认/
   outputDir: 'dist', // 打包目录
   assetsDir: 'assets', // 静态资源目录
   lintOnSave: true, 
   productionSourceMap: false, // 建议生产关闭
   devServer: {
     open: true,
     host: '0.0.0.0',
     port: '3000',
     https: false,
     hotOnly: true,
     proxy: {
       '/test': {
         target: 'http://10.10.10:8887',
         changeOrigin: true,
         pathRewrite: {
           '^/test': '/test'
         }
       }
     }
   },
   // 别名
   chainWebpack: config => {
     config.resolve.alias.set('@', resolve('src'))
   }
 }

修改package.json文件

 "scripts": {
   "dev": "vue-cli-service serve --mode dev",
   "build:test": "vue-cli-service build --mode test",// 测试环境打包
   "build:pro": "vue-cli-service build --mode prod", // 生产环境打包
   "lint": "vue-cli-service lint"
 },

创建环境变量文件（.env.dev、.env.prod、.env.test）

 NODE_ENV = 'production'  //环境变量名
 VUE_APP_TYPE = 'prod'    //环境类型
 VUE_APP_HOST = 'https://shopk.tunyar.com' // 项目地址
 VUE_APP_BASE_URL = '/' // 项目根目录，有可能本地测试不一样,需要自己调节。