perf: improve modal and drawer component documentation and fix known problems (#4264)

* feat: improve modal and drawer component documentation and fix known problems

* chore: update ci
This commit is contained in:
Vben
2024-08-28 22:26:35 +08:00
committed by GitHub
parent 84816ef769
commit 36e7ca19a1
54 changed files with 882 additions and 176 deletions

View File

@@ -72,6 +72,8 @@ pnpm install
### 运行项目
#### 选择项目
执行以下命运行项目:
```bash
@@ -84,12 +86,24 @@ pnpm dev
```bash
◆ Select the app you need to run [dev]:
@vben/web-antd
@vben/web-antd
│ ○ @vben/web-ele
│ ○ @vben/web-naive
│ ○ @vben/docs
@vben/playground
@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
```

View File

@@ -2,27 +2,27 @@
::: info 你正在阅读的是 [Vben Admin](https://github.com/vbenjs/vue-vben-admin) `5.0`版本的文档!
- Vben Admin 2.x 目前已存档,只修复一些严重的问题
- Vben Admin 2.x 目前已存档,仅进行重大问题修复
- 新版本与旧版本不兼容如果你使用的是旧版本v2、v3请查看 [Vue Vben Admin 2.x 文档](https://doc.vvbin.cn)
- 如发现文档有误,欢迎提Issue 帮助我们改进。
- 如果你只是想体验一下,你可以查看 [快速开始](./quick-start.md)。
- 如发现文档有误,欢迎提交 [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` 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。
[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``Vuetify` 等主流 UI 库,不再限制于特定框架。
- **多UI库支持**:支持 `Ant Design Vue``Element Plus``Naive` 等主流 UI 库,不再限制于特定框架。
## 浏览器支持
@@ -32,17 +32,15 @@
| [<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 |
| :-: | :-: | :-: | :-: | :-: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
| 不支持 | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 贡献
- [Vben Admin](https://github.com/vbenjs/vue-vben-admin) 还在持续更新中,本项目欢迎您的参与,共同维护,逐步完善,打造更好的中后台解决方案。
- 如果你想加入我们,可以提供一些好的建议或者提交 pr,我们会根据你的活跃度邀请你加入。
- 如果你想加入我们,可以提供有价值的建议或者参与讨论,协助解决 issue- 如果你想加入我们,可以提供有价值的建议或者参与讨论,协助解决 issue,我们会根据你的活跃度邀请你加入。
::: info 加入我们
如果你想加入我们,你可以从以下几个方面开始,我们会根据你的活跃度邀请你加入:
- 长期提交 `PR`
- 提供一些好的建议。
- 参与讨论,帮助解决一些 `issue`

View File

@@ -1,9 +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 等现代前端技术制定,旨在提供一个简洁、易用的框架,使开发者能够快速上手并专注于业务逻辑的开发。