vue-manage-system 的介绍
前言运行改造代码结构创建页面编写页面 结语前言
vue-manage-system：基于 Vue3 + Element Plus 的后台管理系统解决方案。
该框架是本人在做中后台管理系统的项目时，在 Github 上找到的开源项目模板，仓库地址：/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 相似项目代码：如果是比如商城，资源平台这样功能性较强的系统，确实不应该使用现成的代码（因为这样不利于自己后期维护和拓展），但后台管理系统模式单一，使用符合行业规范的项目代码为基础，可以在保证质量的前提下，快速完成开发，是很好的一件事情。
个人总结，如有差错，敬请指正。
