# vue3项目工程化模板项目

**Repository Path**: wwlaaaa/vue3-vite-element-admin

## Basic Information

- **Project Name**: vue3项目工程化模板项目
- **Description**: 技术栈使用呢vite,vue3,ts,sass,element-plus等，创建的一个后台框架.
项目里面已经做好了工程化配置,,例如eslint，prettier，Husky，lint-staged，commitlint等
也有扩展功能：例如SVG图标，tinymce富文本编辑器，webSocket通信，excel报表的导图导出等
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2022-06-19
- **Last Updated**: 2023-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, vite, Element-UI, husky, commitlint

## README

# vue3项目工程化模板项目

### 介绍
此项目主要是提供基础后台框架，节省项目启动时间，可以直接使用，你只需要关系相关的业务即可，不用再去关心如何处理多人协调开发的各种统一要求，浪费你的宝贵时间。后续会继续增加常用的功能模块示例，可以做为你开发相关功能的模板或提供相关的参考

使用说明：为了避免浪费你宝贵的时间，使用说明如下，

1. 如果是想学习vue3的小伙伴可以在这个基础上做相关的学习练习，这个项目采用的是vite和vue3搭建的框架

2. 如果是想学习前端工程化的小伙伴一定记得好好看里面的配置，在查找相关的文档质料哦
https://www.yuque.com/docs/share/2017707f-6a7e-4d5e-9343-e2184e0050db?# 《前端工程化系列：Prettier+ESLint+Husky+lint-staged+commitlint》这是这个项目工程化的配置文件可以搭配着一起看哦

3. 本项目目前采用的技术有vue3,vite,ts,sass。
####**工程化配置文件：

   (1). eslint和prettier: 项目的代码的校验及格式美化

   (2). Husky: git hooks的一个插件，是项目工程化的基础，可以了解下相关的知识

   (3). lint-staged：暂存文件，可以通过这个让你的配置，例如eslint，perttier等配置只处理暂存区		文件，避免每次都要	处理全部文件，适合多人合作开发，避免不必要的问题

   (4). commitlint：git commit 提交的格式检验，需要满足相关的提交格式，才能正常的提交，适合多	  人合作开发，统一提		交commit信息处理，例如新增内容：git commit -m 'feat: 登录页修改'

4. SVG：项目里面已经集成了SVG的插件，可放心的直接使用svg图标,例如我的菜单路由图标就是可以自定义svg图标

5. tinymce： 前端最常用的富文本编辑器，里面管理图片上传采用的是alioss上传，可以根据公司的阿里云信息，更换配置信息，已测试，更换信息后可以直接使用

6. webSocket：如果想了解socket通信的小伙伴，也可以了解下，项目里面有写好的socket通信的方法，可以直接使用,可以参考我已经写的文档https://www.yuque.com/docs/share/3399d784-1529-4e50-a466-0754cb435898?# 《webSocket在前端的应用（vue）》。

7. excel：里面有集成好的excel报表导出，导入功能。可以直接使用

8. element：采用的是按需自动导入已经，也支持keep-alive，相关信息可以通过代码了解。


### 新增功能示例模块，方便其他开发人员参考
#### 报表系列功能
1. 报表的导入（读取excel报表内容数据）
2. 报表的导出，目前已有示例，一级表头和二级表头的导出，其实三级等，都是类似的，可以继续做扩展，暂时我就不添加三级及其以上的导出，如果后续有问题，在增加相关示例。

#### 图片上传功能
1. 新增阿里云图片及文件上传功能
2. 可以直接使用alioss文件中的图片上传功能，你仅需要更换阿里云配置信息，及更换图片地址（图片保存的域名地址）

#### 图片及文件的批量下载功能
1. 新增图片的批量下载
2. 新增pdf文件的批量下载(其他格式的文件下载需要做相关的代码调整)

#### tree省市选择组件
1. 利用tree的树形结构处理省市的多选。解决一般情况下，做省市多选，回显的时候不好展示已选择的内容。
2.支持全国，单选及多选。返回值做list处理，可以根据实际需求处理数据

#### 小功能
1. 文案的复制功能，例如点击图片复制相关商品信息
2. hooks写法及在项目中的使用。

### 软件架构
技术栈使用呢vite,vue3,ts,sass,element-plus等，创建的一个后台框架.
项目里面已经做好了工程化配置

### 安装教程

1. cd vue3-vite-element-admin
2.  yarn
3.  yarn dev