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/