繼上一篇:《vue 3.0探險(xiǎn)記》- 嘗試安裝Element UI,我們發(fā)現(xiàn)element這是要跑路的節(jié)奏趋翻,那就趕緊找好下家,想一想餓了么被阿里給收購(gòu)了,阿里有And Design, 一家公司確實(shí)不需要兩種風(fēng)格的UI住闯。那接下來(lái)就看看And Design好了。打開(kāi)And Design of Vue就看到了對(duì)vue 3.0的提示:
那就嘗試一下安裝使用~
第一步:安裝Ant Design
可以參照Ant Design快速上手:https://2x.antdv.com/docs/vue/getting-started-cn/
npm i --save ant-design-vue@next
第二步:在main.js中添加Ant Design 的引用
我這里使用的是一次全部引用澳淑,也可以按需引用
import { createApp } from 'vue'
import App from './App.vue'
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
const app = createApp(App);
app
.use(antd)
.mount('#app');
第三步: 使用
在APP.vue中直接頂部添加一個(gè)Button
<template>
<a-button type="primary">
Primary
</a-button>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
運(yùn)行結(jié)果
綜上比原,當(dāng)下Ant Design針對(duì)vue 3.0是可以使用的,而且Ant Design還在活躍的更新中杠巡,從github倉(cāng)庫(kù)的活躍度就可以看出:https://github.com/vueComponent/ant-design-vue