## template-admin-ts

基于 Ant Design Vue 的中后台管理模板

- vite 4.x
- vue 3.x
- vue-router 4.x
- pinia
- vueuse
- axios
- dayjs
- lodash
- ant-design-vue
- scss
- eslint + prettier

### 项目启动

```shell
# 新开仓库
git init
# 未安装 pnpm
npm add -g pnpm
# 项目运行
pnpm i
pnpm dev
```

### 项目部署

- 本地预览

```shell
# 打包
pnpm build --mode preview
# 本地运行
pnpm preview
```

- 预发布/测试环境

```shell
pnpm build --mode staging
```

- 生产环境

```shell
pnpm build --mode production
```

### git 提交规范

项目未安装依赖限制 `git commit`, 但需在**代码评审**阶段检查

##### 示例：

```git
✨ feat: 新功能
```

```git
🐛 fix: 修复bug
```

更多功能：[提交规范](https://www.conventionalcommits.org/zh-hans/v1.0.0/)，[`gitmoji`](https://gitmoji.dev/)

##### 插件安装

- `vscode`

  - Commit Message Editor
  - Gitmoji

- `webstorm`

  - Git Commit Template
  - Gitmoji Plus: Commit Button

### `vite` 插件

#### `unocss`

- [配置](https://github.com/unocss/unocss)
- [文档](https://uno.antfu.me/)

示例：

```html
<div class="ml-2 px-2 text-2"></div>
```

#### 自动导入 `api`

- [配置](https://github.com/antfu/unplugin-auto-import)

已安装 `vue`, `vue-router`, `pinia`, `@vueuse/core`, `dayjs`, `lodash-es`

> `lodash-es` 为部分安装；若需更多功能函数，可新增在 `['cloneDeep']`， 以数组形式。

示例：

```vue
<script setup lang="ts">
const route = useRoute();

const year = ref<string | number>('2023');
year.value = 2023;

const str: string = join(['a', 'b', 'c'], '~');
</script>
```

#### 自动导入组件

##### `src/components` 目录下的组件

| 模式             | 描述                  |
| ---------------- | --------------------- |
| `Comp.vue`       | -                     |
| `Comp/Index.vue` | -                     |
| `Comp/Comp.vue`  | -                     |
| `Comp/Index.js`  | 支持默认导出\命名导出 |

> 默认导出： `Comp.vue`, `Comp/Index.vue`, `Comp/Comp.vue`, `Comp/Index.js`

```vue
<template>
  <eo-comp />
</template>
```

> 命名导出： `Comp/Index.js`

```js
// Comp/index.js
export { CompA, CompB, CompC };
```

```vue
<template>
  <eos-comp-a />
  <eos-comp-b />
  <eos-comp-c />
</template>
```

##### `src/views/**/components` 业务组件

页面内的业务组件直接使用

`src/views/pageA/components/Comp.vue`

```vue
<template>
  <comp />
</template>
```

##### `src/components/_base` 基础组件

> 需在 `index.ts` 中命名导出

```ts
export { default as Comp } from './comp/index.vue';
```

```vue
<template>
  <base-comp />
</template>
```

#### 自动导入 `svg` 图标

- `src/assets/icon.svg`
- `src/assets/iconA.svg`

```vue
<template>
  <i-icon />
  <i-icon-a />
</template>
```