Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/agileago/oop-pro
arco-design-pro tsx复刻版本
https://github.com/agileago/oop-pro
Last synced: about 16 hours ago
JSON representation
arco-design-pro tsx复刻版本
- Host: GitHub
- URL: https://github.com/agileago/oop-pro
- Owner: agileago
- Created: 2023-08-25T03:42:13.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-05T08:45:15.000Z (6 months ago)
- Last Synced: 2024-08-05T10:18:07.579Z (6 months ago)
- Language: TypeScript
- Homepage: https://agileago.github.io/oop-pro/
- Size: 9.22 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Arco Design Pro Tsx 复刻版本
## 特点
- 去除国际化，只支持中文
- 使用类组件(vue3-oop)
- 使用 TSX
- 去除pinia, 使用依赖注入(vue3-oop提供)
- 更合理的目录结构
- 更加完善的封装(service)
- 自动化生成请求api代码
- tailwindcss集成
### 工具
建议使用 `webstorm`IDE,并且安装以下插件：
- [中文语言包](https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack----)
- [Visual Studio Code Dark Plus Theme—主题](https://plugins.jetbrains.com/plugin/12255-visual-studio-code-dark-plus-theme)
- [Atom Material Icons—图标](https://plugins.jetbrains.com/plugin/10044-atom-material-icons)
- [Conventional Commit—标准提交信息](https://plugins.jetbrains.com/plugin/13389-conventional-commit)
- [Awesome Console—控制台链接到代码](https://plugins.jetbrains.com/plugin/7677-awesome-console)
- [Rainbow Brackets—彩虹大括号](https://plugins.jetbrains.com/plugin/10080-rainbow-brackets)
### 设置**npm**国内镜像
```shell
npm install -g nrm
nrm use taobao
```
### 安装依赖
```shell
pnpm install
```
### 设置Webstorm
打开IDE设置界面： command⌘ + .
1. 工具 -> 保存时的操作 勾上保存时优化`import`和运行`eslint`
2. 其他设置 -> ConventialCommit -> 基于模板
### 命令
所有命令使用 `pnpm run` 执行
- `dev` : 启动开发
- `build` : 生产构建
- `preview` : 本地构建完成预览
- `type:check` : 类型检查
- `lint` : eslint修复代码
- `format` : prettier代码
- `chrome` : 打开无跨域限制的浏览器
- `api` : swagger生成请求代码，在 `src/api` 下进行配置
### 代码规范
使用`类组件`+`依赖注入`写业务代码 [vue3-oop](https://github.com/agileago/vue3-oop)
### 命名规范
1. 使用小写加 `-` 作为文件命名，比如文件夹 `search-form` 尽量避免文件及文件夹出现大写及汉字情况
2. js命名采用小驼峰 `searchForm`, 类采用大驼峰 `SearchForm`
3. 文件使用后缀标识功能 `home.view.tsx` 表示此文件作为页面，`home.service.ts` 作为服务等等
### 项目配置
1. 配置统一写在 `config` 文件夹下面，区分环境
2. 业务按功能模块区分，在 `module` 文件夹下面，每个 `module` 有自己的路由文件，会被顶级路由服务收集到