admin-element-vue-vite-ts是一个后台前端解决方案,它基于Vite、Vue3.x 、Element Plus 实现
# 介绍
[admin-element-vue-vite-ts](http://vitets-demo.admin-element-vue.liqingsong.cc/) 是一个后台前端解决方案,它基于[Vite](https://github.com/vitejs/vite) 、[Vue3.x](https://github.com/vuejs/vue-next) 、[Element Plus](https://github.com/element-plus/element-plus) 实现。它使用了最新的前端技术栈、动态路由、权限验证、国际化、Mock 数据等,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。
## Demo
| **[http://vitets-demo.admin-element-vue.liqingsong.cc](http://vitets-demo.admin-element-vue.liqingsong.cc/)** |
| --- |
| ![Home](https://gitee.com/lqsong/public/raw/master/admin-element-vue-vite-ts/home.png) |
| ![Home](https://gitee.com/lqsong/public/raw/master/admin-element-vue-vite-ts/home2.png) |
## 使用文档
- [http://admin-element-vue.liqingsong.cc/vitets/](http://admin-element-vue.liqingsong.cc/vitets/)
- [Github](https://github.com/lqsong/admin-element-vue/tree/vite.ts)
- [Gitee](https://gitee.com/lqsong/admin-element-vue/tree/vite.ts)
## 后台前端解决方案列表
- admin-element-vue([GitHub](https://github.com/lqsong/admin-element-vue)、[Gitee](https://gitee.com/lqsong/admin-element-vue))
- admin-antd-vue([GitHub](https://github.com/lqsong/admin-antd-vue)、[Gitee](https://gitee.com/lqsong/admin-antd-vue))
- admin-antd-react([GitHub](https://github.com/lqsong/admin-antd-react)、[Gitee](https://gitee.com/lqsong/admin-antd-react))
- electron-admin-element-vue([GitHub](https://github.com/lqsong/electron-admin-element-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-element-vue))
- electron-admin-antd-vue([GitHub](https://github.com/lqsong/electron-admin-antd-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-vue))
- electron-admin-antd-react([GitHub](https://github.com/lqsong/electron-admin-antd-react)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-react))
## 功能
```
- 登录 / 注销 / 注册
- 权限验证
- 页面权限
- 按钮操作
- 权限配置
- 全局功能
- 国际化多语言
- 动态顶级菜单(支持设置是否启用)
- 动态侧边栏(支持多级路由嵌套)
- 动态面包屑(支持自定义配置)
- Svg Sprite 图标
- Mock 数据
- 综合实例
- 引导页
- 组件示例
- 编辑器
- CKEditor
- tui-editor
- 图标
- IconSvg
- IconFont
- 页面示例
- 列表页面
- 表格列表
- 高度自适应表格
- 搜索列表
- 表单页面
- 基础表单
- 高级表单
- 详情页面
- 基础详情
- 模块详情
- 表格详情
- 权限验证
```
## 自定义配置
### **(建议)** 本地或开发模式下,不要直接修改 '.env.development'
复制 '.env.development' 重命名为 ' .env.development.local' , 修改对应的参数.
### **(建议)** 生产模式下,不要直接修改 '.env.production'
复制 '.env.production' 重命名为 ' .env.production.local' , 修改对应的参数.
## 项目设置
### 一、Install dependencies,
```bash
$ yarn
```
or
```
$ npm install
```
> 推荐使用 yarn , **[yarn安装与常用命令](http://liqingsong.cc/article/detail/9)** 。
### 二、Compiles and hot-reloads for development
```bash
$ yarn dev
```
or
```
$ npm run dev
```
### 三、Compiles and minifies for production
```bash
$ yarn build
```
or
```
$ npm run build
```
### 四、本地预览生产构建产物
```bash
$ yarn serve
```
or
```
$ npm run serve
```
### 五、精简 svg icon
```
$ yarn svgo
```
or
```
$ npm run svgo
```
### 六、Run your unit tests
```
yarn test
#
npm run test
```
## 捐赠
如果你觉得这个项目帮助到了你,请帮助点击 Star,你也可以请作者喝咖啡表示鼓励.
**ALIPAY** | **WECHAT**
:-------------------------:|:-------------------------:
![Alipay](http://uploads.liqingsong.cc/20210430/f62d2436-8d92-407d-977f-35f1e4b891fc.png) | ![Wechat](http://uploads.liqingsong.cc/20210430/3e24efa9-8e79-4606-9bd9-8215ce1235ac.png)