先介紹vue-cli 3 預設產生的目錄結構
+ demo
+ node_modules（存放第三方模块）
+ public（存放静态文件）
- favicon.ico（图标）
- index.html （页面模板）
+ src（我们自己写的文件一般放在这个文件夹下）
+ assets（存放资源文件）
+ components（存放公共组件）
+ router.js（路由管理：Router）
+ store.js （状态管理：Vuex）
+ views（存放视图组件）
- App.vue（页面入口文件）
- main.js（程序入口文件）
- package.json（项目配置文件）
- package-lock.json（项目配置文件）
- babel.config.js（babel 配置文件）
- README.md（项目说明文档）
- ...（其它配置文件）npm 是Node 的套件管理工具，我們可以透過npm 安裝Ant Design
加上--save 選項，可以同時將配置寫入package.json 的dependencies 欄位（生產環境依賴）
npm install --save ant-design-vue
#在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 欄位（開發環境依賴）
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
// 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 建立專案時配置了Less，那麼你在執行應用程式時可能會出現以下錯誤：
Inline JavaScript is not enabled. Is it set in your options?
這是因為Webpack 對於Less-loader 的預設配置不合適所導致的，所以我們需要修改一下配置
在根目錄下的專案設定檔vue.config.js 中加入以下設定項（如果沒有這個文件，就自己建立一個）
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}在安裝和引入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>這時，如果你能看到一個藍色的按鈕出現在頁面上，就表示已經設定成功
以上是Vue3中怎麼引入Ant Design的詳細內容。更多資訊請關注PHP中文網其他相關文章！
