# vite-vue3-admin

**Repository Path**: flychen/vite-vue3-admin

## Basic Information

- **Project Name**: vite-vue3-admin
- **Description**: 利用vite + vue3开发一个中后台管理系统，系统将会简单封装一些常用组件。保证组件的已阅读、易扩展
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2022-12-26
- **Last Updated**: 2022-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + TypeScript + Vite 中后台管理系统

## 项目背景

<font color=yellow size=3>一个早点摸鱼、早点下班的项目</font>

<font color=LightSeaGreen size=6>一切都是 hook</font>

自从 vue hook 的出现，我一直就在思考，我是不是可以把页面操作逻辑（js）和对应组件模板（vue 组件）整合到一个 hook 中，然后 hook 导出响应组件进行使用，这样的 hook 不再只是一个 js 业务操作的封装，而是 js 业务 + vue 组件整合，这很方便我们复用,我仅仅传几个参数，几十行的代码，完成比较复杂的业务操作功能。例如：

```html
<script setup lang="ts">
  const {
    FormModal,
    openModal
  } = useFormModal({ schemas: [...] })
</script>
<template>
  <button @click="openModal">添加</button>
  <!-- 使用组件 -->
  <FormModal />
</template>
```

以上是项目中的一个案例。你会发现，写了几十行的代码，就完成了一个繁杂的添加数据的模态框表单操作，这简直就是凡尔赛，代码不仅简化了许多，阅读起来也不会喷队友了。

在引用这个项目之前，你也许使用过其它的项目，大部分的项目都有一个通病：

1. 项目目录结构复杂，目录文件之间引用混乱，完全脱离 vue 3 的思想(composite api),不易阅读。

2. 项目功能过多，往往需要大量删除不需要的文件。
3. 组件过度封装，很难满足业务的需求，由于封装太杂，更是出现难以修改的情况。
4. 各种复杂的配置。
5. 最重要的一点，你会感觉你的规范被人家限定了，有些东西过分表现作者的技术存储量。

你不妨引用这个项目来当初自己的初始模板。

## 项目功能清单

1. 路由守卫
2. 路由菜单权限的添加
3. form 组件封装
4. table 组件封装
5. modal 组件 + form 组件 封装一个添加、编辑对话框表单的组件
6. 响应式布局
7. 标签栏
8. 面包屑
9. axios 的封装
10. async hook 异步请求封装
11. 跨行表格的处理

## 结语

项目中不会有太多花里胡哨的东西，主要是方便使用者的阅读，项目的初衷就是希望使用的同学能够从中能够学到一些有价值的东西，在组件的设计中获取一些启发。

联系方式：

QQ: 864181495