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的按钮标签

<a-button type="primary">Antd Button</a-button>

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

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

代码(button、menu):

<template>
  <div>
    <h2>主页</h2>
    <a-button type="primary">Antd Button</a-button>
    <template>
      <div>
        <a-button type="primary">
          Primary
        </a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">
          Dashed
        </a-button>
        <a-button type="danger">
          Danger
        </a-button>
        <a-config-provider :auto-insert-space-in-button="false">
          <a-button type="primary">
            按钮
          </a-button>
        </a-config-provider>
        <a-button type="primary">
          按钮
        </a-button>
        <a-button type="link">
          Link
        </a-button>
      </div>
    </template>
    <template>
      <div>
        <a-menu v-model="current" mode="horizontal">
          <a-menu-item key="mail"> <a-icon type="mail" />Navigation One </a-menu-item>
          <a-menu-item key="app" disabled> <a-icon type="appstore" />Navigation Two </a-menu-item>
          <a-sub-menu>
        <span slot="title" class="submenu-title-wrapper"
        ><a-icon type="setting" />Navigation Three - Submenu</span
        >
            <a-menu-item-group title="Item 1">
              <a-menu-item key="setting:1">
                Option 1
              </a-menu-item>
              <a-menu-item key="setting:2">
                Option 2
              </a-menu-item>
            </a-menu-item-group>
            <a-menu-item-group title="Item 2">
              <a-menu-item key="setting:3">
                Option 3
              </a-menu-item>
              <a-menu-item key="setting:4">
                Option 4
              </a-menu-item>
            </a-menu-item-group>
          </a-sub-menu>
          <a-menu-item key="alipay">
            <a href="https://antdv.com" target="_blank" rel="noopener noreferrer"
            >Navigation Four - Link</a
            >
          </a-menu-item>
        </a-menu>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Main',
  data () {
    return {
      current: ['mail']
    }
  }
}
</script>
<style scoped>
</style>

效果：

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