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

项目启动

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

项目部署

• 本地预览

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

• 预发布/测试环境

pnpm build --mode staging

• 生产环境

pnpm build --mode production

git 提交规范

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

示例：

✨ feat: 新功能

🐛 fix: 修复bug

更多功能：提交规范，gitmoji

插件安装

• vscode

  • Commit Message Editor
  • Gitmoji

• webstorm

  • Git Commit Template
  • Gitmoji Plus: Commit Button

vite 插件

unocss

• 配置
• 文档

示例：

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

自动导入 api

• 配置

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

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

示例：

<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

<template>
  <eo-comp />
</template>

命名导出： Comp/Index.js

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

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

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

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

src/views/pageA/components/Comp.vue

<template>
  <comp />
</template>

src/components/_base 基础组件

需在 index.ts 中命名导出

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

<template>
  <base-comp />
</template>

自动导入 svg 图标

• src/assets/icon.svg
• src/assets/iconA.svg

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