## 一、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') ``` 到这里，该组件库的基本用法就介绍完了，后续就是遇到需求，查阅组件文档，安装上面的教程应用到页面开发中来；