1、安裝 Ant Design
npm 是 Node 的包管理工具，我們可以通過 npm 安裝 Ant Design
加上 --save 選項，可以同時將配置寫入 package.json 的 dependencies 字段（生產(chǎn)環(huán)境依賴）
npm install --save ant-design-vue
2、引入 Ant Design
在 Vue 中引入 Ant Design 有兩種方式，分別是全部引入和局部引入，下面將會逐一介紹
（1）全部引入
在 main.js 中引入并注冊全部組件，即可在其它頁面中直接使用全部組件
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 新增代碼：引入全部組件及樣式
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
// 新增代碼：注冊全部組件
Vue.use(Antd)
new Vue({
? router,
? store,
? render: h => h(App)
}).$mount('#app')
采用這種引入方式，不管是否使用到的組件，都會全部加載進來，顯然不是一個好的辦法
（2）局部引入
在 main.js 中引入并注冊特定組件，在其它頁面中只可使用特定組件
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 新增代碼：引入特定組件及樣式
import {
? Button
} from 'ant-design-vue'
import 'ant-design-vue/lib/button/style'
// 新增代碼：注冊特定組件
Vue.component(Button.name, Button)
new Vue({
? router,
? store,
? render: h => h(App)
}).$mount('#app')
采用這種引入方式，可以保證只引入需要的組件（按需引入）
但每引入一個組件，都要手動將其對應的樣式文件同時引入，未免過于麻煩
babel-plugin-import 插件可以輔助完成這個工作，首先安裝 babel-plugin-import 插件
加上 --save-dev 選項，同時將配置寫入 package.json 的 devDependencies 字段（開發(fā)環(huán)境依賴）
npm install --save-dev babel-plugin-import
然后在 babel.config.js 配置插件
module.exports = {
? presets: [
? ? '@vue/cli-plugin-babel/preset'
? ],
? // 新增代碼
? plugins: [
? ? [
? ? ? 'import',
? ? ? { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
? ? ]
? ]
}
接著在 main.js 按需引入組件
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 新增代碼：引入特定組件
// 此時會自動引入對應的樣式文件，無需再手動逐一引入
import {
? Button
} from 'ant-design-vue'
// 新增代碼：注冊特定組件
Vue.component(Button.name, Button)
new Vue({
? router,
? store,
? render: h => h(App)
}).$mount('#app')
最后記得使用 npm run serve 重啟應用，即可在其它頁面中使用特定組件
注意，如果你在使用 vue-cli 3 創(chuàng)建項目時配置了 Less，那么你在運行應用時可能會出現(xiàn)以下錯誤：
Inline JavaScript is not enabled. Is it set in your options?
1
這是因為 Webpack 對于 Less-loader 的默認配置不合適所導致的，所以我們需要修改一下配置
在根目錄下的項目配置文件 vue.config.js 中添加以下配置項（如果沒有這個文件，就自己創(chuàng)建一個）
module.exports = {
? css: {
? ? loaderOptions: {
? ? ? less: {
? ? ? ? javascriptEnabled: true
? ? ? }
? ? }
? }
}
3、使用 Ant Design
在安裝和引入 Ant Design 后，我們就可以在頁面使用 Ant Design 中的組件啦
<template>
? <div>
? ? <a-button type="primary" @click="handleClick">Primary</a-button>
? </div>
</template>
<script>
export default {
? methods: {
? ? handleClick: function (e) {
? ? ? console.log('click', e)
? ? }
? }
}
</script>
這時，如果你能看到一個藍色的按鈕出現(xiàn)在頁面上，就說明已經(jīng)配置成功
接下來就可以盡情享受 Ant Design 帶給你的高效開發(fā)體驗
