内容摘要：这段时间对于前端人来说，最大的惊喜莫过于期盼已久的Vue.js 3.0正式发布了。之前就有很多小伙伴询问vue3组件库相关的问题。趁着vue.js 3.0发布的热潮，就给大家推荐几个Vue3 Beta

这段时间对于前端人来说，超优最大的开源库惊喜莫过于期盼已久的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组件库，期待一起分享交流哈！免费源码下载