超優(yōu)秀 Vue3.0 開(kāi)源UI組件庫(kù)
這段時(shí)間對(duì)于前端人來(lái)說(shuō)，最大的驚喜莫過(guò)于期盼已久的Vue.js 3.0正式發(fā)布了。
之前就有很多小伙伴詢(xún)問(wèn)vue3組件庫(kù)相關(guān)的問(wèn)題。趁著vue.js 3.0發(fā)布的熱潮，就給大家推薦幾個(gè)Vue3 Beta組件庫(kù)。
性能方面優(yōu)化
- 路由/圖片懶加載
- v-show復(fù)用dom
- 長(zhǎng)列表性能優(yōu)化
- 事件銷(xiāo)毀
- 插件按需引入
- 無(wú)狀態(tài)組件標(biāo)記為函數(shù)式組件
- 變量本地化
- 更好的TypeScript集成
- SSR
- ...
vue3.0中文官網(wǎng)
https://v3.cn.vuejs.org/
倉(cāng)庫(kù)地址
https://github.com/vuejs/vue-next
下面進(jìn)入今天的正文。有哪些互聯(lián)網(wǎng)大廠(chǎng)率先推出自己的Vue3組件庫(kù)呢？
1、Vant 3.0
Vant有贊團(tuán)隊(duì)推出的Vue移動(dòng)端組件庫(kù)，已經(jīng)完成并發(fā)布Vue3.0 beta版本。
安裝
- # 通過(guò) npm 安裝
- $ npm i vant@next -S
- # 通過(guò) yarn 安裝
- $ yarn add vant@next
快速引入
- // 全局引入
- import { createApp } from 'vue'
- import Vant from 'vant'
- import 'vant/lib/index.css'
- const app = createApp()app.use(Vant)// 按需引入
- import { createApp } from 'vue'
- import { Button } from 'vant'
- const app = createApp()app.use(Button)
組件的使用和Vant 2.x沒(méi)多大區(qū)別，直接引入使用即可。
文檔地址
https://vant-contrib.gitee.io/vant/next/#/zh-CN/
倉(cāng)庫(kù)地址https://github.com/youzan/vant
2、Ant-Design-Vue
一款AntD設(shè)計(jì)風(fēng)格的Vue實(shí)現(xiàn)。目前已經(jīng)發(fā)布Vue 3.0 的 2.0.0 測(cè)試版。
安裝
- $ npm i ant-design-vue@next -S
快速引入
- # 完整引入
- import { createApp } from 'vue'
- import Antd from 'ant-design-vue'
- import 'ant-design-vue/dist/antd.css'
- const app = createApp()
- app.use(Antd)# 按需局部引入import { createApp } from 'vue'
- import { Button, message } from 'ant-design-vue'
- const app = createApp()
- app.use(Button)app.config.globalProperties.$message = message
組件使用方式也和之前一樣。大家如果有開(kāi)發(fā)Vue3項(xiàng)目計(jì)劃，可以去了解下。
文檔地址
https://2x.antdv.com/docs/vue/introduce-cn/
倉(cāng)庫(kù)地址
https://github.com/vueComponent/ant-design-vue/
3、Element-Plus
element-ui風(fēng)格的Vue3重構(gòu)組件庫(kù)。目前還在緊急研發(fā)中，大家可以去了解下最新動(dòng)態(tài)。
文檔地址
https://element-plus.org/#/zh-CN
好了，就分享到這里。如果大家有其它最新Vue3.0 UI組件庫(kù)，期待一起分享交流哈！
