Vue3 Admin Template 👋

简介

参考 vue-vben-admin，使用了最新的 Vue3 + Vite2 + Element-plus 等主流技术搭建的简易版后台模板。

特性

• 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发
• TypeScript: 应用程序级 JavaScript 的语言
• Mock 数据 内置 Mock 数据方案

目录结构

以下是系统的目录结构

├── mock                 // mock 数据
├── .husky               // 提交配置
├── .vscode              // VS Code 配置文件
├── build
│   ├── vite             // vite 配置
|   └── constant         // 系统常量
├── src
│    ├── api             // api 请求
│    ├── assets          // 静态文件
│    ├── components      // 业务通用组件
│    ├── directives      // 指令
│    ├── hooks           // hooks
│    ├── layout          // 整体布局
│    ├── router          // 路由文件
│    ├── store           // 状态管理
│    ├── styles          // 样式
│    ├── utils           // 工具类
│    ├── App.vue         // vue 模板入口
│    ├── main.ts         // 主文件
│    ├── views           // 业务页面
├── types                // 类型定义
├── windicss.config.ts   // windicss 全局配置
├── tsconfig.json        // ts 配置
└── vite.config.ts       // vite 全局配置

准备

• Node 和 Git — 项目开发环境
• Vite — 熟悉 Vite 特性
• Vue3 — 熟悉 Vue 基础语法
• TypeScript — 熟悉 TypeScript 基本语法
• ES6+ — 熟悉 ES6 基本语法
• Vue Router — 熟悉 vue-router 基本使用
• Element-Plus — UI 基本使用
• Mock.js — mockjs 基本语法

安装使用

• 获取项目代码

git clone git@github.com:lio-zero/vue3-admin-template.git

• 安装依赖

cd vue3-admin-template

pnpm install

• 运行

pnpm serve

• 打包

pnpm build

项目地址

vue3-admin-template

Author

👤 lio

• Github: @lio-zero

如何贡献

非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request。

Pull Request:

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

Git 贡献提交规范

参考 vue 规范 (Angular)

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

支持

如果这个项目对您有帮助，请给一个 Star ⭐️ 支持以下!

📝 License

Copyright © 2022 lio-zero.
This project is MIT licensed.