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

项目地址: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. 深入剖析 Java 类属性与类方法的应用

    Java 类属性 Java 类属性,也称为字段,是类中的变量.它们用于存储与类相关的数据. 创建类属性 在类定义中声明属性: public class Main { int x; // 属性 Stri ...

  2. C# 布尔值和条件语句:入门指南和实用示例

    C# 布尔值 在编程中,通常需要一个只能有两个值之一的数据类型,比如: 是 / 否 开 / 关 真 / 假 为此,C# 有一个 bool 数据类型,可以取 true 或 false 的值. 布尔值 使 ...

  3. mybatis复习(三)映射文件属性详解和动态SQL

    mybatis映射文件属性详解和动态SQL笔记 <SELECT> id = "" 唯一标识parameterType = "" 表示传入SQL语句的 ...

  4. HarmonyOS多媒体框架介绍

    原文:https://mp.weixin.qq.com/s/_2LHv7s7X4IJMCPU8hcCeg,点击链接查看更多技术内容.   随着科技进步,我们的生活发生了翻天覆地的变化.过去几年音视频技 ...

  5. C# 冻结Excel窗口以锁定行列、或解除冻结

    在处理大型Excel工作簿时,有时候我们需要在工作表中冻结窗格,这样可以在滚动查看数据的同时保持某些行或列固定不动.冻结窗格可以帮助我们更容易地导航和理解复杂的数据集.相反,当你不需要冻结窗格时,你可 ...

  6. 面试官:说一说CyclicBarrier的妙用!我:这个没用过

    写在开头 面试官:同学,AQS的原理知道吗? 我:学过一点,抽象队列同步器,Java中很多同步工具都是基于它的... 面试官:好的,那其中CyclicBarrier学过吗?讲一讲它的妙用吧 我:啊,这 ...

  7. cv2在图像上画不同比例的锚框

    ''' cv2在图像上画不同比例的锚框 ''' import cv2 import math # 画宽高比1:1的锚框 def display_11_anchor(img,anchor_11_left ...

  8. 高云1N1开发板高云gowin软件使用教程

    国产FPGA是最近几年起来的产品,具有性价比高特点.高云FPGA,很多用户都用在LED,电机控制,PLC设备上. 开发板子采用GW1N-LV1QN48C6/I5 FPGA器件.具有低功耗,瞬时启动,高 ...

  9. TypeScript 中接口的理解?应用场景?

    一.是什么 「接口」是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的「类」去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法 简单来讲,一个接口所 ...

  10. threading的定时器模块,python,每间隔一段时间执行一次任务

    工作中常有一些定时任务要处理,比如使用百度的接口,它的access_token是一个更新一次的,每次使用时总是请求会很慢,所以我们把它保存起来,用定时器模块,定时在过期之前请求一次,或者定时数据同步, ...