[開發文檔](https://vue.ant.design/docs/vue/introduce-cn/) ## 引入ant-design-vue ### 1\. 安裝腳手架工具 ~~~ npm install -g @vue/cli # OR yarn global add @vue/cli ~~~ （本人使用yarn命令安裝成功） * * * ### 2\. 創建一個項目（選擇less） ~~~ vue create antd-demo ~~~ 從 yarn 或 npm 安裝并引入 ant-design-vue ~~~ yarn add ant-design-vue ~~~ main.js ~~~ import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWorker' import Antd from 'ant-design-vue'//+ import 'ant-design-vue/dist/antd.css'//+ Vue.use(Antd)//+ Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') ~~~ App.vue ~~~ <template> <div id="app"> <a-button type="primary">Button></a-button> <router-view/> </div> </template> ~~~ ### 配置按需引入樣式如（import { Button } from 'ant-design-vue'） 先安裝`babel-plugin-import`： ~~~ npm install babel-plugin-import --save-dev ~~~ #### 使用 vue-cli 3 的小伙伴[#](https://vue.ant.design/docs/vue/use-with-vue-cli-cn/#%E4%BD%BF%E7%94%A8-vue-cli-3-%E7%9A%84%E5%B0%8F%E4%BC%99%E4%BC%B4) 修改`babel.config.js`文件，配置 babel-plugin-import ~~~ module.exports = { presets: ["@vue/app"], + plugins: [ + [ + "import", + { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"} + ] + ] }; 注意：原先的是style:ture，如果不行的話就將其改為style:"css" ~~~ 然后移除前面在`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.use(Button); //或者Vue.component(Button.name, Button) Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount("#app"); ~~~ 最后重啟`npm run serve`訪問頁面，antd 組件的 js 和 css 代碼都會按需加載，你在控制臺也不會看到這樣的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。關于按需加載的原理和其他方式可以閱讀[這里](https://vue.ant.design/docs/vue/getting-started-cn/#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)。 如果安裝了babel-plugin-import在運行的時候報錯（vue-cli-service 不是內部或者外部命令）就刪了重新npm i（也可能是順序問題先安裝這個再安裝antd）