190 lines
2.9 KiB
Markdown
190 lines
2.9 KiB
Markdown
## template-admin-ts
|
||
|
||
基于 Ant Design Vue 的中后台管理模板
|
||
|
||
- vite 4.x
|
||
- vue 3.x
|
||
- vue-router 4.x
|
||
- pinia
|
||
- vueuse
|
||
- axios
|
||
- dayjs
|
||
- lodash
|
||
- ant-design-vue
|
||
- less
|
||
- 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>
|
||
```
|
||
|
||
### `ui` 框架 [`Ant Design Vue`](https://antdv.com/)
|
||
|
||
- 自动导入组件，无需再次导入
|
||
- 图标库已配置，同组件使用
|