超优秀 Vue3.0 开源UI组件库

开源 前端
这段时间对于前端人来说,最大的惊喜莫过于期盼已久的Vue.js 3.0正式发布了。

这段时间对于前端人来说,最大的惊喜莫过于期盼已久的Vue.js 3.0正式发布了。

超优秀 Vue3.0 开源UI组件库

之前就有很多小伙伴询问vue3组件库相关的问题。趁着vue.js 3.0发布的热潮,就给大家推荐几个Vue3 Beta组件库。

超优秀 Vue3.0 开源UI组件库
超优秀 Vue3.0 开源UI组件库

性能方面优化

  • 路由/图片懒加载
  • 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版本。

超优秀 Vue3.0 开源UI组件库

安装

  1. # 通过 npm 安装 
  2. $ npm i vant@next -S 
  3. # 通过 yarn 安装 
  4. $ yarn add vant@next 

快速引入

  1. // 全局引入 
  2. import { createApp } from 'vue' 
  3. import Vant from 'vant' 
  4. import 'vant/lib/index.css' 
  5. const app = createApp()app.use(Vant)// 按需引入 
  6. import { createApp } from 'vue' 
  7. import { Button } from 'vant' 
  8. const app = createApp()app.use(Button) 

组件的使用和Vant 2.x没多大区别,直接引入使用即可。

超优秀 Vue3.0 开源UI组件库

文档地址

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 测试版。

超优秀 Vue3.0 开源UI组件库

安装

  1. $ npm i ant-design-vue@next -S 

快速引入

  1. # 完整引入 
  2. import { createApp } from 'vue' 
  3. import Antd from 'ant-design-vue' 
  4. import 'ant-design-vue/dist/antd.css' 
  5. const app = createApp() 
  6. app.use(Antd)# 按需局部引入import { createApp } from 'vue' 
  7. import { Button, message } from 'ant-design-vue' 
  8. const app = createApp() 
  9. 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重构组件库。目前还在紧急研发中,大家可以去了解下最新动态。

超优秀 Vue3.0 开源UI组件库

文档地址

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

好了,就分享到这里。如果大家有其它最新Vue3.0 UI组件库,期待一起分享交流哈!

 

责任编辑:张燕妮 来源: 今日头条
相关推荐

2022-11-28 17:21:24

2024-03-29 09:07:15

Vue3.0开源项目

2022-11-18 08:32:02

Vue3.0开源项目

2020-10-13 08:24:31

Vue3.0系列

2022-11-30 15:33:39

Vue 3组件

2023-10-12 12:43:16

组件Vue

2022-02-06 22:13:47

VueVue3.0Vue项目

2020-08-25 09:50:35

Vue3.0命令前端

2020-09-18 14:01:21

vue3.0

2021-04-02 10:30:18

Vue3.0前端代码

2024-07-01 09:49:18

UI组件库Radix

2022-05-09 13:25:27

Vue3.0前端

2019-10-30 14:31:47

Vue 3.0数组响应

2023-06-14 08:01:13

ReactUI 组件库

2021-02-22 21:49:33

Vue动态组件

2024-04-22 12:00:00

WPF开发组件库

2021-01-20 15:59:14

开发Vue组件库

2021-01-12 15:54:03

Vue开发管理系统

2020-09-16 06:12:30

Vue.js 3.0Suspense组件前端
点赞
收藏

51CTO技术栈公众号