rengar-admin文档

Appearance

项目规范 ​

自动引入 ​

rengar-admin使用了unplugin-auto-import来自动引入vue、vue-router、pinia、naive-ui等常用的库，在开发中无需手动引入（使用 tsx 除外）你可以在build/plugins/import.ts中查看自动引入的库。

当然，在src/components下的组件也会自动引入，无需手动引入。在新建好组件后，需要重启项目才能获得 ts 类型提示。组件名称就是文件夹的名称。假如存在src/components/SvgIcon/index.vue，在.vue中直接使用SvgIcon即可，无需手动引入。

组件命名 ​

组件命名规范为PascalCase，如UserCard、CustomButton等。

全局组件 ​

在src/components的组件应该是全局组件，命名应该遵循PascalCase/index.vue的格式，即目录名遵循PascalCase，.vue文件命名为index.vue，如src/components/UserCard/index.vue。

局部组件 ​

局部组件应该是跟随路由页面放在src/views下，应该始终放在components目录下，采用PascalCase命名，如src/views/user/components/UserCard.vue。

代码规范 ​

rengar-admin使用了eslint来规范代码，使用了prettier来格式化代码在开发中会自动检查代码是否符合规范，在提交代码时会自动检查代码是否符合规范，如果不符合规范会阻止提交。

提交校验 ​

rengar-admin使用了husky来校验代码，在提交代码时会自动校验代码是否符合规范。

如果你不需要在提交的时候校验代码，可以在package.json中删除以下代码：

json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": ["prettier --write", "eslint --fix"] 
  } 
}

再删除根目录的.husky文件夹。然后再卸载依赖：

bash
pnpm remove husky lint-staged  -D

提示

次操作不可逆，谨慎操作！

ts 类型规范 ​

建议把api的类型放在typings/app/api.d.ts中，通过命名空间来区分不同的接口。详细使用请查看代码。

提示

所有的.d.ts文件不能够出现import、export关键字。也就是说类型是静态的，不能动态导入导出，不然就会降级为一个普通的.ts文件了，就不能直接访问类型了。