03月092021
admin-element-vue-vite-ts是一个后台前端解决方案,它基于Vite、Vue3.x 、Element Plus 实现
作品阅读3992 标签: 前端
# 介绍 [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)
幻灯片
朦胧
热情
清幽
青翠
花红
清新
黑夜