SpringBoot + Vue 搭建 Blog（三）-- 集成antd design

一、什么是antd design

官网：https://www.antdv.com/docs/vue/introduce-cn/

 蚂蚁金服体验技术部经过大量的项目实践和总结，沉淀出设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。目前有阿里、美团、滴滴、简书采用。

Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。

antd不仅仅是一个组件库，而是一门设计语言，提供了配套的设计资源(A UI Design Language)，它保持了组件的结构样式动画的一致性，我们可以直接使用antd官方提供的设计资源。此外，antd积累了丰富的语言包，在组件库中可以直接使用这些语言包。

二、安装antd design

npm install ant-design-vue --save

三、配置antd design

在main.js中，添加以下代码

import ant from 'ant-design-vue' // 引入Antd组件
import 'ant-design-vue/dist/antd.less' // 引入样式

Vue.use(ant) // 使用Antd

四、使用antd design

在页面中添加antd的按钮标签

Antd Button

打开页面可以看到如下样式，说明antd已经完成集成了。

接下来我们就可以自由使用antd的组件进行开发工作了。

代码(button、menu):

效果：

更多组件用法可参考antd官网：https://www.antdv.com/docs/vue/introduce-cn/