此文摘自：https://vue.ant.design/docs/vue/use-with-vue-cli-cn/
在 vue-cli 3 中使用
vue-cli 是業(yè)界最優(yōu)秀的 Vue 應(yīng)用開發(fā)工具之一璧微，本文會嘗試在 vue-cli 創(chuàng)建的工程中使用 antd 組件巫俺，并自定義 webpack 的配置以滿足各類工程化需求暇番。
安裝和初始化 #
我們需要在命令行中安裝 vue-cli 工具肺缕，你可能還需要安裝 yarn扬卷。
$ npm install -g @vue/cli# OR$ yarn global add @vue/cli然后新建一個項目扩然。
$ vue create antd-demo并配置項目掸犬。
工具會自動初始化一個腳手架并安裝 Vue 項目的各種必要依賴，如果在過程中出現(xiàn)網(wǎng)絡(luò)問題通殃，請嘗試配置代理或使用其他 npm registry。
然后我們進入項目并啟動。
$ cd antd-demo$ npm run serve此時瀏覽器會訪問 http://localhost:8080/ 画舌，看到 Welcome to Your Vue.js App 的界面就算成功了堕担。
引入 antd #
這是 vue-cli 生成的默認(rèn)目錄結(jié)構(gòu)。
├── README.md├── babel.config├── package.json├── public│?? ├── favicon.ico│?? └── index.html├── src│?? ├── assets│ │ └── logo.png│?? ├── components│ │ └── HelloWorld.vue│?? ├── App.vue│?? └── main.js└── yarn.lock現(xiàn)在從 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 內(nèi)容齐疙。
<template> <div id="app"> <img src="./assets/logo.png"> <a-button type="primary">Button></a-button> </div></template>...好了，現(xiàn)在你應(yīng)該能看到頁面上已經(jīng)有了 antd 的藍色按鈕組件旭咽，接下來就可以繼續(xù)選用其他組件開發(fā)應(yīng)用了贞奋。其他開發(fā)流程你可以參考 vue-cli 的官方文檔。
高級配置 #
我們現(xiàn)在已經(jīng)把組件成功運行起來了穷绵，但是在實際開發(fā)過程中還有很多問題轿塔，例如上面的例子實際上加載了全部的 antd 組件的樣式（對前端性能是個隱患）。
此時我們需要對 vue-cli 的默認(rèn)配置進行自定義仲墨。
使用 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 代碼都會按需加載幻梯，你在控制臺也不會看到這樣的警告信息。關(guān)于按需加載的原理和其他方式可以閱讀這里匈勋。
在用Cli 3搭建完成時礼旅，啟動時會報錯，主要原因就是因為Less.loader的版本問題洽洁，默認(rèn)的3.0版本會報錯痘系，只要在package.json同級目錄下創(chuàng)建一個js文件?vue.config.js ，并在里面填寫上 以下代碼就可以解決這個問題饿自，原因是版本沖突
module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } }}