## 一、Ant Design及ant-design-vue Ant Design 作為一門設計語言面世，經歷過多年的迭代和積累，它對 UI 的設計思想已經成為一套事實標準，受到眾多前端開發者及企業的追捧和喜愛，也是 React 開發者手中的神兵利器。 **ant-design-vue 是 Ant Design 的 Vue 實現**，組件的風格與 Ant Design 保持同步，組件的 html 結構和 css 樣式也保持一致，真正做到了樣式 0 修改，組件 API 也盡量保持了一致。 ## 二、安裝 ``` npm i --save ant-design-vue ``` 完整導入實例： ``` import Vue from 'vue'; import Antd from 'ant-design-vue'; import App from './App'; import 'ant-design-vue/dist/antd.css'; Vue.config.productionTip = false; Vue.use(Antd); new Vue({ el: '#app', components: { App }, template: '<App/>', }); ``` 局部導入實例： ``` import Vue from 'vue'; import { Button, message } from 'ant-design-vue'; import App from './App'; Vue.config.productionTip = false; Vue.use(Button); Vue.prototype.$message = message; /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>', }); ``` ## 三、樣式變量 ``` @primary-color: #1890ff; // 全局主色 @link-color: #1890ff; // 鏈接色 @success-color: #52c41a; // 成功色 @warning-color: #faad14; // 警告色 @error-color: #f5222d; // 錯誤色 @font-size-base: 14px; // 主字號 @heading-color: rgba(0, 0, 0, 0.85); // 標題色 @text-color: rgba(0, 0, 0, 0.65); // 主文本色 @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色 @disabled-color: rgba(0, 0, 0, 0.25); // 失效色 @border-radius-base: 4px; // 組件/浮層圓角 @border-color-base: #d9d9d9; // 邊框色 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮層陰影 ``` ## 四、國際化 ant-design-vue 提供了一個 Vue 組件 LocaleProvider 用于全局配置國際化文案。 ``` <template> <a-locale-provider :locale="locale"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; export default { data() { return { locale: zhCN, }; }, }; </script> ``` 注意：`zh_CN`是文件名，以下表格也遵循同樣的規則。只需要將zh_CN改為其他語言即可，如zh_TW； ## 五、快速實戰 1、創建一個vue工程； ``` vue create example ``` 2、引入ant-design-vue組件庫； ``` npm i --save ant-design-vue ``` 3、一個最簡單的實例 ### **極簡入門** （1）、修改`src/main.js`，引入 antd 的按鈕組件以及全部樣式文件，增加代碼； ``` import 'ant-design-vue/dist/antd.css' import Antd from 'ant-design-vue' Vue.use(Antd) ``` （2）、修改`src/App.vue`的 template 內容，增加代碼； ``` <a-button type="primary">Button</a-button> ``` （3）、到這里，已經完成了最簡單的基于組件庫的例子，頁面上，顯示了一個按鈕；  ### **附件（最簡單實例完整代碼）** ***main.js*** ``` import Vue from 'vue' import App from './App.vue' import 'ant-design-vue/dist/antd.css' import Antd from 'ant-design-vue' Vue.use(Antd); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` ***App.vue*** ``` <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <a-button type="primary">Button</a-button> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ``` ### **引入一個組件的應用** （1）、查閱組件文檔，找到需引入組件文檔，以日期組件( https://www.antdv.com/components/date-picker-cn/)為例；  可以查看代碼或拷貝代碼； （2）、基于上面的代碼，選擇性拷貝到要使用的地方； 在App.vue中，加入以下代碼： ``` <a-date-picker @change="onChange" /> ``` ``` methods: { onChange(date, dateString) { console.log(date, dateString); } } ``` 效果：   >[danger] 特別注意： > 1、引入新的組件，如果之前是完整引入整個組件庫的方式，那么，這里就無須再單獨引入需要用的組件，如果之前是按需引入的，那么，這里需要把這里用的新組件引入進來； > 2、引入組件的方法，就兩種，一種是完整引入全部組件，一種是單獨引入個別組件，兩者都是在main.js中完成； > **完整引入全部組件：** ``` import Antd from 'ant-design-vue' Vue.use(Antd); ``` **單獨引入個別組件：** ``` import?{Button,DatePicker}?from'ant-design-vue' Vue.use(Button); Vue.use(DatePicker); ``` （3）、引入后，實例完整代碼： ***App.vue*** ``` <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <a-button type="primary">Button</a-button> <a-date-picker @change="onChange" /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld }, methods: { onChange(date, dateString) { console.log(date, dateString); } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ``` ***main.js（無變化，因為是完整引入組件，無須再單獨引入新組件）*** ``` import Vue from 'vue' import App from './App.vue' import 'ant-design-vue/dist/antd.css' import Antd from 'ant-design-vue' Vue.use(Antd); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` 到這里，該組件庫的基本用法就介紹完了，后續就是遇到需求，查閱組件文檔，安裝上面的教程應用到頁面開發中來；