# hs-vue3-framework

**Repository Path**: hs-xhl/hs-vue3-framework

## Basic Information

- **Project Name**: hs-vue3-framework
- **Description**: 🚀Vue3 + Vite + Typescript + Element Plus，配置型开发框架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://117.72.197.198/hs/vue3-framework
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-09-09
- **Last Updated**: 2025-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
<img src="https://gitee.com/hs-xhl/test-docs/raw/master/images/logo.png" align="center" width="150" height="150"/>
</div>

<p align="center">
    <a href="./LICENSE">
        <img src="https://img.shields.io/github/license/XiahlHS/hs-vue3-framework" alt="MIT License" />
    </a>
    <a href="https://v3.cn.vuejs.org/">
        <img src="https://img.shields.io/badge/vue.js-3.0-green" alt="Vue3.0">
    </a>
    <a href="http://xiahl.top/">
        <img src="https://img.shields.io/badge/🚀-open--in--browser-blueviolet" alt="Live Demo">
    </a>
</p>
<h1 align = "center">HS Vue3 Framework</h1>

## 简介：

HS Vue3 Framework，是基于HS Vue3系列中最成熟和完善的中后台框架，全面的系统配置，优质模板，常用组件，真正一站式开箱即用 采用时下最流行的 Vue3 UI 库--Element Plus

使用了当今最流行的技术框架： `Vue3 + Vite + Typescript + Element Plus`

## 特性：

- 简化开发
  - 通过配置环境，I18n, 路由等，就能启动应用，只需专注于业务开发
- 预设样式
  - 样式美观大方，无缝对接 Element Plus，随意组合页面，随心所欲
- 布局方案
  - 丰富的布局模式，具有高可配性，满足您的各类布局需求
- 主题配置
  - 丰富的主题配置及黑暗主题适配
- 技术支持
  - TODO

## 项目地址：

- [🎉 Gitee地址](https://gitee.com/hs-xhl/hs-vue3-framework)

- [🎉 GitHub地址](https://github.com/XiahlHS/hs-vue3-framework)

- [🎉 GitLab地址](https://gitlab.com/HanSummer/hs-vue3-framework)

## 文档演示地址：

- [🎉 文档地址]()  TODO

- [🎉 演示地址（Vue3.x + Typescript + Vite + ElementPlus)](http://xiahl.top)

## 其它演示地址

- [🎉 Vue Pdf 演示地址（Vue3.x + Typescript + Vite + Pdfjs）](http://xiahl.top/#/doc/pdf)

- [🎉 Vue Ofd 演示地址（Vue3.x + Typescript + Vite + jszip + jsrsasign）](http://xiahl.top/#/doc/pdf)

## 现在微信技术交流群需要添加好友之后邀请，如需要入群讨论请关注微信公众号添加好友。

TODO

## 请关注我们的微信公众号

TODO

## 适合人群

- 正在以及想使用 vue/element-plus 开发，最好是有一定的编程知识，或者原来只从事切图写静态页的人想提高自己的前端能力。
- 熟悉 Vue.js 技术栈，使用它开发过几个实际项目。
- 对原理技术感兴趣，想进阶和提升的同学。

## 下载&安装

- 下载

  ```bash
  git clone https://gitee.com/hs-xhl/hs-vue3-framework.git
  ```

- 进入项目目录
  ```bash
  cd hs-vue3-framework
  ```
- 安装依赖

  ```bash
  npm install
  ```

- 运行
  ```bash
  npm start
  ```

- 打包发布
  ```bash
  npm run build
  ```

## 如何贡献

非常欢迎你的加入！[提一个 Issue](https://github.com/XiahlHS/hs-vue3-framework/issues/new) 或者提交一个 Pull Request。

**Pull Request:**

1. Fork 代码!
2. 创建自己的分支: `git checkout -b feat/xxxx`
3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
4. 推送您的分支: `git push origin feat/xxxx`
5. 提交`pull request`

## Git 贡献提交规范

- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))

  - `feat` 增加新功能
  - `fix` 修复问题/BUG
  - `style` 代码风格相关无影响运行结果的
  - `perf` 优化/性能提升
  - `refactor` 重构
  - `revert` 撤销修改
  - `test` 测试相关
  - `docs` 文档/注释
  - `chore` 依赖更新/脚手架配置修改等
  - `workflow` 工作流改进
  - `ci` 持续集成
  - `types` 类型定义文件更改
  - `wip` 开发中

## 浏览器支持

本地开发推荐使用`Chrome 80+` 浏览器

支持现代浏览器, 不支持 IE

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |

## 特别感谢

| **[🚀 vue3.x](https://cn.vuejs.org/)**                     |
| --------------------------------------------------------- |
| **[🚀 element-plus](https://element-plus.org)**            |
| **[🚀 pinia](https://pinia.vuejs.org/)**                   |
| **[🚀 axios](http://www.axios-js.com/)**                   |

## 优势及注意事项

```tex
hs-vue3-framework 有如下优势:
1. 支持前端控制路由权限和后端控制路由模式
2. 支持 CDN， HTTP等环境配置
3. 提供了非常多的 Hook 代码块，方便集成各种功能
4. 内置了大量常用的组件，比如，面包屑，右键菜单， Pdf/Ofd预览， 虚拟列表等
5. 支持多主题、多布局切换
使用注意事项:
1. 项目默认使用使用vscode工具进行开发，也是唯一推荐的开发工具
```

## 效果图
TODO