前端开发-基于 Vue 的中后台管理系统框架_vue-manage-system

前言

vue-manage-system：基于 Vue3 + Element Plus 的后台管理系统解决方案。
该框架是本人在做中后台管理系统的项目时，在 Github 上找到的开源项目模板，仓库地址：https://github.com/lin-xin/vue-manage-system（原仓库的 README 中有作者留下的 donate 方式，如果您喜欢这个模板，可以支持一下原作者）

运行

运行 Vue 框架的项目，首先要安装 nodejs，使用其中封装的 npm 组件，进行框架 modules 的安装。
在您的系统上安装好 nodejs 后，（从 github 下载或 clone 项目代码）即可：

• 进入项目文件夹下，打开终端
• 运行 npm install 安装项目使用到的组件。
• 运行 npm run serve 开启服务器，在浏览器中进入 localhost:8080 查看示例项目。
  

改造

原有项目中附带着各种实用组件的实现示例。我们首先需要创建新的页面，然后使用已有的控件去拓展、实现相应的功能。

代码结构

src：目标代码目录

• api：定义和 export 项目使用的 API 的调用函数。定义和调用方式如下：

	// 在 js 中定义 fetchData，令其接收 query 参数，调用 request 进行 HTTP 请求。
	export const fetchData = query => {
	  	return request({
	  	    url: './table.json',
   	        method: 'get',
  	        params: query
 	   });
	};
1
2
3
4
5
6
7
8

import { fetchData } from "../api/index";
...
	...
		// 在 vue 文件的 script 标签中，调用定义的 fetchData 快速发起 HTTP 请求获取数据。
        getData() {
            fetchData(this.query).then(res => {
                console.log(res);
                this.tableData = res.list;
                this.pageTotal = res.pageTotal || 50;
            });
        },
1
2
3
4
5
6
7
8
9
10
11

• asset：项目各类资源存放处
• components：界面组件模板，如：顶部标题栏，侧边导航栏。我们添加页面，需要将页面索引添加到 Sidebar.vue 中。
• plugins：引入插件，如：Element Plus。
• router：调用页面模板，创建路由。Sidebar.vue 中使用的页面索引也即路由定义时的 path 字段。
• store：定义全局的 JS Action，主要负责控制如：顶部标题栏，侧边导航栏的交互行为。
• utils：i18n.js 是国际化功能实现时，语句对应关系表。request.js 定义了项目进行 HTTP 请求和响应的模式。
• views：核心的模块了，也即页面的模板。项目界面主题部分的页面全部在该文件夹下的 vue 文件中定义。vue 文件的 js 代码和 css 样式均采用内嵌式，这也是整个项目结构看起来十分简洁的原因所在了。

App.vue
定义全局 js，css。

创建页面

• 在 views 文件夹下，直接创建一个空白的 vue 文件（如：NewPage.vue）。
• 在 router 的 index.js 下添加新页面的路由

            ,{
                path: '/newPage',
                name: 'newPage',
                meta: {
                    title: '新的页面'
                },
                component: () => import (/* webpackChunkName: "newPage" */
                '../views/NewPage.vue')
            }
1
2
3
4
5
6
7
8
9

• 在 components 的 Sidebar.vue 中将 newPage 索引添加到 menu 中。

            ,{
                path: '/newPage',
                name: 'newPage',
                meta: {
                    title: '新的页面'
                },
                component: () => import (/* webpackChunkName: "newPage" */
                '../views/NewPage.vue')
            }
1
2
3
4
5
6
7
8
9

编写页面

编写 vue 模板文件时，可以使用已有的模板文件，可以快速实现列表，图表这样的后台管理系统非常常用的界面。

结语

由于之前已经使用过 Angular 框架开发了几款中后台管理系统，所以整个业务流程比较熟悉。对 Vue 框架最大的感想就是，真的比 Angular 简洁，而且热加载的性能是 Angular 远不及的。所以想要快速产出的朋友建议使用 Vue。

对于重用 Github 相似项目代码：如果是比如商城，资源平台这样功能性较强的系统，确实不应该使用现成的代码（因为这样不利于自己后期维护和拓展），但后台管理系统模式单一，使用符合行业规范的项目代码为基础，可以在保证质量的前提下，快速完成开发，是很好的一件事情。

---

个人总结，如有差错，敬请指正。