关于 AntDesign Vue 在vue-cli 3安装初始化时 遇到的Less.loader问题

此文摘自：https://vue.ant.design/docs/vue/use-with-vue-cli-cn/

在 vue-cli 3 中使用

vue-cli 是业界最优秀的 Vue 应用开发工具之一，本文会尝试在 vue-cli 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。

安装和初始化 #

我们需要在命令行中安装 vue-cli 工具，你可能还需要安装 yarn。

$ npm install -g @vue/cli# OR$ yarn global add @vue/cli

然后新建一个项目。

$ vue create antd-demo

并配置项目。

工具会自动初始化一个脚手架并安装 Vue 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

然后我们进入项目并启动。

$ cd antd-demo$ npm run serve

此时浏览器会访问 http://localhost:8080/ ，看到 Welcome to Your Vue.js App 的界面就算成功了。

引入 antd #

这是 vue-cli 生成的默认目录结构。

├── README.md├── babel.config├── package.json├── public│   ├── favicon.ico│   └── index.html├── src│   ├── assets│   │   └── logo.png│   ├── components│   │   └── HelloWorld.vue│   ├── App.vue│   └── main.js└── yarn.lock

现在从 yarn 或 npm 安装并引入 ant-design-vue。

$ yarn add ant-design-vue

修改 src/main.js，引入 antd 的按钮组件以及全部样式文件。

import Vue from "vue";import Button from "ant-design-vue/lib/button";import "ant-design-vue/dist/antd.css";import App from "./App";Vue.component(Button.name, Button);Vue.config.productionTip = false;new Vue({  render: h => h(App)}).$mount("#app");

修改 src/App.vue的 template 内容。

...

好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vue-cli 的官方文档。

高级配置 #

我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。

此时我们需要对 vue-cli 的默认配置进行自定义。

使用 babel-plugin-import #

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理）。

$ yarn add babel-plugin-import --dev

使用 vue-cli 2 的小伙伴 #

修改.babelrc文件，配置 babel-plugin-import

  {    "presets": [      ["env", {        "modules": false,        "targets": {          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]        }      }],      "stage-2"    ],-   "plugins": ["transform-vue-jsx", "transform-runtime"]+   "plugins": [+     "transform-vue-jsx",+     "transform-runtime",+     ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]+   ]  }

使用 vue-cli 3 的小伙伴 #

修改babel.config.js文件，配置 babel-plugin-import

 module.exports = {  presets: ["@vue/app"],+  plugins: [+    [+      "import",+      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }+    ]+  ]};

然后移除前面在 src/main.js 里全量添加的 import 'ant-design-vue/dist/antd.css'; 样式代码，并且按下面的格式引入模块。

  // src/main.js  import Vue from 'vue'- import Button from 'ant-design-vue/lib/button';+ import { Button } from 'ant-design-vue';- import 'ant-design-vue/dist/antd.css'  import App from './App'  Vue.component(Button.name, Button)  Vue.config.productionTip = false  new Vue({    render: h => h(App)  }).$mount("#app");

最后重启 npm run serve 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。

在用Cli 3搭建完成时，启动时会报错，主要原因就是因为Less.loader的版本问题，默认的3.0版本会报错，只要在package.json同级目录下创建一个js文件 vue.config.js ，并在里面填写上 以下代码就可以解决这个问题，原因是版本冲突

module.exports = {  css: {    loaderOptions: {      less: {        javascriptEnabled: true      }    }  }}