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 调试通过。

你可能感兴趣的:(vue-cli3 配置笔记)