基于vue的后台管理系统开发-VUE3.0验证
https://blog.csdn.net/tornylin/article/details/119086265
如果要快速开发一套基于vue的后台管理系统，你可以手动从0到1动手撸，也可以基于现有的vue的后台管理系统模版进行开发。 github上有几套关注度比较的vue后台管理系统模版[1]：
vue-element-admin[2]
vue-admin[3]
vue-manage-system[4]
iview-admin[5]
vuestic-admin[6]
d2-admin[7]
经过比较，博主选了vue-manage-system这套后台管理系统模版进行开发。登录和首页效果图如下图所示：
图1 后台管理系统登录界面
图2 后台管理系统首页
本博客将重点介绍这套模版的使用，博客的提纲如下：
图3 博客提纲
1. 准备工作
1.1 下载后台代码模版
https://github.com/lin-xin/vue-manage-system
打开代码模版的git地址项目地址：https://github.com/lin-xin/vue-manage-system，在终端输入以下指令，clone代码到本地。
git clone https://github.com/lin-xin/vue-manage-system.git
1.2 运行模版代码
cd 到vue-manage-system目录，在终端输入以下指令，安装依赖：
npm install
等待依赖安装完成之后，在终端输入以下指令，运行代码：
npm run dev
在浏览器输入：http://localhost:3000/，点击登录按钮，即可进入首页。
2. 模版代码介绍
2.1 技术选型
该模版基于 Vue3，使用 vue-cli3 脚手架，引用 Element Plus 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。其他库归纳如下：
vue：vue3；
axios：网络库；
element-plus：Vue3.0的组件库，提供了配套设计资源；
vue-router：路由库；
Element-UI：Vue 2.0 作为基础框架实现的组件库；
vue-cropperjs：图片剪辑库；
vue-schart：小型简单的图表库；
vuex：状态管理；
wangeditor：轻量富文本库。
2.2 代码结构介绍
图2.1 代码结构图
3. 功能设计
3.1 清理工作
用IDE打开模版代码，进行清理工作，主要有以下工作：
代码优化：删除没有用的.vue、css、js等代码；
依赖库优化：删除没用的依赖库；
资源优化：删除没用的或替换资源，包括图片、字符串等。
3.2 功能设计
根据具体需求设计后台管理系统功能，在对应的文件夹下创建Vue页面文件、添加或修改路由状态、保存状态到store（例如登录状态、用户信息等），从store中去读保存的信息。
3.3 打包部署
3.3.1 打包脚本
先安装两个库：
A. rimraf：作用是每次打包前，先将原dist下面的文件和文件夹删掉。
B. cross-env：作用是设置及使用环境变量“ENV”。
. 在根据目录下创建文件夹config，在创建config.js，config.js代码如下：
let env = process.env.NODE_ENV || 'development'
console.log(env)
debugger
const config = {
development: {
baseUrl: 'http://localhost:8080'
},
prod: {
baseUrl: 'http://xxx.cn/xxxxx'
}
}
export default config[env]
. 将根目录下的package.json下的scripts的指令修改如下：
"dev": "vite",
"serve": "vite preview",
"build:test": "rimraf dist && cross-env NODE_ENV=development vite preview",
"build:prod": "rimraf dist && cross-env NODE_ENV=prod vite build"
3.3.2 打包
. 测试包：
npm run build:test
. 生产包：
npm run build:prod
3.3.3 部署
经过上述步骤之后打包得到dist包，你可以选择两种方式进行部署：
1）直接 dist包部署；
2）镜像部署：参考博主的博客《阿里云Docker部署Vue应用实践指南》
4.Demo代码
代码已上传git，需要的小伙伴可以直接下载，git下载地址。
5.参考文献
1）基于VUE的后台管理系统
2） https://github.com/PanJiaChen/vue-element-admin
3） https://github.com/taylorchen709/vue-admin
4）lin-xin/vue-manage-system
5）https://github.com/iview/iview-admin
6）https://github.com/epicmaxco/vuestic-admin
7）https://gitee.com/d2-projects/d2-admin
