first commit

README.md

@@ -0,0 +1,189 @@
+## template-admin-ts
+
+基于 Arco Design Pro 的中后台管理模板
+
+- vite 4.x
+- vue 3.x
+- vue-router 4.x
+- pinia
+- vueuse
+- axios
+- dayjs
+- lodash
+- arco-design
+- 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` 框架 [`ArcoVue`](https://arco.design/vue/docs/start)
+
+- 自动导入组件，无需再次导入
+- 图标库已配置，同组件使用