README.md

radical admin

简介

后台模板工程

在线预览

部署基于vercel，可能需要科学上网

开发文档：https://radical-admin-develop.vercel.app/?vercelToolbarCode=zuIcGXSvlHjDo26 admin预览：https://radical-admin-one.vercel.app/?vercelToolbarCode=Zw3v3yMNyi7rHBu#/dashboard/analysis

准备

• node 和 git -项目开发环境
• Turborepo Turborepo 使用
• Vite - 熟悉 vite 特性
• Vue3 - 熟悉 Vue 基础语法
• TypeScript - 熟悉TypeScript基本语法
• Es6+ - 熟悉 es6 基本语法
• Vue-Router-Next - 熟悉 vue-router 基本使用
• Ant-Design-Vue - ui 基本使用
• Formily - 表单解决方案 基本使用
• Formily Antdv-x3 - 表单组件库 基本使用
• vxe-table - 列表解决方案 基本使用
• Pinia - 状态管理库 基本使用
• UnoCSS - CSS 框架 基本使用
• Iconify - 图标解决方案
• vue-i18n - 国际化解决方案
• Mock.js - mockjs 基本语法

快速检索

• unocss
• iconify
• formily schema
• formily form

vscode插件推荐

• UnoCSS VS Code Extension
• Iconify IntelliSense
• DotENV
• i18n Ally
• Prettier - Code formatter
• Svg Preview
• TypeScript Vue Plugin (Volar)

安装使用

• 获取项目代码

git clone https://github.com/NoeyNoi/radical-admin.git

• 安装依赖

cd radical-admin

pnpm i

• 运行

pnpm dev

• 打包

pnpm build

Git 提交规范

命令

pnpm commit

• 参考 vue 规范(Angular)
• feat 增加新功能
• fix 修复问题/BUG
• style 代码风格相关无影响运行结果的
• perf 优化/性能提升
• refactor 重构
• revert 撤销修改
• test 测试相关
• docs 文档/注释
• chore 依赖更新/脚手架配置修改等
• workflow 工作流改进
• ci 持续集成
• types 类型定义文件更改
• wip 开发中

相关仓库

• vben3 本项目已修改，与原项目略有不同，仅作参考
• Vben Admin - 模板主题文档，本项目略有不同，仅作参考
• Monibuca-console - m7s 实例管理平台

QA

• 国际化插件（i18n Ally）不生效或者报错：尝试卸载重新安装

主题切换

antdvue 切换参考https://antdv.com/docs/vue/customize-theme-variable-cn#%E7%BC%96%E8%AF%91-less 编译对应的css文件并引入，prefixCls的两种主题的前缀为

• dark：暗黑模式
• light：正常模式 如页面内有修改组件样式，注意适配主题，如：

.dark-tabs-tab,
.light-tabs-tab
{
  border: none;
  transition: none;
}

vxe-table 切换参考https://vxetable.cn/#/table/start/theme第二种方式，css 变量