f

docs/src/guide/introduction/changelog.md

@@ -0,0 +1,3 @@
+# 更新日志
+
+TODO

docs/src/guide/introduction/quick-start.md

@@ -0,0 +1,111 @@
+---
+outline: deep
+---
+
+# 快速开始 {#quick-start}
+
+## 前置准备
+
+::: info 环境要求
+
+在启动项目前，你需要确保你的环境满足以下要求：
+
+- [Node.js](https://nodejs.org/en) 20.15.0 及以上版本，推荐使用 [fnm](https://github.com/Schniz/fnm) 、 [nvm](https://github.com/nvm-sh/nvm) 或者直接使用[pnpm](https://pnpm.io/cli/env) 进行版本管理。
+- [Git](https://git-scm.com/) 任意版本。
+
+验证你的环境是否满足以上要求，你可以通过以下命令查看版本：
+
+```bash
+# 出现相应 node LTS版本即可
+node -v
+# 出现相应 git 版本即可
+git -v
+```
+
+:::
+
+## 启动项目
+
+### 获取源码
+
+::: code-group
+
+```sh [GitHub]
+# clone 代码
+git clone https://github.com/vbenjs/vue-vben-admin.git
+```
+
+```sh [Gitee]
+# clone 代码
+# Gitee 的代码可能不是最新的
+git clone https://gitee.com/annsion/vue-vben-admin.git
+```
+
+:::
+
+::: danger 注意
+
+注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。
+
+:::
+
+### 安装依赖
+
+在你的代码目录内打开终端，并执行以下命令:
+
+```bash
+# 进入项目目录
+cd vue-vben-admin
+
+# 使用项目指定的pnpm版本进行依赖安装
+corepack enable
+
+# 安装依赖
+pnpm install
+```
+
+::: tip 注意
+
+- 项目只支持使用 `pnpm` 进行依赖安装，默认会使用 `corepack` 来安装指定版本的 `pnpm`。:
+- 如果你的网络环境无法访问npm源，你可以设置系统的环境变量`COREPACK_NPM_REGISTRY=https://registry.npmmirror.com`，然后再执行`pnpm install`。
+- 如果你不想使用`corepack`，你需要禁用`corepack`，然后使用你自己的`pnpm`进行安装。
+
+:::
+
+### 运行项目
+
+#### 选择项目
+
+执行以下命令运行项目:
+
+```bash
+# 启动项目
+pnpm dev
+```
+
+此时，你会看到类似如下的输出，选择你需要运行的项目：
+
+```bash
+│
+◆  Select the app you need to run [dev]:
+│  ○ @vben/web-antd
+│  ○ @vben/web-ele
+│  ○ @vben/web-naive
+│  ○ @vben/docs
+│  ● @vben/playground
+└
+```
+
+现在，你可以在浏览器访问 `http://localhost:5555` 查看项目。
+
+#### 运行指定项目
+
+如果你不想选择项目，可以直接运行以下命令运行你需要的应用：
+
+```bash
+pnpm run dev:antd
+pnpm run dev:ele
+pnpm run dev:naive
+pnpm run dev:docs
+pnpm run dev:play
+```

docs/src/guide/introduction/roadmap.md

@@ -0,0 +1,3 @@
+# 路线图
+
+TODO:

docs/src/guide/introduction/thin.md

@@ -0,0 +1,94 @@
+---
+outline: deep
+---
+
+# 精简版本
+
+从 `5.0` 版本开始，我们不再提供精简的仓库或者分支。我们的目标是提供一个更加一致的开发体验，同时减少维护成本。在这里，我们将如何介绍自己的项目，如何去精简以及移除不需要的功能。
+
+## 应用精简
+
+首先，确认你需要的 `UI` 组件库版本，然后删除对应的应用，比如你选择使用 `Ant Design Vue`，那么你可以删除其他应用， 只需要删除下面两个文件夹即可：
+
+```bash
+apps/web-ele
+apps/web-naive
+
+```
+
+::: tip
+
+如果项目没有内置你需要的 `UI` 组件库应用，你可以直接全部删除其他应用。然后自行新建应用即可。
+
+:::
+
+## 演示代码精简
+
+如果你不需要演示代码，你可以直接删除的`playground`文件夹。
+
+## 文档精简
+
+如果你不需要文档，你可以直接删除`docs`文件夹。
+
+## Mock 服务精简
+
+如果你不需要`Mock`服务，你可以直接删除`apps/backend-mock`文件夹。同时在你的应用下`.env.development`文件中删除`VITE_NITRO_MOCK`变量。
+
+```bash
+# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
+VITE_NITRO_MOCK=false
+```
+
+## 安装依赖
+
+到这里，你已经完成了精简操作，接下来你可以安装依赖，并启动你的项目：
+
+```bash
+# 根目录下执行
+pnpm install
+
+```
+
+## 命令调整
+
+在精简后，你可能需要根据你的项目调整命令，在根目录下的`package.json`文件中，你可以调整`scripts`字段，移除你不需要的命令。
+
+```json
+{
+  "scripts": {
+    "build:antd": "pnpm run build --filter=@vben/web-antd",
+    "build:docs": "pnpm run build --filter=@vben/docs",
+    "build:ele": "pnpm run build --filter=@vben/web-ele",
+    "build:naive": "pnpm run build --filter=@vben/web-naive",
+    "build:play": "pnpm run build --filter=@vben/playground",
+    "dev:antd": "pnpm -F @vben/web-antd run dev",
+    "dev:docs": "pnpm -F @vben/docs run dev",
+    "dev:ele": "pnpm -F @vben/web-ele run dev",
+    "dev:play": "pnpm -F @vben/playground run dev",
+    "dev:naive": "pnpm -F @vben/web-naive run dev"
+  }
+}
+```
+
+## 其他
+
+如果你想更进一步精简，你可以删除参考以下文件或者文件夹的作用，判断自己是否需要，不需要删除即可：
+
+- `.changeset` 文件夹用于管理版本变更
+- `.github` 文件夹用于存放 GitHub 的配置文件
+- `.vscode` 文件夹用于存放 VSCode 的配置文件，如果你使用其他编辑器，可以删除
+- `./scripts/deploy` 文件夹用于存放部署脚本，如果你不需要docker部署，可以删除
+
+## 应用精简
+
+当你确定了某个应用，你还可以进一步精简：
+
+### 删除不需要的路由及页面
+
+- 在应用的 `src/router/routes` 文件中，你可以删除不需要的路由。其中 `core` 文件夹内，如果只需要登录和忘记密码，你可以删除其他路由，如忘记密码、注册等。路由删除后，你可以删除对应的页面文件，在 `src/views/_core` 文件夹中。
+
+- 在应用的 `src/router/routes` 文件中，你可以按需求删除不需要的路由，如`demos`、`vben` 目录等。路由删除后，你可以删除对应的页面文件，在 `src/views` 文件夹中。
+
+### 删除不需要的组件
+
+- 在应用的 `packages/effects/common-ui/src/ui` 文件夹中，你可以删除不需要的组件，如`about`、`dashboard` 目录等。删除之前请先确保你的路由中没有引用到这些组件。

docs/src/guide/introduction/vben.md

@@ -0,0 +1,49 @@
+# 关于 Vben Admin
+
+::: info 你正在阅读的是 [Vben Admin](https://github.com/vbenjs/vue-vben-admin) `5.0`版本的文档！
+
+- Vben Admin 2.x 目前已存档，仅进行重大问题修复。
+- 新版本与旧版本不兼容，如果你使用的是旧版本（v2、v3），请查看 [Vue Vben Admin 2.x 文档](https://doc.vvbin.cn)
+- 如发现文档有误，欢迎提交 [issue](https://github.com/vbenjs/vue-vben-admin/issues) 帮助我们改进。
+- 如果你只是想体验一下，你可以查看[快速开始](./quick-start.md)。
+
+:::
+
+[Vben Admin](https://github.com/vbenjs/vue-vben-admin) 是一个基于 [Vue3.0](https://github.com/vuejs/core)、[Vite](https://github.com/vitejs/vite)、 [TypeScript](https://www.typescriptlang.org/) 的中后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模板，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 `vue3`、`vite`、`ts` 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
+
+## 特点
+
+- **最新技术栈**：使用 `Vue3`、`Vite`、`TypeScript` 等前端前沿技术开发。
+- **国际化**：内置完善的国际化方案，支持多语言切换。
+- **权限验证**：完善的权限验证方案，按钮级别权限控制。
+- **多主题**：内置多种主题配置和黑暗模式，满足个性化需求。
+- **动态菜单**：支持动态菜单，可以根据权限配置显示菜单。
+- **Mock 数据**：基于 `Nitro` 的本地高性能 Mock 数据方案。
+- **组件丰富**：提供了丰富的组件，可以满足大部分的业务需求。
+- **规范**：代码规范，使用 `ESLint`、`Prettier`、`Stylelint`、`Publint`、`CSpell` 等工具保证代码质量。
+- **工程化**：使用 `Pnpm Monorepo`、`TurboRepo`、`Changeset` 等工具，提高开发效率。
+- **多UI库支持**：支持 `Ant Design Vue`、`Element Plus`、`Naive` 等主流 UI 库，不再限制于特定框架。
+
+## 浏览器支持
+
+- **本地开发**推荐使用`Chrome 最新版`浏览器，**不支持**`Chrome 80`以下版本。
+
+- **生产环境**支持现代浏览器，不支持 IE。
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt="IE" width="24px" height="24px"  />](http://godban.github.io/browsers-support-badges/)IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)Safari |
+| :-: | :-: | :-: | :-: | :-: |
+| 不支持 | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 贡献
+
+- [Vben Admin](https://github.com/vbenjs/vue-vben-admin) 还在持续更新中，本项目欢迎您的参与，共同维护，逐步完善，打造更好的中后台解决方案。
+- 如果你有兴趣加入我们，可以通过以下方式开始，我们会根据你的活跃度邀请你加入。
+
+::: info 加入我们
+
+- 长期提交 `PR`。
+- 提供有价值的建议。
+- 参与讨论，帮助解决 `issue`。
+- 共同维护文档。
+
+:::

docs/src/guide/introduction/why.md

@@ -0,0 +1,23 @@
+# 为什么选择我们?
+
+::: info 写在前面
+
+我们不会去和其他框架做比较。我们认为每个框架都有自己的特点，适合不同的场景。我们的目标是提供一个简单、易用的框架，让开发者可以快速上手，专注于业务逻辑的开发。所以我们只会不断完善和优化我们的框架，提供更好的体验。
+
+:::
+
+我们致力于为开发者提供一个高效、现代、易用的前端框架。我们的解决方案基于最新的技术栈，如 Vue3、Vite 和 TypeScript，确保您在构建项目时始终走在技术的前沿。同时，我们注重代码的质量与规范，通过严格的工具链保证代码的一致性和可维护性。无论是初创项目还是企业级应用，我们的框架都能帮助您快速构建、迭代和部署。
+
+## 框架历程
+
+从 Vue Vben Admin 1.x 版本开始，框架经历了许多迭代和优化。从一开始使用 `Vite 0.x` 版本，没有现成的插件，开发了很多自定义插件来弥合 Webpack 和 Vite 之间的差异。虽然很多现在已经被代替，但是我们的初衷一直没有变，就是提供一个简单、易用的框架。
+
+虽然中间有段时间由社区维护，但我们一直密切关注 Vue Vben Admin 的发展。见证了许多开发者使用 Vben Admin，并提供了许多宝贵的建议和反馈。非常感谢大家的支持和贡献，这些都是我们持续改进 Vben Admin 的动力。新版本中，我们持续收集用户反馈，重新开始，不断优化框架，以提供更好的用户体验。我们的目标是让开发者能够快速上手，专注于业务逻辑的开发。
+
+## 单元测试
+
+单元测试是确保代码质量的基石。在开发过程中编写和执行单元测试，以捕捉潜在的错误并提升代码的可靠性。框架核心逻辑使用 `vitest` 做了单元测试，并在逐步增加覆盖率。通过单元测试，可以放心地进行代码重构，减少回归问题，从而提高整体开发效率。
+
+## 质量与规范
+
+我们始终高度重视代码的质量与规范。通过使用 ESLint、Prettier、Stylelint、Publint、CSpell 等工具来确保代码质量。我们的代码规范基于 Vue3、Vite、TypeScript 等现代前端技术制定，旨在提供一个简洁、易用的框架，使开发者能够快速上手并专注于业务逻辑的开发。