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

发布时间:2023-09-04 15:30

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 查看示例项目。
    前端开发-基于 Vue 的中后台管理系统框架_第1张图片

改造

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

代码结构

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 的中后台管理系统框架_第2张图片

编写页面

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

结语

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

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


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

你可能感兴趣的

相关推荐

网站服务器如何防入侵

计算机视觉与深度学习(12)

Spring cloud Zookeeper 系列一 之实现服务注册与发现

vika维格表 8 月版本更新:API 面板新增调试入口,权限管理新增「只可更新」权限角色,记录卡片优化升级,使用更丝滑

一文掌握Java中List和Set接口的基本使用

AAX学院解读无聊猿猴游艇俱乐部Bored Ape Yacht Club

Vue2+JS实现扫雷小游戏

关于“你以为你是谁?”

CSS Houdini:用浏览器引擎实现高级CSS效果

2019-11-18周一上午,学习《图解深度学习》第一章总结

在MATLAB中快速画圆(给出圆心坐标和半径就能直接画的那种)

C++中signed main和int main的区别

注意力机制学习:Multi-Head Attention

STM32F103 基本定时器 (P2MDA-KM4)

音频特征于音频信号提取总结

吴恩达机器学习作业1-线性回归

C语言实现新生入学登记系统

C#过滤sql特殊字符串的方法

物联网设备通过MQTT接入华为iot平台

c语言中3%3e2%3e1的值,Javascript中的空数组值

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号