這段時間對于前端人來說，最大的驚喜莫過于期盼已久的Vue.js 3.0正式發布了。

之前就有很多小伙伴詢問vue3組件庫相關的問題。趁著vue.js 3.0發布的熱潮，就給大家推薦幾個Vue3 Beta組件庫。

性能方面優化

• 路由/圖片懶加載
• v-show復用dom
• 長列表性能優化
• 事件銷毀
• 插件按需引入
• 無狀態組件標記為函數式組件
• 變量本地化
• 更好的TypeScript集成
• SSR
• ...

vue3.0中文官網

https://v3.cn.vuejs.org/

倉庫地址

https://github.com/vuejs/vue-next

下面進入今天的正文。有哪些互聯網大廠率先推出自己的Vue3組件庫呢？

1、Vant 3.0

Vant有贊團隊推出的Vue移動端組件庫，已經完成并發布Vue3.0 beta版本。

安裝

# 通過 npm 安裝 
$ npm i vant@next -S 
# 通過 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沒多大區別，直接引入使用即可。

文檔地址

https://vant-contrib.gitee.io/vant/next/#/zh-CN/

倉庫地址https://github.com/youzan/vant

2、Ant-Design-Vue

一款AntD設計風格的Vue實現。目前已經發布Vue 3.0 的 2.0.0 測試版。

安裝

$ 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 

組件使用方式也和之前一樣。大家如果有開發Vue3項目計劃，可以去了解下。

文檔地址

https://2x.antdv.com/docs/vue/introduce-cn/

倉庫地址

https://github.com/vueComponent/ant-design-vue/

3、Element-Plus

element-ui風格的Vue3重構組件庫。目前還在緊急研發中，大家可以去了解下最新動態。

文檔地址

https://element-plus.org/#/zh-CN

好了，就分享到這里。如果大家有其它最新Vue3.0 UI組件庫，期待一起分享交流哈！