feat: 提交多个新UI组件模块spec和相关属性设定，包括卡片封装、渐变卡片、列式布局组件等，重写了readme.md，用于AI Coding
Some checks are pending
Call HTTPS API / build (push) Waiting to run
Some checks are pending
Call HTTPS API / build (push) Waiting to run
This commit is contained in:
259
README.md
259
README.md
@@ -1,112 +1,165 @@
|
||||
<div align="center">
|
||||
<img width="200" src="https://gcore.jsdelivr.net/gh/zxwk1998/image/logo/vab.svg" alt="VAB"/>
|
||||
<h1>admin-plus</h1>
|
||||
</div>
|
||||
# Admin Plus（Vue3 企业级开发模板）
|
||||
|
||||
## 🔈 框架使用建议
|
||||
面向公司项目的前端模板与基础库：内置 `Vue 3 + Vue CLI 5 + TypeScript + Pinia + Vue Router + Element Plus`，并集成 Mock、代码生成（Plop）、多套布局组件与常用工具链，支持在此基础上快速裁剪与复用。
|
||||
|
||||
- 使用前请一定先阅读 vip 群文档及群文档中的常见问题，一般在群公告前 5 条。
|
||||
- 对于常见问题可直接使用 qq 群【消息记录】功能快速寻找到答案。
|
||||
- 如果您经过 qq 群聊天记录、翻阅文档、百度后努力尝试仍无法解决问题，可通过 vip 群寻求帮助，讨论时间法定工作日 10 点-16 点。
|
||||
- 2021 年 3 月 6 日后，main 分支支持 ts、js 混合开发，建议不熟悉 ts 的用户继续使用 js，熟悉 ts 用户可自行选择开发语言。
|
||||
- 对于热心回答群内其他成员问题的用户，所提建议将优先被采纳，并可获得部分内测版本体验资格。
|
||||
- 关于举报盗版侵权：请发送举报材料至fanhuihui1998@126.com，一经查实，官司所得收入 20%归举报人所有，80%归律师事务所所有。
|
||||
- 关于客服人员满意度评价以及相关建议：请发送材料至fanhuihui1998@126.com，邮件标题：满意度评价，邮件正文：评价依据，我们必将认真对待每一位客户的诉求。
|
||||
- 关于 bug 反馈：请发送材料至fanhuihui1998@126.com，邮件标题：bug 反馈，邮件正文：bug 截图及描述。
|
||||
> 本仓库同时提供面向 AI 的结构说明与模块索引：见 [AI-Coding/README.md](AI-Coding/README.md)。
|
||||
|
||||
## 🔈 框架使用约定
|
||||
---
|
||||
|
||||
- 1.购买者可将授权后的产品用于任意「符合国家法律法规」的应用平台，禁止用于黄赌毒等危害国家安全与稳定的网站，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
|
||||
- 2.购买主体购买后可用于开发商业项目，不限制域名和项目数量，购买主体不可将源码分享第三方，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
|
||||
- 3.购买者务必尊重知识产权，严格保证不恶意传播产品源码、不得直接对授权的产品本身进行二次转售或倒卖、开源、不得对授权的产品进行简单包装后声称为自己的产品等，无论有意或无意，我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
|
||||
- 4.购买者不可将 vip 群文档及资料分享给第三方，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
|
||||
- 5.购买者购买项目不可以用来构建存在竞争性质的产品并直接对外销售否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
|
||||
- 6.购买者购买项目中的源码（包含全部源码、及部分源码片段）不可以用于任何形式的开源项目，不可将源码放置于码云、github等开源平台，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
|
||||
- 7.购买者用于公司的项目商用时购买必须提供公司名称，用于证明购买过我们的项目来进行商业用途，防范法律风险，我们承诺对购买公司信息信息严格保密，不会泄漏到互联网或用于产品宣传。
|
||||
- 8.购买者用于个人学习需提供姓名、手机联系方式进行实名认证，如无法提供请勿下单。
|
||||
- 9.如用于外包项目，购买者购买项目中的源码不可直接对外出售，npm run build 编译后的项目不受限制。
|
||||
- 10.如果您的公司基于 Vab Admin 系列自行研发的产品（如 OA、ERP、SASS 等）需对外销售，并且产品中包含我们框架的前端源码，那么您无法购买以上版本，需联系客服购买专属定制版本（不为第三方提供前端框架代码请忽略本条）。
|
||||
- 11.虚拟物品下单后不支持退货退款。
|
||||
- 12.购买者需遵守以上约定，最终解释权归 vab 系列著作权人所有，如果您无法遵守以上约定，请勿下单。
|
||||
## 亮点
|
||||
|
||||
```
|
||||
注：以上协议以 //vuejs-core.cn/authorization/ 底部为准
|
||||
- **开箱即用**：工程化配置齐全（TS/ESLint/Prettier/Stylelint/Unit Test）。
|
||||
- **可扩展的 UI/布局体系**：`library/layouts/`、`library/components/` 内置多布局与业务型基础组件。
|
||||
- **Mock 一体化**：开发环境通过 `devServer.setupMiddlewares` 自动挂载 `mock/` 路由。
|
||||
- **现代依赖栈**：`Element Plus` + `@element-plus/icons-vue`，并内置图标组件 `vab-icons`。
|
||||
- **可生成代码**：通过 `plop` 快速生成页面/CRUD/组件/mock&api。
|
||||
|
||||
---
|
||||
|
||||
## 环境要求
|
||||
|
||||
- Node.js：建议 **16/18/20 LTS**（与 Vue CLI 5 兼容）
|
||||
- 包管理器：推荐 `pnpm`（项目脚本也提供 `npm` 用法）
|
||||
|
||||
---
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1）安装依赖
|
||||
|
||||
```powershell
|
||||
cd d:\project\Web_Template_Vue3_Dev
|
||||
pnpm i
|
||||
```
|
||||
|
||||
## 🔗 链接
|
||||
|
||||
- 💻 常规版演示地址：[admin-plus](//vuejs-core.cn/admin-plus/)
|
||||
- 📝 使用文档：(文档地址及密码请查看 vip 群群公告第一条)
|
||||
- 🗃 更新日志：[Releases](https://github.com/zxwk2024/admin-plus/releases)
|
||||
- 📌 付费版及 vip 群购买地址：[购买地址](//vuejs-core.cn/authorization/)
|
||||
|
||||
<!-- ## 🌱 版本
|
||||
|
||||
- `dev`分支为开发分支，较为激进，不推荐直接使用，非专业前端请勿使用。
|
||||
|
||||
- 对于感兴趣的提交(commit)，可使用精选(Cherry-Pick)复制到自己的项目中
|
||||
|
||||
| 分支名 | 是否精简提交 | 是否精简功能 | 是否支持多国语言 | 同步时间 | 维护人 |
|
||||
| -------------------------------------------------------------------------------- | :----------: | :----------: | :--------------: | :------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||
| [dev](https://github.com/zxwk2024/admin-plus/tree/webpack5) | ❌ | ❌ | ✔ | 即时 | All |
|
||||
| [main](https://github.com/zxwk2024/admin-plus/) | ❌ | ❌ | ✔ | 10-30 天 | <a href="https://github.com/zxwk1998" target="_blank"><img style="border-radius:999px" src="https://avatars3.githubusercontent.com/u/26647258?s=50&u=753921fb23f418996dffd6196e89729fcb2329ed&v=4"/></a> |
|
||||
| [release/main](https://github.com/zxwk2024/admin-plus/tree/release/main) | ✔ | ❌ | ✔ | 40-60 天 | <a href="https://github.com/FlowPeakFish" target="_blank"><img style="border-radius:999px" src="https://avatars3.githubusercontent.com/u/29328241?s=50&u=bb0977b405ccf1a101ce4e18e4fb8d958854ca60&v=4"/></a> |
|
||||
| [release/template](https://github.com/zxwk2024/admin-plus/tree/release/template) | ✔ | ✔ | ✔ | 40-60 天 | <a href="https://github.com/FlowPeakFish" target="_blank"><img style="border-radius:999px" src="https://avatars3.githubusercontent.com/u/29328241?s=50&u=bb0977b405ccf1a101ce4e18e4fb8d958854ca60&v=4"/></a> |
|
||||
| [release/seed](https://github.com/zxwk2024/admin-plus/tree/release/seed) | ✔ | ✔ | ❌ | 40-60 天 | <a href="https://github.com/FlowPeakFish" target="_blank"><img style="border-radius:999px" src="https://avatars3.githubusercontent.com/u/29328241?s=50&u=bb0977b405ccf1a101ce4e18e4fb8d958854ca60&v=4"/></a> | -->
|
||||
|
||||
## ✅ 版权须知
|
||||
|
||||
Vab Admin 系列产品受国家计算机软件著作权保护（证书号：软著登字第 7051316 号），
|
||||
禁止公开及传播产品源文件、二次出售等，
|
||||
违者将承担相应的法律责任，并影响自身使用。
|
||||
|
||||
## 🧑💻 增值服务
|
||||
|
||||
### vip 群
|
||||
|
||||
- 每位购买 Admin 的用户均可获得 1 个免费的 vip 互助群免费入群资格，可反馈 bug、协助框架问题解答，无需额外购买
|
||||
|
||||
- 免费名额之外，额外加入 vip 群 （100/人 仅限已购买框架的的公司员工加入，购买后联系 微信 zxwk-bfq 即可）
|
||||
|
||||
- [购买地址，网页右下角切换付款码即可](//vuejs-core.cn/authorization/)
|
||||
|
||||
### 定制开发
|
||||
|
||||
- 承接各类基于 vab 开发的前端项目
|
||||
- 承接项目范围 3K+ 至 无上限
|
||||
- 支持签订合同
|
||||
- 支持提供发票
|
||||
- 结算流程：前期款（50%）- 中期款（30%）- 尾款（20%）
|
||||
- 联系方式：见当前页底部
|
||||
|
||||
### 企业一对一远程培训
|
||||
|
||||
- 承接一对一远程培训服务（支持提供发票）
|
||||
- 承接时间： 周一至周六上午 10 点 - 晚上 10 点
|
||||
- 价格：400 - 10000
|
||||
- 承接方式：单次、包月、包年
|
||||
- 联系方式：见当前页底部
|
||||
|
||||
### 个人一对一技术指导
|
||||
|
||||
- 承接时间： 周一至周六上午 10 点 - 晚上 10 点
|
||||
- 价格：300 - 500
|
||||
- 承接方式：单日
|
||||
- 支持零基础远程教学（学员需学习刻苦，有上进心）
|
||||
- 学员需完成老师布置的任务
|
||||
- 联系方式：见当前页底部
|
||||
|
||||
### 联系方式
|
||||
|
||||
```txt
|
||||
|
||||
微信客服：zxwk-bfq （备注来意）
|
||||
|
||||
|
||||
邮件标题：企业一对一远程培训 - 公司名称，定制开发 - 公司名称，一对一技术支持 - 公司名称
|
||||
|
||||
邮件内容：大致描述 + 联系方式 + 预估需要时间 + 预算
|
||||
|
||||
后续： 收到邮件后，工作人员会于第一时间回复
|
||||
如你使用 npm：
|
||||
|
||||
```powershell
|
||||
cd d:\project\Web_Template_Vue3_Dev
|
||||
npm i
|
||||
```
|
||||
|
||||
### 2）启动开发环境
|
||||
|
||||
```powershell
|
||||
pnpm run serve
|
||||
```
|
||||
|
||||
### 3）构建
|
||||
|
||||
```powershell
|
||||
pnpm run build
|
||||
```
|
||||
|
||||
### 4）单元测试 / 代码质量
|
||||
|
||||
```powershell
|
||||
pnpm run test:unit
|
||||
pnpm run lint
|
||||
pnpm run lint:eslint
|
||||
pnpm run lint:prettier
|
||||
pnpm run lint:stylelint
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 常用脚本（scripts）
|
||||
|
||||
来自 `package.json`：
|
||||
|
||||
- **`serve`**：启动开发服务器（本地 Mock 会自动挂载）。
|
||||
- **`build`**：生产构建。
|
||||
- **`build:compress` / `compress`**：构建后压缩产物（`scripts/compress.js`）。
|
||||
- **`build:website`**：站点构建（使用 `VAB_VARIABLE=website` + 压缩）。
|
||||
- **`test:unit`**：单元测试。
|
||||
- **`lint`**：Vue CLI ESLint。
|
||||
- **`lint:eslint` / `lint:prettier` / `lint:stylelint`**：更精细的格式化与风格修复。
|
||||
- **`template`**：启动 `plop` 代码生成。
|
||||
|
||||
---
|
||||
|
||||
## 项目结构（速览）
|
||||
|
||||
> 更完整、可供 AI 检索复用的索引见 [AI-Coding/README.md](AI-Coding/README.md)。
|
||||
|
||||
```text
|
||||
src/ 应用主代码（入口、路由、状态、国际化、业务页面）
|
||||
library/ 模板基础库（全局样式、插件集合、构建扩展等）
|
||||
library/components/ 可复用基础组件（Vab* 体系）
|
||||
library/layouts/ 多套布局（含主 Layout 入口）
|
||||
mock/ 本地 Mock 服务（devServer 中间件挂载）
|
||||
types/ 全局类型声明与业务类型
|
||||
tests/unit/ 单元测试
|
||||
scripts/ 构建后处理脚本（如压缩）
|
||||
public/ 静态资源与 HTML 模板
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 关键约定与入口
|
||||
|
||||
### 应用入口
|
||||
|
||||
- `src/main.ts`
|
||||
- 创建应用并挂载：`createApp(App)`
|
||||
- 初始化顺序：`setupVab` → `setupI18n` → `setupStore` → `setupRouter`
|
||||
- 生产环境可自动启用 Mock：当 `baseURL` 不是外链地址时（见 `src/main.ts` 的判断）
|
||||
|
||||
### 路由
|
||||
|
||||
- `src/router/index.ts`
|
||||
- `constantRoutes`：如登录/注册/404 等基础路由
|
||||
- `asyncRoutes`：业务路由（包含 `Layout` 作为壳）
|
||||
|
||||
### 状态管理
|
||||
|
||||
- `src/store/index.ts`：Pinia 初始化与注入。
|
||||
|
||||
### 国际化
|
||||
|
||||
- `src/i18n/index.ts`
|
||||
- `createI18n({ legacy:false })`
|
||||
- 当前语言读取自 `useSettingsStore(pinia)`
|
||||
|
||||
### Mock
|
||||
|
||||
- `mock/index.js`
|
||||
- 挂载到开发服务器中间件（在 `vue.config.js` 的 `devServer.setupMiddlewares`）
|
||||
- 基于 `mockjs` 返回数据，并支持文件变更热更新
|
||||
|
||||
---
|
||||
|
||||
## 别名（Alias）
|
||||
|
||||
来自 `vue.config.js` / `tsconfig.json`：
|
||||
|
||||
- `@` → `src`
|
||||
- `~` → 项目根目录
|
||||
- `/#` → `types`
|
||||
- `@vab` → `library`
|
||||
- `@gp` → `library/plugins/vab`
|
||||
|
||||
---
|
||||
|
||||
## 代码生成（Plop）
|
||||
|
||||
项目提供 `plop` 生成器（见 `plopfile.js`）：
|
||||
|
||||
- `view`：页面
|
||||
- `curd`：CRUD
|
||||
- `component`：组件
|
||||
- `mock&api`：Mock 与 API 片段
|
||||
|
||||
运行：
|
||||
|
||||
```powershell
|
||||
pnpm run template
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 贡献与团队协作建议
|
||||
|
||||
- 建议以“业务模块”为单位在 `src/views/` 组织页面。
|
||||
- API 按域拆分在 `src/api/`，与 `mock/controller/` 保持同名与路径一致，方便对照。
|
||||
- 公共能力优先沉淀在 `library/`（全局插件/样式/构建扩展）与 `library/components/`（可视组件）。
|
||||
|
||||
Reference in New Issue
Block a user