Naive Ui Admin 是一个基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目， 相信不管是从新技术使用还是其他方面，都能帮助到你。

项目地址：https://github.com/jekip/naive-ui-admin

本次使用JS+Vue实现Naive Ui Admin，带你阅读项目的流程。

项目搭建

本次项目搭建使用Vue3提供的脚手架工具，使用UI方式搭建项目基础框架。

安装vue/cli-init

sudo npm install -g @vue/cli

运行图形界面

vue ui

在此创建项目，给项目起个名字

预设选择手动，当然如果你之前配置过，也可以直接使用之前保存的模板

勾选的项目，根据自己喜好来：

  • Babel
  • Router
  • Vue
  • Linter/Formatter
  • 使用配置文件

这一步，同样可以安装喜好来：

注意Linter+Prettier可能对格式要求较高，开发过程中可能会报错。请根据自己喜好选择是否使用。

当然开发过程中可以使用命令一键调整格式。

实现

由于项目全部都是代码，写成博客会又臭又长，这里还请移步：

AdminPro JS版搭建流程

依赖安装

资源文件

项目设置

常量字符

工具方法

状态管理

VUE页面

路由配置

项目布局

启动项目

网络配置

请求API

带你阅读Naive Ui Admin后台管理源码，并手撸JS版本的更多相关文章

  1. Svelte Ui Admin后台管理系统|svelte3+svelteUI中后台前端解决方案

    基于svelte3.x+svelteKit+svelte-ui网页后台管理系统SvelteAdmin. Svelte-Ui-Admin 基于svelte3.x+svelteKit+vite3+echa ...

  2. 第三百七十八节，Django+Xadmin打造上线标准的在线教育平台—django自带的admin后台管理介绍

    第三百七十八节,Django+Xadmin打造上线标准的在线教育平台—django自带的admin后台管理介绍 配置django的admin数据库管理后台 首先urls.py配置数据库后台路由映射,一 ...

  3. Django基础-03篇 操作Django自带的admin后台

    1.使用model.py来定义表结构,使用命令同步到数据库 python manage.py makemigrations #生成表结构(py) python manage.py makemigrat ...

  4. 免费后台管理UI界面、html源码推荐

    一个好的UI应该满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为现在还有很多公司在使用Win7系统,系统内置了IE8 3.能通过选项卡打开多个页面,不 ...

  5. python自动化开发-[第二十一天]-form验证,中间件,缓存,信号,admin后台

    今日概要: 1.form表单进阶 2.中间件 3.缓存 4.信号 5.admin后台 上节课回顾 FBV,CBV 序列化 - Django内置 - json.dumps(xxx,cls=) Form验 ...

  6. django在admin后台注册自己创建的数据库表

    django在admin后台注册自己创建的数据库表,这样我们就可以在admin后台看到表结构信息,我们就可以在admin后台快速录入表记录信息 如果没有注册,那么你在登录django自带的admin的 ...

  7. 自定义django的admin后台action

    django的admin后台管理系统中自带了一个批量删除所选对象的action. 我们还可以添加自定义的action来实现其它类似的功能,如批量修改某个字段的功能.简单的,例如将文章批量标记为已发布的 ...

  8. 第三百零六节，Django框架,models.py模块，数据库操作——创建表、数据类型、索引、admin后台，补充Django目录说明以及全局配置文件配置

    Django框架,models.py模块,数据库操作——创建表.数据类型.索引.admin后台,补充Django目录说明以及全局配置文件配置 数据库配置 django默认支持sqlite,mysql, ...

  9. Django Admin后台管理模块的使用

    Admin后台管理模块的使用 Django的管理员模块是Django的标准库django.contrib的一部分.这个包还包括其它一些实用的模块: django.contrib.auth django ...

  10. Django - admin后台、auth权限

    admin后台 一.创建一个管理员用户 (1).设置时区.语言(可选步骤) 打开settings.py,改成下面那样 LANGUAGE_CODE = 'zh-Hans' TIME_ZONE = 'As ...

随机推荐

  1. 驾驭数据的能力，如同使用ChatGPT一样，是现代职场人的必修课

    现代职场所比拼的除了聪明才智.过往经验之外,很多软性技能也尤为重要. 现在已经不是像网络游戏开局拿着一根小木棍打天下的时代了,这将是一场武装到牙齿的较量,对于各类"装备"的驾驭能力 ...

  2. 模拟spring工作原理

    1.配置文件 Service=service.Impl.ServiceImpl saveDao=dao.daoImpl.saveDaoImpl 2.模拟业务层 --接口 Service package ...

  3. linux 性能自我学习 ———— cpu 切换带来的性能损耗 [二]

    前言 我们知道现在操作系统,都是多进程和多线程,那么会有一个操作系统帮助我们去切换进程和线程,这个是要消耗cpu资源的,那么就来了解一下cpu资源消耗情况. 正文 一般是下面几个场景切换: 进程上下文 ...

  4. c# 属性类（特性）

    前言 c# 属性类也称做特性.这是一篇垫文,为后面的过滤器和其他特性类的东西做铺垫. 正文 看一段代码: static void Main(string[] args) { Attribitefunc ...

  5. python mmsql连接支持

    前言 因为我使用的是mmsql数据库,因为遇到一点坑,所以发布出来. 正文 准备工作: https://www.lfd.uci.edu/~gohlke/pythonlibs/#pymssql 下载对应 ...

  6. VulnHub-Jangow-01-1.0.1打靶记录

    知识点 NMAP参数 -sV 获取系统信息 -sT TCP扫描可能会留下日志记录 -sC 使用默认脚本(在-A模式下不需要) -p1-xxx 扫描端口号 -p- ==>等价于 -p1-65535 ...

  7. 从 VLAN 到 IPVLAN: 聊聊虚拟网络设备及其在云原生中的应用

    简介: 由于这篇文章真的很长,大量的篇幅在讲述内核的实现,如果你对这部分不感兴趣,那么在建议你在看完第一部分的三个问题后,思考一下,然后直接跳转到我们对问题的回答. 作者:张伟(谢石)   由于这篇文 ...

  8. 【SIGIR 2022】面向长代码序列的Transformer模型优化方法，提升长代码场景性能

    简介: 论文主导通过引入稀疏自注意力的方式来提高Transformer模型处理长序列的效率和性能 阿里云机器学习平台PAI与华东师范大学高明教授团队合作在SIGIR2022上发表了结构感知的稀疏注意力 ...

  9. “让专业的人做专业的事”，畅捷通与阿里云的云原生故事 | 云原生 Talk

    简介: 如何借助阿里云强大的 IaaS 和 PaaS 能力去构建新一代的 SaaS 企业应用,从而给客户提供更好.更强的服务,这是畅捷通一直在思考和实践的方向.最终,畅捷通选定阿里云企业级分布式应用服 ...

  10. Spring Boot Serverless 实战系列“架构篇” | 光速入门函数计算

    ​简介:如何以 Serverless 的方式运行 Spring Boot 应用? ​ 作者:西流(阿里云函数计算专家) Spring Boot 是基于 Java Spring 框架的套件,它预装了 S ...