基于vue的后台管理系统开发

article/2025/10/5 3:54:39

如果要快速开发一套基于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. 准备工作

1.1 下载后台代码模版

打开代码模版的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 代码结构介绍

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)debuggerconst 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 打包
. 测试包：