7.3 KiB
7.3 KiB
简介
一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS,采用了monorepo 架构，项目结构清晰，易于维护，同时也考虑了代码规范和可扩展性，如何要新增业务模块，只需要在apps目录下新增一个文件夹，文件夹名称就是模块的名称，然后在文件夹下新增一个vue文件，文件名就是模块的名称，就可以自动生成模块的路由和组件。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统.
特性
- 前沿技术应用：采用 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。
- 清晰的项目架构：采用 pnpm monorepo 架构，结构清晰，优雅易懂。
- 严格的代码规范：遵循 prettier 和 simple-git-hooks，保证代码的规范性。
- TypeScript： 支持严格的类型检查，提高代码的可维护性。
- 丰富的主题配置：内置多样的主题配置，与 UnoCSS 完美结合。
- 内置国际化方案：轻松实现多语言支持。
- 自动化文件路由系统：自动生成路由导入、声明和类型。更多细节请查看 Elegant Router。
- 灵活的权限路由：同时支持前端静态路由和后端动态路由。
- 丰富的页面组件：内置多样页面和组件，包括403、404、500页面，以及布局组件、标签组件、主题配置组件等。
- 命令行工具：内置高效的命令行工具，git提交、删除文件、发布等。
- 移动端适配：完美支持移动端，实现自适应布局。
使用
环境准备
确保你的环境满足以下要求：
- git: 你需要git来克隆和管理项目版本。
- NodeJS: >=20.19.0，推荐 20.19.0 或更高。
- pnpm: >= 10.5.0，推荐 10.5.0 或更高。
克隆项目
# github
git clone http://8.137.159.94:3000/ranjl/reader-star.git
安装依赖
pnpm i
由于本项目采用了 pnpm monorepo 的管理方式，因此请不要使用 npm 或 yarn 来安装依赖。
启动项目
pnpm dev
构建项目
pnpm build
Git 提交规范
本项目已内置 commit 命令，您可以通过执行 pnpm commit 来生成符合 Conventional Commits 规范的提交信息。在提交PR时，请务必使用 commit 命令来创建提交信息，以确保信息的规范性。
项目层级
apps/admin: 后台管理apps/user: 用户端packages/eslint-config: eslint 配置packages/shared: 公共组件
目录说明
read-star
├── .vscode // VSCode/Windsurf 项目级配置
│ ├── extensions.json // 推荐安装的插件
│ ├── launch.json // 调试配置文件 (Debug Vue/TS)
│ ├── settings.json // 项目专属设置 (ESLint 校验、格式化规则)
│ └── vue3.code-snippets // Vue3 代码片段
├── apps // 业务应用目录
│ ├── admin // 管理端应用 (原 soybean-admin 业务主体)
│ │ ├── build // Vite 构建相关配置和插件
│ │ ├── src // 源代码
│ │ │ ├── assets // 静态资源 (图片、svg图标)
│ │ │ ├── components // 全局组件
│ │ │ ├── constants // 常量 (正则、业务常量)
│ │ │ ├── hooks // 组合式函数 hooks
│ │ │ ├── layouts // 布局组件
│ │ │ ├── locales // 国际化配置
│ │ │ ├── router // 路由配置 (含 elegant-router 生成文件)
│ │ │ ├── service // 网络请求接口
│ │ │ ├── store // Pinia 状态管理
│ │ │ ├── theme // 主题配置
│ │ │ ├── typings // TS 类型声明 (*.d.ts)
│ │ │ ├── views // 页面视图
│ │ │ ├── App.vue // 根组件
│ │ │ └── main.ts // 入口文件
│ │ ├── .env // 环境配置
│ │ ├── index.html // 入口 HTML
│ │ ├── package.json // 应用依赖描述
│ │ └── vite.config.ts // Vite 配置文件
│ └── user // 用户端应用 (镜像拆分后的第二个端)
│ └── ... // 结构与 admin 一致
├── packages // 公共共享包 (内部依赖库)
│ ├── alova // Alova 请求封装
│ ├── axios // Axios 请求封装
│ ├── color // 颜色处理工具
│ ├── eslint-config // 自定义本地 ESLint 规范包 (私有化配置)
│ ├── hooks // 跨应用复用的组合式 hooks
│ ├── materials // 组件物料库
│ ├── shared // 共享类型声明、常量和通用函数
│ ├── uno-preset // UnoCSS 预设配置
│ └── utils // 全局通用的纯工具函数
├── .editorconfig // 统一编辑器编码规范
├── .gitattributes // Git 属性配置
├── .gitignore // Git 忽略文件配置
├── .npmrc // npm/pnpm 运行参数配置
├── eslint.config.js // 根目录 ESLint 平铺配置文件 (引用自 packages)
├── package.json // Monorepo 根依赖及脚本管理
├── pnpm-lock.yaml // pnpm 依赖锁定文件
├── pnpm-workspace.yaml // pnpm 工作区定义文件
├── README.md // 项目英文介绍
├── tsconfig.base.json // TS 基础共享配置
├── tsconfig.json // TS 引用管理配置 (Project References)
├── uno.config.ts // 原子 CSS 框架 UnoCSS 全局配置
└── vite.config.ts // (可选) 根目录 Vite 公共配置
命令行工具
{
// 构建打包(prod环境)
"build": "vite build --mode prod",
// 构建打包(test环境)
"build:test": "vite build --mode test",
// 删除主项目及子项目的 node_modules, dist, pnpm-lock.yaml
"cleanup": "sa cleanup",
// 提交代码 (生成符合 Conventional Commits standard 的提交信息)
"commit": "sa git-commit",
// 本地运行(test环境)
"dev": "vite --mode test",
// 本地运行(prod环境)
"dev:prod": "vite --mode prod",
// 生成路由
"gen-route": "sa gen-route",
// eslint检查并自动修复
"lint": "eslint . --fix",
// 初始化 simple-git-hooks
"prepare": "simple-git-hooks",
// 本地环境预览构建后的dist
"preview": "vite preview",
// 发布
"release": "sa release",
// vue文件的ts检查
"typecheck": "vue-tsc --noEmit --skipLibCheck",
// 更新依赖包
"update-pkg": "sa update-pkg"
}