Arco Design Pro Tsx 复刻版本

特点

• 去除国际化，只支持中文
• 使用类组件(vue3-oop)
• 使用 TSX
• 去除pinia, 使用依赖注入(vue3-oop提供)
• 更合理的目录结构
• 更加完善的封装(service)
• 自动化生成请求api代码
• tailwindcss集成

工具

建议使用 webstormIDE,并且安装以下插件：

• 中文语言包
• Visual Studio Code Dark Plus Theme—主题
• Atom Material Icons—图标
• Conventional Commit—标准提交信息
• Awesome Console—控制台链接到代码
• Rainbow Brackets—彩虹大括号

设置npm国内镜像

npm install -g nrm
nrm use taobao

安装依赖

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

命名规范

1. 使用小写加 - 作为文件命名，比如文件夹 search-form 尽量避免文件及文件夹出现大写及汉字情况
2. js命名采用小驼峰 searchForm, 类采用大驼峰 SearchForm
3. 文件使用后缀标识功能 home.view.tsx 表示此文件作为页面，home.service.ts 作为服务等等

项目配置

1. 配置统一写在 config 文件夹下面，区分环境
2. 业务按功能模块区分，在 module 文件夹下面，每个 module 有自己的路由文件，会被顶级路由服务收集到