您好,登錄后才能下訂單哦!
這篇文章主要介紹antd合不合適vue,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
antd適合vue使用,因?yàn)閍nt design有vue版本的,對(duì)應(yīng)的名稱為“ant-design-vue”;在vue項(xiàng)目中可以使用“npm i --save ant-design-vue”命令進(jìn)行安裝使用即可。
ant design的vue版本——ant-design-vue介紹
ant-design-vue是螞蟻金服 Ant Design 官方唯一推薦的Vue版UI組件庫(kù),它其實(shí)是Ant Design的Vue實(shí)現(xiàn),組件的風(fēng)格與Ant Design保持同步,組件的html結(jié)構(gòu)和css樣式也保持一致。 用下來(lái)發(fā)現(xiàn)它的確稱得上為數(shù)不多的完整的VUE組件庫(kù)與開發(fā)方案集成項(xiàng)目。
官網(wǎng):
https://www.antdv.com/docs/vue/introduce-cn/
優(yōu)點(diǎn):
提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。
開箱即用的高質(zhì)量 Vue 組件。
共享Ant Design of React設(shè)計(jì)工具體系。
ant-design-vue的全局引入
1、先用vue的腳手架工具vue-cli創(chuàng)建一個(gè)vue項(xiàng)目
2、安裝ant-design-vue
使用命令行工具,切換到項(xiàng)目路徑下,使用命令【npm i --save ant-design-vue】安裝,如下圖
1.png
3、全局引入
(1)完整引入
main.js中全局引入并注冊(cè)
import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' Vue.use(Antd)
在頁(yè)面中不再需要引入注冊(cè)組件,可以直接使用所有的組件
<template> <div> <a-button type="primary">hello world</a-button> </div> </template> <script> export default {} </script>
(2)導(dǎo)入部分組件
在main.js中導(dǎo)入并注冊(cè)需要在項(xiàng)目中使用的組件
import { Button } from "ant-design-vue"; import 'ant-design-vue/lib/button/style/css' Vue.component(Button.name, Button)
在項(xiàng)目中可以直接使用這個(gè)已經(jīng)注冊(cè)的組件
<template> <div> <a-button type="primary">hello world</a-button> </div> </template> <script> export default {} </script>
以上是“antd合不合適vue”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。