前言
Vue3 已经发布正式版挺长时间了,也比较成熟了,相对于 vue2。vue3在响应式上可以说是做了很大程度的改变。另外就是大家都不陌生的 组合式api 的推出,极大地提高开发者的开发效率。
不过,随着 vue3 的正式推出。原来的 UI 框架也一定程度上受到了限制,因为大都是基于 vue2开发的。大家都非常熟悉的 ElementUI。不过好在现在 基于vue34的ElementPlus也已经更新了好多。
但另外一款基于vue3的UI框架也已经悄然而生,并且受到了尤神的亲力推荐。想必肯定有与众不同的地方。
naive-ui 官网文档的地址:
https://www.naiveui.com/
组件种类
在naive-ui中的组件可以说是很多,很丰富了。而且基本是都是采用 tsx来编写的。同时也是基于vite2来开发的。可以说是很潮流了。
- 通用组件目前有13种
- 数据录入组件目前有20种
- 数据展示组件目前有14种
- 导航组件目前有9种
- 反馈组件目前有15种
- 布局组件目前有3种
- 配置组件目前有3种
具体的组件用法和示例可以去官网仔细阅读
主题切换
主题切换可以说是一个比较新的功能了,而且使用起来也比较方便,如果你只需要黑白两种主题风格,框架也都已经内置好,你只需要配置一下就好:
<template>
<n-config-provider :theme="darkTheme">
<app />
</n-config-provider>
</template>
<script>
import { darkTheme } from 'naive-ui'
export default {
setup() {
return {
darkTheme
}
}
}
</script>
详情参考:https://www.naiveui.com/zh-CN/os-theme/docs/customize-theme
更新频率
可以说作者在更新频率上是非常快的,我记得我刚开始使用该组件库的时候版本为: 2.15.1。短短一个月左右的时间现在已经更新到了:2.16.0。为勤劳的作者点赞~~
关于 vue-admin-work-p
vue-admin-work-p 是 vue-admin-work系列中的最新版本。采用的技术架构如下:
vue3 + vite2 + typescript + naive-ui
没错,p 版本就是采用了 naive-ui组件库开发而来。
预览地址:
http://qingqingxuan.gitee.io/vue-admin-work/p/