antd適合vue使用嗎

antd適合vue使用，因為ant design有vue版本的，對應的名稱為「ant-design-vue」；在vue專案中可以使用「npm i --save ant-design-vue」指令進行安裝使用即可。

本文操作環境：windows7系統、vue2.0版本、Dell G3電腦。

ant design的vue版本－ant-design-vue介紹

ant-design-vue是螞蟻金服Ant Design 官方唯一推薦的Vue版UI元件庫，它其實是Ant Design的Vue實現，元件的風格與Ant Design保持同步，元件的html結構和css樣式也保持一致。用下來發現它的確稱得上為數不多的完整的VUE組件庫與開發方案集成項目。

官網：

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

優點：

提煉自企業級中後台產品的互動語言和視覺風格。

開箱即用的高品質 Vue 元件。

共享Ant Design of React設計工具系統。

ant-design-vue的全域引入

1、先用vue的鷹架工具vue-cli建立一個vue專案

2、安裝ant-design-vue

使用命令列工具，切換到專案路徑下，使用指令【npm i --save ant-design-vue】安裝，如下圖

1.png

3、全域引入

（1）完整引入

main.js中全域引入並註冊

 import Antd from 'ant-design-vue'
  import 'ant-design-vue/dist/antd.css'
  Vue.use(Antd)

在頁面中不再需要引入註冊元件，可以直接使用所有的元件

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>
<script>
export default {}
</script>

（2）導入部分元件

在main.js中導入並註冊需要在專案中使用的元件

import { Button } from "ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vue.component(Button.name, Button)

在專案中可以直接使用這個已經註冊的元件

<template>
    <div>
        <a-button type="primary">hello world</a-button>
    </div>
</template>
<script>
export default {}
</script>

推薦：《vue教學》

以上是antd適合vue使用嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！