# Vue3ElementPlusAdminTS

**Repository Path**: hexiangss/vue3-element-plus-admin-ts

## Basic Information

- **Project Name**: Vue3ElementPlusAdminTS
- **Description**: vue3的element-plus 的ts版管理后端，只包含基础的登录，路由,tag，动态菜单等功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-04-11
- **Last Updated**: 2024-10-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 后台管理项目说明
### 分支说明
--master 包含一部分初始的功能后端管理，包含动态路由，导航组件、tag 组件等
--pure 相对纯净版 可支持前台的制作 ，包含icon组件/element-plus/基础的指令/请求封装/路由封装等等
--pure-plus 更纯
--complete 组件版，里面包含了 封装的很多组件和hooks

#### 本地启动

`bash
 npm run dev
`

#### 测试环境打包

`bash
 npm run build:test
`

#### 正式环境打包

`bash
 npm run build
`

#### icon

icon 请到链接处搜索名字即可
链接[https://icon-sets.iconify.design/iconamoon/]

`bash
// svg
   <svg-icon  :size="22" icon="svg:develop" />
 // icon
   <svg-icon  :size="22" icon="svg:develop" />  
`

#### vscode 快速编写

> v3init --- 快速 table 模板生成  
> v3form --- 快速表单模板生成  
> v3view --- 快速弹窗模块生成

### scss 规范

> $namespace ui组件前缀    
> $appNamespace 项目前缀  
> 全部采用 【.#{$appNamespace}-模块名】 进行命名  
> 请勿使用常用短语进行全局 class 编写 如 name，size 等，需要采用二级 如 .className .name {}

```ts
// script ts
import { useDesign } from "@/hooks/useDesign";
const { getPrefixClass } = useDesign();
const prefixClass = getPrefixClass("模块名");
```

```scss
// scss
$prefix: #{$appNamespace}-模块名;
.#{$prefix} {
  &--结构名 {
  }
}
```

### 路由的编写

具体查看 mock/DynamicMenuGenerate/Generate.ts
会自动根据 menu.txt 生成动态路由 和 json 文档用于返给后端
生成规范一行一条 name|path|component|redirect

> 加 \- 代表 二级
> name 页面名称  
> path 路由路径与 name （name 会自动大写开头）  
> component #代表 layout 其他请填 views 相对路径  
> redirect 跳转地址 没有不填

name|path|#(代表顶级路由 layout,否则填 view 相对路径)|home/index

若不采用动态生成路由，则新建于 @/router/modules/ 下文件都将被导入路由

### 组件命名

> ◎ 组件的目录命名和文件命名保持一致，并采用大驼峰命名，保障 vue 自动提取的 name 和路由保持一致

### ts 规范

> ◎ ts 命名采用大驼峰命名，防止 @types 文件夹内，以 项目名.d.ts 命名  
> ◎ 接口返回定义可采用 IResponse -> data / IResponseList -> list 进行返回

### hook 规范

> 采用小驼峰命名 useName

### pinia 规范

src  
└──  
└────── stores  
└────────── modules  
├──────────── index.js # (可选) 初始化 Pinia，不必导入 store  
├──────────── module1.js # 'module1' 模块名

> 组件命名一般采用 useModuleStore # 'Module' 模块名

### utils

公用方法文件夹，命名采用功能块小驼峰命名

### icon 图标

放置 svg 文件于 @/icons/svg 内 ，请不要使用中文  
使用方法  
name 为放置于 icon/svg 内名称

```
     <svg-icon
          :name="name"
        ></svg-icon>
```

### 数据字典

2 种方案 建议采用 hooks 会有 ts 提示, 字典存于 pinia,亦可使用 pinia 调用，无 ts 提示

```ts
import { useDict } from "@/hooks/useDict";
const { getDictList } = useDict();
const dictObj = getDictList(["alert_category"]);
console.log(dictObj.alert_category);
// 字典值回显
import { filterOptionDict } from "@/utils/filters";
{
  {
    filterOptionDict(row.conditionCode, dictObj.alert_category);
  }
}
```

### 关于文件上传/获取

文件上传采用 hooks 封装
多文件有并发任务限制方法，无需页面添加 input，直接调用触发方法即可

```ts
import { useFileUpload } from "@/hooks/useFileUpload";

// 批量获取 文件信息 文件的id 可传  string| string[]
const { getFileInfo } = useFileUpload();

// 多文件上传
const {
  handleBatchFile, // 触发选择事件
  batchFile, // 选择的文件 [{File[],name:string} // 会有进度显示
  initFile, // 文件列表回显 传入文件列表即可
  handleCloseFile, // 删除
  walkRequest, // 并发任务  walkRequest(list,size)
} = useFileUpload();
// 图片上传 回调为 Promise<File>
const { handleUploadImg } = useFileUpload();
// 头像上传 回调为 直接回调为上传后的图片 信息，会自动获取图片大小（实际尺寸），略缩图大小200
const { postUploadAvatar } = useFileUpload();
```