重庆项目
编辑 | 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	                                #类型定义文件夹
编辑 | blame | 历史 | 原始文档 
MIT License

Copyright (c) 2021 JrainLau

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.