2022-09-13 11:44:08 +00:00
|
|
|
|
## 简介
|
2022-11-15 15:37:54 +00:00
|
|
|
|
vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由,权限验证,并且有着丰富的组件,企业级中后台解决方案,可免费商用,同时支持PC、平板、手机
|
2023-02-27 09:44:14 +00:00
|
|
|
|
本项目也参考了很多开源的项目、
|
2022-09-18 04:30:17 +00:00
|
|
|
|
### 在线预览
|
2022-12-02 14:22:28 +00:00
|
|
|
|
- gitee国内访问地址:https://yuanzbz.gitee.io/vue-admin-perfect/#/home
|
|
|
|
|
|
- github site : https://zouzhibin.github.io/vue-admin-perfect/
|
|
|
|
|
|
|
2023-02-27 10:54:24 +00:00
|
|
|
|
- 基础功能版本预览:https://yuanzbz.gitee.io/vue-admin-simple
|
|
|
|
|
|
|
2022-12-02 14:22:28 +00:00
|
|
|
|
|
2022-06-10 07:04:07 +00:00
|
|
|
|
|
2022-11-15 15:37:54 +00:00
|
|
|
|
### git仓库(欢迎 Star⭐)
|
2022-09-18 04:30:17 +00:00
|
|
|
|
- Gitee: —— [https://gitee.com/yuanzbz/vue-admin-perfect](https://gitee.com/yuanzbz/vue-admin-perfect)
|
|
|
|
|
|
- GitHub: —— [https://github.com/zouzhibin/vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)
|
2023-03-02 02:52:35 +00:00
|
|
|
|
- 基础功能版本: —— [https://gitee.com/yuanzbz/vue-admin-simple](https://gitee.com/yuanzbz/vue-admin-simple)
|
2023-02-27 10:54:24 +00:00
|
|
|
|
|
2022-08-22 02:00:01 +00:00
|
|
|
|
## 项目功能
|
|
|
|
|
|
- 使用Vue3.0开发,单文件组件采用<script setup>
|
2022-11-15 15:37:54 +00:00
|
|
|
|
- 采用 Vite3 作为项目开发、打包工具(配置了 Gzip 打包、TSX 语法、跨域代理)
|
|
|
|
|
|
- 整个项目集成了 TypeScript
|
2022-08-22 02:00:01 +00:00
|
|
|
|
- 登录逻辑,使用vue-router进行路由权限拦截,判断,路由懒加载
|
|
|
|
|
|
- 使用 keep-alive 对整个页面进行缓存,支持多级嵌套页面
|
2022-11-15 15:37:54 +00:00
|
|
|
|
- 侧边栏导航菜单栏动态的显示
|
2022-08-22 02:00:01 +00:00
|
|
|
|
- 各种可视化地图组件
|
2022-11-15 15:37:54 +00:00
|
|
|
|
- 使用 Pinia替代 Vuex,轻量、简单、易用
|
2022-08-22 02:00:01 +00:00
|
|
|
|
- 导出excel,自定义样式导出excel、多表头导出
|
2022-11-15 15:37:54 +00:00
|
|
|
|
- 表单、表格、水印、多标签显示、打印功能,图片打印、表格打印、普通打印、二维码、拖拽、markdown、头像裁剪、图片上传...
|
2022-08-22 02:00:01 +00:00
|
|
|
|
- 使用 Prettier 统一格式化代码,集成 Eslint、代码校验规范
|
2022-06-10 07:04:07 +00:00
|
|
|
|
|
2022-08-29 13:01:46 +00:00
|
|
|
|
## 安装
|
|
|
|
|
|
```
|
2022-11-15 15:37:54 +00:00
|
|
|
|
# GitHub
|
2022-08-29 13:01:46 +00:00
|
|
|
|
git clone https://github.com/zouzhibin/vue-admin-perfect.git
|
2022-11-15 15:37:54 +00:00
|
|
|
|
# Gitee
|
|
|
|
|
|
git clone https://gitee.com/yuanzbz/vue-admin-perfect.git
|
2022-08-29 13:01:46 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
2022-08-03 10:43:24 +00:00
|
|
|
|
## 分支管理
|
2022-08-31 03:41:57 +00:00
|
|
|
|
- master 技术采用 vite + vue3.0 + Typescript + pinia
|
2022-11-20 11:53:13 +00:00
|
|
|
|
- vue-admin-simple 简易版本
|
2022-08-31 03:41:57 +00:00
|
|
|
|
- vite-vuex vite + vue3.0 + Typescript + vuex
|
2022-08-29 13:01:46 +00:00
|
|
|
|
- vue-i18n 语言切换版本
|
2022-08-31 03:41:57 +00:00
|
|
|
|
- webpack 技术采用 webpack + vue3.0 + Typescript + vuex
|
2022-08-29 13:01:46 +00:00
|
|
|
|
- uniapp uniapp版本 uniapp +vuex +element scss
|
2022-08-22 02:00:01 +00:00
|
|
|
|
```
|
|
|
|
|
|
# 本地开发 启动项目
|
|
|
|
|
|
借助hbuilder工具运行浏览器启动
|
|
|
|
|
|
```
|
2022-08-03 10:43:24 +00:00
|
|
|
|
|
2022-08-29 13:01:46 +00:00
|
|
|
|
## 下载依赖
|
|
|
|
|
|
```
|
|
|
|
|
|
npm install
|
|
|
|
|
|
cnpm install
|
|
|
|
|
|
yarn
|
2022-11-19 15:19:03 +00:00
|
|
|
|
# npm install 安装失败,请升级 nodejs 到 16 以上,或尝试使用以下命令:
|
|
|
|
|
|
npm install --registry=https://registry.npm.taobao.org
|
2022-08-29 13:01:46 +00:00
|
|
|
|
```
|
2022-11-15 15:37:54 +00:00
|
|
|
|
## 运行打包
|
2022-08-29 13:01:46 +00:00
|
|
|
|
```
|
2022-11-15 15:37:54 +00:00
|
|
|
|
npm run dev
|
2022-08-29 13:01:46 +00:00
|
|
|
|
npm run build
|
|
|
|
|
|
```
|
2022-08-22 02:00:01 +00:00
|
|
|
|
## eslint+prettier
|
2022-05-18 08:21:31 +00:00
|
|
|
|
```
|
2022-08-22 02:00:01 +00:00
|
|
|
|
# eslint 检测代码
|
|
|
|
|
|
npm run lint
|
2022-06-10 07:04:07 +00:00
|
|
|
|
|
2022-08-22 02:00:01 +00:00
|
|
|
|
#prettier 格式化代码
|
|
|
|
|
|
npm run lint:prettier
|
2022-05-18 08:21:31 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
2022-09-13 11:44:08 +00:00
|
|
|
|
## 文件目录结构
|
2022-06-10 07:00:38 +00:00
|
|
|
|
```
|
2022-09-13 11:44:08 +00:00
|
|
|
|
vue-admin-perfect
|
|
|
|
|
|
├─ public # 静态资源文件(忽略打包)
|
|
|
|
|
|
├─ src
|
|
|
|
|
|
│ ├─ api # API 接口管理
|
|
|
|
|
|
│ ├─ assets # 静态资源文件
|
|
|
|
|
|
│ ├─ components # 全局组件
|
|
|
|
|
|
│ ├─ config # 全局配置项
|
|
|
|
|
|
│ ├─ hooks # 常用 Hooks
|
|
|
|
|
|
│ ├─ language # 语言国际化
|
|
|
|
|
|
│ ├─ layout # 框架布局
|
|
|
|
|
|
│ ├─ routers # 路由管理
|
|
|
|
|
|
│ ├─ store # pinia store
|
|
|
|
|
|
│ ├─ styles # 全局样式
|
|
|
|
|
|
│ ├─ utils # 工具库
|
|
|
|
|
|
│ ├─ views # 项目所有页面
|
|
|
|
|
|
│ ├─ App.vue # 入口页面
|
|
|
|
|
|
│ └─ main.ts # 入口文件
|
|
|
|
|
|
├─ .env # vite 常用配置
|
|
|
|
|
|
├─ .env.development # 开发环境配置
|
|
|
|
|
|
├─ .env.production # 生产环境配置
|
|
|
|
|
|
├─ .env.test # 测试环境配置
|
|
|
|
|
|
├─ .eslintignore # 忽略 Eslint 校验
|
|
|
|
|
|
├─ .eslintrc.cjs # Eslint 校验配置
|
|
|
|
|
|
├─ .gitignore # git 提交忽略
|
|
|
|
|
|
├─ .prettierignore # 忽略 prettier 格式化
|
|
|
|
|
|
├─ .prettierrc.config.js # prettier 配置
|
|
|
|
|
|
├─ index.html # 入口 html
|
|
|
|
|
|
├─ yarn.lock # 依赖包包版本锁
|
|
|
|
|
|
├─ package.json # 依赖包管理
|
|
|
|
|
|
├─ README.md # README 介绍
|
|
|
|
|
|
├─ tsconfig.json # typescript 全局配置
|
|
|
|
|
|
└─ vite.config.ts # vite 配置
|
2022-06-10 07:00:38 +00:00
|
|
|
|
```
|
2022-05-18 08:21:31 +00:00
|
|
|
|
|
2022-11-16 11:46:47 +00:00
|
|
|
|
### 微信交流群
|
2022-11-15 15:15:55 +00:00
|
|
|
|
| 微信二维码 |
|
|
|
|
|
|
| :----------------------------------------------------------------------------------: |
|
2022-11-16 11:46:47 +00:00
|
|
|
|
| <img src="http://182.61.5.190:8889/we.png" width=170/> |
|
2022-06-10 07:04:07 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|