前言
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
});
};
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;
});
},
- 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')
}
- 在 components 的 Sidebar.vue 中将
newPage
索引添加到 menu 中。
,{
path: '/newPage',
name: 'newPage',
meta: {
title: '新的页面'
},
component: () => import (/* webpackChunkName: "newPage" */
'../views/NewPage.vue')
}
编写页面
编写 vue 模板文件时,可以使用已有的模板文件,可以快速实现列表,图表这样的后台管理系统非常常用的界面。
结语
由于之前已经使用过 Angular 框架开发了几款中后台管理系统,所以整个业务流程比较熟悉。对 Vue 框架最大的感想就是,真的比 Angular 简洁,而且热加载的性能是 Angular 远不及的。所以想要快速产出的朋友建议使用 Vue。
对于重用 Github 相似项目代码:如果是比如商城,资源平台这样功能性较强的系统,确实不应该使用现成的代码(因为这样不利于自己后期维护和拓展),但后台管理系统模式单一,使用符合行业规范的项目代码为基础,可以在保证质量的前提下,快速完成开发,是很好的一件事情。
个人总结,如有差错,敬请指正。