vue-cli配置

cnpm install
npm install
npm install axios
npm install echarts --save
npm install element-ui
cnpm install --save-dev less less-loader

cnpm install -g yarn
yarn -v
yarn

使用 yarn 的好处：yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

• 在vue项目中使用md5加密
  npm安装：npm install --save js-md5
  使用：在main.js文件中将md5转换成vue原型

import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

在需要调用的文件中使用

this.$md5('holle') // bcecb35d0a12baad472fbe0392bcc043

• 由于vue项目中公共路径在打包之后一旦遇到整体的路径更改就需要再次build一下，解决此问题，有一个外部的文件，直接修改更为方便：

1. 安装generate-asset-webpack-plugin插件

npm install --save-dev generate-asset-webpack-plugin

2. 在根目录下添加serverConfig.json的配置文件

   
   添加serverConfig.json
   serverConfig.json中内容
   

   （注：哪些公共的觉得有必要的都可以用json的形式写在里面）

3. 在build/webpack.prod.conf.js文件里引入generate-asset-webpack-plugin

const GeneraterAssetPlugin = require('generate-asset-webpack-plugin')

4. 引入添加的serverConfig.json文件

const serverConfig = require('../serverConfig.json')

5. 添加打包时写入配置文件的代码

const createJson = function(compilation) {
      return JSON.stringify(serverConfig);
};

6. 添加打包时输出配置文件的代码

new GeneraterAssetPlugin({
      filename: 'serverConfig.json',//输出到dist根目录下的serverConfig.json文件,名字可以按需改
      fn: (compilation, cb) => {
      cb(null, createJson(compilation));
   },

7. 在main.js中添加读取build之后的代码

Vue.prototype.getConfigJson = function () {
  Vue.prototype.$axios.get('serverConfig.json').then((result)=>{
    console.log(result);
    Vue.prototype.baseUrl =result.data.baseUrl;//设置成Vue的全局属性
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
  }).catch((error)=>{
    console.log(error)
  })
}
Vue.prototype.getConfigJson()//调用声明的全局方法

8. 第八步：项目中引用

this.baseUrl+'/123'

9. build

npm  run  build

项目生成的结构：

生成的dist文件结构

这里面的地址就可以随意更改了，不再需要再次build