分类:VUE模板

v3-admin-vitevue3element-uivitetypescript

作者:un-pany 开源协议:MIT


V3 Admin Vite Logo

V3 Admin Vite

English | 中文

⚡ 简介

V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案,基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术

国内仓库:Gitee

📚 文档

📺 在线预览

位置账号链接
github-pagesadmin 或 editor链接

❤️ 用爱发电

  • 完全免费:但希望你点一个 star !!!
  • 非常简洁:没有复杂的封装,没有复杂的类型体操,开箱即用
  • 详细的注释:各个配置项都写有尽可能详细的注释
  • 最新的依赖: 定期更新所有三方依赖至最新版
  • 有一点规整: 代码风格统一,命名风格统一,注释风格统一

特性

  • Vue3:采用 Vue3 + script setup 最新的 Vue3 组合式 API
  • Element Plus:Element UI 的 Vue3 版本
  • Pinia: 传说中的 Vuex5
  • Vite:真的很快
  • Vue Router:路由路由
  • TypeScript:JavaScript 语言的超集
  • PNPM:更快速的,节省磁盘空间的包管理工具
  • Scss:和 Element Plus 保持一致
  • CSS 变量:主要控制项目的布局和颜色
  • ESlint:代码校验
  • Prettier:代码格式化
  • Axios:发送网络请求(已封装好)
  • UnoCSS:具有高性能且极具灵活性的即时原子化 CSS 引擎
  • 兼容移动端: 布局兼容移动端页面分辨率

功能

  • 用户管理:登录、登出演示
  • 权限管理:页面级权限(动态路由)、按钮级权限(指令权限、权限函数)、路由守卫
  • 多环境:开发环境(development)、预发布环境(staging)、正式环境(production)
  • 多主题:普通、黑暗、深蓝, 三种主题模式
  • 多布局:左侧、顶部、混合, 三种布局模式
  • 错误页面: 403、404
  • Dashboard:根据不同用户显示不同的 Dashboard 页面
  • 其他内置功能:SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Hook(Composables)

🚀 开发

# 配置1. 一键安装 .vscode 目录中推荐的插件2. node 版本 18.x 或 20+3. pnpm 版本 8.x 或最新版# 克隆项目git clone https://github.com/un-pany/v3-admin-vite.git# 进入项目目录cd v3-admin-vite# 安装依赖pnpm i# 启动服务pnpm dev

✔️ 预览

# 预览预发布环境pnpm preview:stage# 预览正式环境pnpm preview:prod

📦️ 多环境打包

# 构建预发布环境pnpm build:stage# 构建正式环境pnpm build:prod

🔧 代码检查

# 代码格式化pnpm lint# 单元测试pnpm test

Git 提交规范参考

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

项目预览图

preview1.pngpreview2.pngpreview3.png

💕 贡献者

感谢所有的贡献者!

💕 感谢 Star

小项目获取 star 不易,如果你喜欢这个项目的话,欢迎支持一个 star!这是作者持续维护的唯一动力(小声:毕竟是免费的)

☕ Donate

查看捐赠方式

可有可无的群

QQ 群:1014374415(左)&& 加我微信,拉你进微信群(右)

qq.pngwechat.png

📄 License

MIT

Copyright (c) 2022-present pany