创建Vue项目详细的完整步骤和完善采坑点

前言
如果有不完善的地方请多多指教

1.创建项目

1.安装 nodejs
2.检查是否安装正常
    node -v
    npm -v
    显示版本号后，即安装正常
3.安装淘宝镜像（非常不推荐，因为会出一些莫名其妙的问题）
    npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org    
4.安装脚手架
    npm install vue-cli -g
5.检查脚手架是否安装成功
    vue -V   

6.开始创建项目
    切换到建立项目所在目录
7.vue init webpack  ”项目名称“  
       例如： vue init webpack  dn
8.开始初始化配置
   8.1: Project name dn （摁下 enter键）       
   8.2: Project description (A Vue.js project)     （摁下 enter键）   
   8.3: Author (JackChen)    （摁下 enter键） 
        （此处有一个长串的，，，反正也是摁下 enter，摁完之后显示Vue build standalone 就对了）
   8.4: Install vue-router? (Y/n) 输入 Y  然后摁下enter（这个是路由，必须要要的）
   8.5: Use ESLint to lint your code? (Y/n) 输入 n 然后摁下enter（这个语法规则检查，选择yes则为严格检查模式，稍稍有一点不规范就蹦出很多警告，所以此处选择n）
   8.6: Set up unit tests (Y/n) 输入 n 然后摁下enter
   8.7: Setup e2e tests with Nightwatch? (Y/n) 输入 n 然后摁下enter
   8.8: ❯ Yes, use NPM
          Yes, use Yarn
          No, I will handle that myself
          出现这个选项是表示之后用哪种方式来安装依赖包，摁下上下方向键可以选择，此处默认选择npm，然后摁下enter键
       
   8.9:  vue-cli · Generated "dn".
         # Installing project dependencies ...
         # ========================  
        出现这个就开始安装了~~~ 静静等着就好
   安装过程中出现WARN，无视就好，非要追究请，自行百度
   安装结束后会出现  
    found 13 vulnerabilities (1 low, 8 moderate, 4 high)
    run `npm audit fix` to fix them, or `npm audit` for details
   无视就好，这个无需更新初始的依赖包，想要更新可以按照这个提示自行更新，反正更新后你项目肯定是启动不起来的 
9.初始化依赖
    npm install
    按照上面的步骤之后，这个命令实际可以不执行，因为已经有了node_modules这个依赖包了，想要执行下也可以
10.启动运行
    npm run dev
11.打包
    npm run build
    项目开发完毕后 执行这个命令就可以打包了  

2.基础配置

1.在config文件夹下的index.js中
    autoOpenBrowser: false,如果该为true，则每次启动后会自动打开浏览器
    proxyTable: {
          '/server':{//代理地址
            target:'http://192.168.1.1:2333',//源地址
            changeOrigin: true, //是否跨域
            //secure: false,
            pathRewrite: {
              '^/server': ''   //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
            }
          }
        }, 这是配置访问后台地址的地方，具体规则自行百度
2.在src/router/index.js
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })
如果你在第二行中加入了 mode: 'history',请在打包时注释掉，不然上线后访问会一片空白

3.最后是build/utils.js中在47行加入 【 publicPath: '../../'】此处解决打包后字体路径错误的问题
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

4.环境配置
 在项目根目录的config文件夹中有2个环境配置文件
 dev.env.js和prod.env.js
 当开发环境与生产环境的项目路径存在差异时可以在此目录中增加 差异化根路径请求地址
 示例 dev.env.js配置：
   'use strict'
	const merge = require('webpack-merge')
	const prodEnv = require('./prod.env')
	
	module.exports = merge(prodEnv, {
	  NODE_ENV: '"development"',
	  API_SERVER : '"/portal"'
	})
  
  示例 prod.env,js配置：
   'use strict'
	module.exports = {
	  NODE_ENV: '"production"',
	  API_SERVER : '"/baseentry/baseportal"'
	}
	
	示例 统一请求API管理js配置
	const API_SER = process.env.API_SERVER;
	//方法地址设定
	var appUrl = {
	    API_QUERY_AREA_ORG_LIST: API_SER + "/query/area/org",
	  }  
如上述示例，则可以在开发或打生产包时指定不同的配置文件