vue-cli3 配置笔记

原文链接： https://juejin.im/post/5c25f0a0e51d450cf419449e

vue-cli3，在配置上看似简单但是给后来对开发带来很大对问题，修改起来也相对不容易。 使用yarn或npm都可以安装，我更偏向使用yarn

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

在配置中按vue-cli3说明安装配置，和2.0创建项目方式相同

vue create hello-world
复制代码

1、选择 manually select features，（空格为选取，回撤则提交），选择所需插件，这个确实对没有配置过webpack对人来讲就是坑，会配置webpack对人也不屑用vue-cli，他对初衷是让程序员躲开配置写代码，但是此处已经背弃了。

2、选择所需插件，我选择了babel，router ，vuex，less等必要项。

3、配置axios，可以yarn add axios，也可以直接vue add axios，由vue-cli提供等插件，在页面直接倒入就可以全局使用, 我使用等vue add axios ，发现生成了一个plugins文件夹，源码部分是生成了一个vue组件，并使用了vue.use安装了全局使用及window.axios和Vue.axios全局调用。 （在页面 import './plugins/axios' ）

Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)
复制代码

安装ant-design-vue,等过程就比较麻烦，使用了 babel-plugin-import 组件部分加载，一直报错，然后百度到原因，因为less 及less-loader版本不一致，冲新安装ant-design-vue框架package.json 中相同版本 yarn add less-loader@^4.0.5 和 yarn add less@^2.7.2 调试通过。