一款清新优雅的中后台模版，内置丰富可配置的主题（强烈推荐）

Posted 2023-03-04 Java知音_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一款清新优雅的中后台模版，内置丰富可配置的主题（强烈推荐）相关的知识，希望对你有一定的参考价值。

简介

Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于 mock 实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。

特性

最新技术栈： 使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的 npm 包管理器 pnpm
TypeScript: 应用程序级 javascript 的语言
主题： 丰富可配置的主题、暗黑模式，基于原子 css 框架 - UnoCss 的动态主题颜色
代码规范： 丰富的规范插件及极高的代码规范
权限路由： 基于文件的路由系统、基于 mock 的动态路由能快速实现后端动态路由
请求函数： 基于 axios 的完善的请求函数封装，提供 Promise 和 hooks 两种请求函数，加入请求结果数据转换的适配器适配器

特性细节

技术栈：

Vue3 + Vite3 + TypeScript + NaiveUI + Pinia + UnoCss + Axios + ECharts + AntV G2 + @vueuse + iconify

严格的代码规范：

eslint + prettier + eslint-config-airbnb-base + eslint-plugin-vue + eslint-plugin-import + @typescript-eslint/eslint-plugin 等插件提供代码全面的格式规范，eslintrc 的 import/order 规则规范了导入依赖的顺序
husky + lint-staged + vuetsc + commitlint + commitizen 保证了提交的代码符合 eslint 规则和 TS 类型检测，提交的内容规范遵循了 angular 提交规范
应用设计模式优化代码：项目里面多次用到策略模式替换 if else
所有页面使用 script-setup 写法，并遵循特定顺序(用文档规范)
目录结构组织遵循特定规范，页面的写法严格遵循模块思想，使得每个页面的代码结构清晰明了

权限路由：

根据文件自动生成路由的类型和路由模块数据
动态的路由数据由 mock 生成，前端添加动态路由
指定了 mock 路由的类型，方便快速对接后端
菜单由动态路由数据生成，支持隐藏指定菜单，支持多级菜单，支持外链打开
在多页签中的缓存的页面会记录滚动位置
面包屑数据由当前路由和菜单数据生成

主题：

支持各种主题颜色、暗黑模式和各种布局
UnoCss 引入各种主题颜色，直接通过 class 即可应用对应的颜色
初始化加载适应主题颜色
支持项目 logo 自适应主题颜色

请求函数：基于 axios 封装

请求实例： 可创建多个不同的 baseUrl 的请求实例
统一请求结果： 将错误信息统一处理成特定格式，和请求成功的数据再按特定格式一起返回

/** 自定义的请求成功结果 */
interface SuccessResult<T = any> 
  /** 请求错误 */
  error: null;
  /** 请求数据 */
  data: T;

/** 请求错误 */
interface RequestError 
  /** 请求服务的错误类型 */
  type: RequestErrorType;
  /** 错误码 */
  code: string | number;
  /** 错误信息 */
  msg: string;

/** 自定义的请求失败结果 */
interface FailedResult 
  /** 请求错误 */
  error: RequestError;
  /** 请求数据 */
  data: null;

/** 自定义的请求结果 */
type RequestResult<T = any> = SuccessResult<T> | FailedResult;