157 lines
6.9 KiB
Markdown
157 lines
6.9 KiB
Markdown
|
## 简介
|
|||
|
|
|
|||
|
|
一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统.
|
|||
|
|
|
|||
|
|
## 特性
|
|||
|
|
|
|||
|
|
- **前沿技术应用**：采用 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。
|
|||
|
|
- **清晰的项目架构**：采用 pnpm monorepo 架构，结构清晰，优雅易懂。
|
|||
|
|
- **严格的代码规范**：遵循 prettier 和 simple-git-hooks，保证代码的规范性。
|
|||
|
|
- **TypeScript**： 支持严格的类型检查，提高代码的可维护性。
|
|||
|
|
- **丰富的主题配置**：内置多样的主题配置，与 UnoCSS 完美结合。
|
|||
|
|
- **内置国际化方案**：轻松实现多语言支持。
|
|||
|
|
- **自动化文件路由系统**：自动生成路由导入、声明和类型。更多细节请查看 [Elegant Router](https://github.com/reader-star/elegant-router)。
|
|||
|
|
- **灵活的权限路由**：同时支持前端静态路由和后端动态路由。
|
|||
|
|
- **丰富的页面组件**：内置多样页面和组件，包括403、404、500页面，以及布局组件、标签组件、主题配置组件等。
|
|||
|
|
- **命令行工具**：内置高效的命令行工具，git提交、删除文件、发布等。
|
|||
|
|
- **移动端适配**：完美支持移动端，实现自适应布局。
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
|
|||
|
|
**环境准备**
|
|||
|
|
|
|||
|
|
确保你的环境满足以下要求：
|
|||
|
|
|
|||
|
|
- **git**: 你需要git来克隆和管理项目版本。
|
|||
|
|
- **NodeJS**: >=20.19.0，推荐 20.19.0 或更高。
|
|||
|
|
- **pnpm**: >= 10.5.0，推荐 10.5.0 或更高。
|
|||
|
|
|
|||
|
|
**克隆项目**
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# github
|
|||
|
|
git clone http://8.137.159.94:3000/ranjl/reader-star.git
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**安装依赖**
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
pnpm i
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> 由于本项目采用了 pnpm monorepo 的管理方式，因此请不要使用 npm 或 yarn 来安装依赖。
|
|||
|
|
|
|||
|
|
**启动项目**
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
pnpm dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**构建项目**
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
pnpm build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Git 提交规范
|
|||
|
|
|
|||
|
|
本项目已内置 `commit` 命令，您可以通过执行 `pnpm commit` 来生成符合 [Conventional Commits](<[conventionalcommits](https://www.conventionalcommits.org/)>) 规范的提交信息。在提交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 公共配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 命令行工具
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
{
|
|||
|
|
// 构建打包(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"
|
|||
|
|
}
|
|||
|
|
```
|