重庆项目
编辑 | blame | 历史 | 原始文档

Admin 基础框架

简介

该框架旨在帮助开发者方便、规范的进行业务逻辑开发，能够开箱使用。

基于 vue3.3(使用 setup 语法)+ typescript+pinia 状态库+eslint 校验+arco-design 组件库，支持深色模式、国际化、自定义主题色。

基于当前框架，作为开发者只需要关心以下目录：

src/assets： 存放图片资源

src/config/api： 接口请求存放

src/config/pinia： pinia 状态机存放，每个文件代表一个模块

src/config/router： 路由配置存放，会自动引入多个路由文件

src/views： 视图开发目录

Node 版本

node v14+

命令

npm ci				依赖安装
npm run start 		开发环境
npm run build:test	测试环境
npm run build:prod	生产环境
npm run svgo		svg图片处理
npm run lint:error	仅检查error级别错误
npm run lint --fix	eslint检查

开发规范

常用命名

  • 大驼峰： BaseButton
  • 小驼峰： baseButton
  • 中划线： base-button
  • 下划线： base_button
  • 常量： BASE_BUTTON,BASEBUTTON

全局规范

文件夹命名：**中划线**

路由和文件夹命名

路由命名需要简短，并能准确定位到对应的视图目录中。

  • 路由 path： /order/list

  • 路由 name： order-list

  • 路由对应文件夹： /views/order/list

组件命名

组件 name 全部以大坨峰命名，组件引入全部以大坨峰引入，组件在 template 模板中使用全部以中划线引入。

src\resources\components 和 src\views\components 下的组件可以直接使用，无需手动引入。

<template>
    <base-list>xxx</base-list>
</template>

  • 基础组件(可脱离当前项目使用)： 放置在 src\resources\components 目录下，以 base-xxx 命名，同时需要补充 README 文件，描述组件内容、参数、文档。

  • 全局业务组件： 放置在 src\views\components 目录下，以 the-xxx 命名。

  • 模块组件： 在对应 views 模块下，建立 components 目录存放，目录命名规格：中划线。

API 接口

接口请求全部放在 src\config\apis 目录下，按照模块增加对应的接口文件。

接口请求需要严格定义**入参格式**和**返回格式**，入参在**3**个以内的，可以拼接的方式，**超过 3 个**，请以对象的方式接收参数。

接口入参和返回值禁止使用 any。

接口请求需要严格添加注释，描述当前接口作用，以及对应的 yapi 路径。

/**
 * 获取代理商资料填写字段
 * http://yapi.cn/project/631/interface/api/25882
 * @param brandId 品牌ID
 * @param inviteCode 邀请码
 * @returns
 */
export function getAgentDataField(brandId: string, id: string): Promise<_AgentDataField> {
    return request({
        url: `/agent_factor/invite/${brandId}/getFormConfig`,
        params: {
            id
        }
    });
}

git 提交规范

  • feat (新特性\新功能增加)
  • fix (bug 修复)
  • docs (文档)
  • style (代码格式化的修改, 比如加分号\空格等)
  • refactor (重构老的代码)
  • test (测试相关代码)
  • perf (性能、代码、样式、用户体验等方面的优化)
  • build (影响构建系统或外部依赖项的更改,例如 webpack\package.json 相关的修改)
  • temp (临时的代码暂存性提交,尽量少,功能未完成前尽量不要提交)
  • revert (回滚某次提交)

目录结构


配置：
│  .editorconfig	                    #编辑器格式配置
│  .env.development	                    #开发环境配置
│  .env.production	                    #生产环境配置
│  .env.test		                    #测试环境配置
│  .eslintrc.js		                    #eslint配置
│  .gitignore		                    #git忽略文件
│  .prettierrc		                    #prettier配置
│  babel.config.js	                    #babel配置
│  package.json		                    #依赖文件
│  postcss.config.js	                #postcss配置
│  README.md		                    #说明文件
│  tsconfig.json	                    #ts配置
│  vite.config.ts	                    #vite配置文件
│  index.html	                   		#入口页
├─.vscode
│     settings.json		                #vscode项目配置
├─src
│  │  app.vue
│  │  main.ts
│  │  shims-tsx.d.ts
│  │  shims-vue.d.ts
│  ├─assets			                    #静态资源目录
│  │  ├─images		                    #图片静态资源
│  │  └─svg			                    #用于icon的svg图片
│  ├─config			                    #配置目录
│  │  │  dictonary.ts	                #字典配置
│  │  │  enum.ts		                #枚举配置
│  │  │  oss.ts			                #oss配置
│  │  │  svgo.js		                #svg配置
│  │  ├─apis		                    #接口请求文件夹
│  │  ├─router		                    #路由配置文件夹
│  │  └─pinia		                    #pinia状态机文件
│  │  └─vite		                    #vite插件文件夹
│  ├─hooks			                    #自定义hooks文件夹
│  ├─layout			                    #布局公共文件夹
│  ├─locales			                #国际化文件夹
│  ├─packages
│  │  ├─request		                    #请求库配置
│  │  ├─vue-router	                    #路由核心配置
│  │  └─init		                    #初始化文件
│  ├─resources		                    #核心资源文件夹
│  │  ├─components		                #基础组件库（可脱离业务使用），基于base开头，非基础组件请勿存放在该目录下
│  │  │  ├─base-chart		            #echarts图表控件
│  │  ├─directive	                    #自定义指令文件夹
│  │  │  └─copy				            #复制
│  │  │  └─permission				    #权限指令
│  ├─styles		                        #样式文件夹
│  │  │  index.scss			            #全局基础样式
│  │  └─utils			                #样式工具
│  ├─utils		                        #公共方法文件夹
│  │  ├─helper	                        #帮助工具
│  │  │  ├─date		                    #日期处理
│  │  │  ├─type		                    #类型判断
│  │  │  ├─ua		                    #ua判断
│  │  │  ├─validator	                #验证器
│  │  │  ├─env		                	#开发、生产、测试环境判断
│  │  │  └─float	                	#浮点运算
│  │  └─tools		                    #工具库
│  │      ├─back		                #路由返回
│  │      ├─canvas		                #画图工具
│  │      ├─copy		                #复制
│  │      ├─cookie		                #cookie工具
│  │      ├─get-realpx	                #px根据屏幕自适应
│  │      ├─nanoid	                	#唯一ID获取
│  │      ├─qs	                		#qs相关处理，链接参数获取
│  │      ├─retry		                #promise重试
│  │      ├─session		                #session处理
│  │      ├─sleep		                #睡眠
│  │      ├─storage		                #storage处理
│  │      ├─theme		                #主题设置
│  └─views	                            #视图文件夹
└─types	                                #类型定义文件夹