Naive Ui Admin - 基于 Vue3/Vite/TS 等最新的前端技术栈构建的免费开源中后台前端框架

Naive Ui Admin - 基于 Vue3/Vite/TS 等最新的前端技术栈构建的免费开源中后台前端框架

又一个开箱即用的高质量 admin 前端框架,漂亮优雅又能打!

关于 Naive Ui Admin

Naive Ui 是不久之前推荐的一款优秀的 UI 组件库,基于最新的 Vue3.0、Vite、 Naive UI、TypeScript 等前端技术栈, 而今天分享的 Naive Ui Admin 就是基于 Naive Ui 构建的 admin 中后台前端框架

Naive-Ui-Admin 官网

不少对中后台框架不够熟悉的人会认为一款 UI 组件库几乎等于一款 admin 框架,但成熟的 admin 框架需要做的很多,Naive Ui Admin 提炼了常用且具有代表性的业务模型页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,可以帮助开发者快速搭建企业级中后台项目,节省造轮子的时间,大幅提高开发效率。

Naive-Ui-Admin 预览

Naive Ui Admin 使用目前最新的前端技术栈,相信不管是从新技术的学习还是生产应用方面,都能帮助到我们。

Naive Ui Admin 技术特性

  • 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发
  • TypeScript: 应用程序级 JavaScript 的语言
  • 一键配置:基于配置文件可一键配置色彩主题、显示风格等
  • Mock 数据 内置 Mock 数据方案
  • 权限控制 内置完善的动态路由权限生成方案
  • 更多组件 二次封装了原 Naive Ui 没有的多个常用的中后台组件

不过由于使用的技术较新,想要顺畅地使用 Naive Ui Admin,需要具备以下的前端基础:

  • node 和 git -项目开发环境
  • Vite – 熟悉 vite 特性
  • Vue3 – 熟悉 Vue 基础语法
  • TypeScript – 熟悉TypeScript基本语法
  • Es6+ – 熟悉 es6 基本语法
  • Vue-Router-Next – 熟悉 vue-router 基本使用
  • Naive-ui – 熟悉 UI 框架基本使用
  • Mock.js – mockjs 基本语法

开发上手体验和使用建议

Naive Ui Admin 是一款用户操作体验优秀的漂亮中后台管理框架,基于有特色的 Naive Ui,给人一种别具一格的体验,用来搭建管理后台简单便捷,官网提供了 admin 项目预览地址,大家可以登录进去体验。

Naive-Ui-Admin 预览

Naive-Ui-Admin 预览

但尽管 Naive Ui Admin 提供了很多业务组件,但在应对相对复杂的业务功能时,目前这些组件还不够用,很多操作界面仍需要自行实现,因此更推荐给业务相对简单的产品项目使用。复杂业务更推荐使用基于 element ui 的 admin 框架。

目前 Naive Ui Admin 由 @Ah jung 开发维护,更新频率很高,借助官网的使用文档和 github 的源码,上手难度不大。值得一说的是,Naive Ui Admin 借鉴 vue-vben-admin 实现的骨架,后者同样是一款颜值很能打的优秀 admin 框架

免费开源说明

Naive Ui Admin 和 Naive Ui 一样都是完全免费开源的,基于 MIT 开源协议托管在 Github 上,任何个人都公司都可以免费下载使用。

原文链接:https://www.thosefree.com/naive-ui-admin

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的示例代码: 首先,需要安装 Naive UI 组件库和相关依赖: ``` npm install naive-ui -S npm install @vue/composition-api -S ``` 然后,创建一个名为 `ProvinceCityArea.vue` 的组件,代码如下: ```vue <template> <n-tree :data="data" v-model:value="selected" :accordion="false" :is-item-active="isItemActive" :render-label="renderLabel" /> </template> <script lang="ts"> import { defineComponent, ref } from '@vue/composition-api' import { NTree } from 'naive-ui' import { City, getProvinces } from '@/utils/city' export default defineComponent({ name: 'ProvinceCityArea', components: { NTree }, setup() { const data = ref<Array<any>>([]) const selected = ref<string[]>([]) const isItemActive = (item: any) => { return selected.value.includes(item.code) } const renderLabel = (item: any) => { return `${item.name} (${item.code})` } const loadData = () => { const provinces = getProvinces() data.value = provinces.map((province: any) => { const cities = City[province.code] || [] return { name: province.name, code: province.code, children: cities.map((city: any) => { const areas = City[city.code] || [] return { name: city.name, code: city.code, children: areas.map((area: any) => { return { name: area.name, code: area.code } }) } }) } }) } loadData() return { data, selected, isItemActive, renderLabel } } }) </script> ``` 上面代码,我们通过 `n-tree` 组件来渲染省市区选择树。 `data` 是用于存储树形结构数据的数组,`selected` 用于存储当前选的结点的 `code` 值。 `isItemActive` 方法用于判断某个结点是否被选,通过判断 `selected` 数组是否包含该结点的 `code` 值来实现。 `renderLabel` 方法用于渲染结点标签,这里我们展示的是结点的名称和 `code` 值。 `loadData` 方法用于加载数据,我们通过 `getProvinces` 方法来获取所有的省份数据,然后逐个遍历并构造树形结构数据。 在 `ProvinceCityArea.vue` 组件引入 `City` 和 `getProvinces` 方法是因为我们需要用到这些数据来构造树形数据。 最后,我们在需要使用省市区选择树的地方,像使用其他组件一样使用 `ProvinceCityArea` 组件即可。 ```vue <template> <province-city-area /> </template> <script lang="ts"> import { defineComponent } from '@vue/composition-api' import ProvinceCityArea from '@/components/ProvinceCityArea.vue' export default defineComponent({ name: 'App', components: { ProvinceCityArea } }) </script> ``` 以上就是使用 Naive UI 组件库的 `n-tree` 组件生成一个省市区选择树的示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值