这段时间对于前端人来说,最大的惊喜莫过于期盼已久的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组件库,期待一起分享交流哈!
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/11973.html