# vue3-template

**Repository Path**: purple-cli/vue3-template

## Basic Information

- **Project Name**: vue3-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-17
- **Last Updated**: 2025-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript Template

这是一个 vue3 + ts 的 B 端模板项目。

其中已经预置了 /excemple 路由，包含了几个常见页面，并将模板项目中可能会用到的内容进行了一个示例性质的展示。

技术栈： vue3.x + typescript + vue-router4 + pinia2 + element-plus + axios 

## 使用方式

提供了两种使用方式：
- 配合 ygg-cli 进行使用，全局安装 ygg-cli 之后，通过脚手架一键生成本项目。
- 直接从git仓库进行克隆，fork本项目并进行二次开发。

## 环境

```
node 16 + 并配套 npm 版本即可
建议使用 pnpm 管理依赖 
```

## 常用命令

- pnpm dev 本地开发
- pnpm build 本地打包

## 项目预置

### 全家桶

1. 内置了 vue-router，并配合 layout 进行渲染页面，可以直接基于 router 路径下的内容进行扩展路由。
2. 内置了 pinia 来管理全局状态，并内置了 userinfo 字段的使用方法，可以在此基础上进行扩展。
3. 内置了 一些scss文件的配置方式，包括：全局sass变量的配置与使用，html默认样式的调整，常用class类的内置，iconfont的引入，以及 element-reset 的独立提出，并通过 index.scss 统一调度。

### 开发提效

基于 element-plus 进行了一些简单的二次封装，对一些高频组件进行了简单的封装，并对样式进行了统一调整，包含如下的组件：

1. common-bread：统一的面包屑组件，增加了iconfont作为前置信息，并统一了 padding，在layout中统一调度。
2. common-footer：统一的 footer 组件，一键切换全局的 footer，通过 layout进行统一调度。
3. common-header：统一的 header 头部，包含了常用的 header功能，全屏切换、水印管理、主题切换、个人信息、登入登出等常用功能按钮。
4. common-page-tool：统一的工具条，常用于 表格页面介于 搜索和表格之间的功能按钮区域，用于配置 批量操作按钮和其他特色功能。
5. common-title：统一的 title工具，用于分块页面的块级title，增加了自定义 iconfont，可以实现整站调度。
6. common-chart：基于 echart 进行了一次简单的图表调度工具，核心 chart-card 组件可以通过工具条中的切换按钮，进行图表类型的切换，可以选择不带头部工具条，进行回显图表，并做了自适应容器大小。
7. common-layout：layout 组件，内置了如下几个配置，可以通过传入情况统一调度包含的块级：面包屑、底部、头部、侧边栏、主要部分是否有边距（padding+margin）等等。
```js
{
  hasBread: true,
  hasFooter: true,
  hasAside: true,
  hasHeader: true,
  
  ignoreMainPadding: false,
}
```
8. common-loger：统一的 el-dialog 封装，一方面保证了样式的统一调整，另一方面暴露统一的 api 用于控制弹框的调度。
9. common-menu：统一的 菜单组件，统一样式。
10. common-table：基于 el-table 并结合 component 组件封装的 json 控制的一个表格组件，易扩展，易交互。
11. common-form：基于 el-form 实现的简单表单封装，可以满足常见的表单的需求，并提供了一个表单使用新思路。并且将 saver、seacher、fomer进行了单独封装，实现了功能的内聚，降低上手难度。

### 工具方法

1. http：基于 axios 进行了一次封装，实现了请求头中 token 的携带及返回值的统一预处理。
2. message：基于 el-message 进行了一次封装，统一配置了 duration，showClose 字段，并保证全局使用一个 message 实例，不会出现多层嵌套导致的 message 重叠，同事也内置实现了常见的 删除等二次确认场景的confirm。

### 第三方工具

1. wangEditor 的开箱即用。

## 计划

1. 持续集成，丰富更多的图表类型。
2. 页面工具方法的增加：导出图片、大文件上传、虚拟列表/表格。
3. ...

### git 提交规范

#### 规范

``` shell
git commit -m 'feat(auth): 增加权限中心模块'

# 类别+模块的方式进行头部注释，具体更改则写冒号后面
```

#### 说明
1. build: 影响构建系统或外部依赖项的更改（如 gulpfile.js、webpack.config.js、package.json）。
  使用场景：更新构建工具、添加构建脚本、修改构建配置。

2. chore: 其他不修改源代码或测试文件的更改（如重构代码、更新文档、更改构建流程、依赖管理等）。
  使用场景：更新依赖项、设置配置文件、清理旧文件。

3. ci: 持续集成配置文件和脚本的更改（如 .travis.yml、circle.yml）。
  使用场景：添加或修改 CI/CD 配置、优化测试流程。

4. docs: 文档更改（如 markdown 文件、文档生成器配置）。
  使用场景：更新或添加文档、改善文档结构。

5. feat: 新功能或特性的添加。
  使用场景：实现新功能、添加新特性。

6. fix: 修复 bug。
  使用场景：修复已知的错误、解决导致程序崩溃的问题。

7. perf: 性能改进。
  使用场景：优化代码性能、减少加载时间。

8. refactor: 代码重构，不添加新功能也不修复 bug，只是改善现有代码的结构或可读性。
  使用场景：重写函数以提高可读性、移除冗余代码、改善代码结构。

9. revert: 撤销之前的提交。
  使用场景：回滚到之前的版本、撤销引入问题的提交。

10. style: 不影响代码含义的更改，通常是格式化或样式调整（如空格、缩进、分号等）。
  使用场景：代码格式化、修复代码样式问题。

11. test: 添加或修改测试代码。
  使用场景：添加新的测试用例、修复失败的测试。