摘 要：地下管廊是城市的重要基础设施，运用现代化的计算机系统维护其运营具有重要意义。文章使用 Vue 框架技术，设计了地下综合管廊管理平台的前端展示系统。该技术使用前后端分离方式和组件模式进行开发，提高了开发效率，缩短了开发周期，使系统更具扩展性而且可以更快交付使用。在前端系统中集成ElementUI组件库，使开发更加便捷规范，显示效果统一协调；使用 Echarts 图表，使数据显示更加形象直观；这些技术的运用，提高了管廊运行的安全性，实现了管廊运营管理的高效性。
关键词：综合管廊；管理平台；Vue；前端开发；组件化
DOI:10.19850/j.cnki.2096-4706.2021.16.004
中图分类号：TP311 文献标识码：A 文章编号：2096-4706（2021）16-0013-06
Front end Design and Implementation of Underground Comprehensive Pipe Gallery Management Platform Based on Vue
LIU Zheng
(CRSC Communication & Information Group Company Ltd., Beijing 100070, China)
Abstract: Underground pipe gallery is an important urban infrastructure. It is of great significance to maintain it’s operation by using modern computer system. This paper uses Vue frame technology to design the front-end display system of underground comprehensive pipe gallery management platform. The technology uses the front-end and back-end separation mode and component mode for development, which improves the development efficiency, shortens the development cycle, makes the system more scalable and can be delivered faster. Integrate ElementUI component library in the front-end system to make the development more convenient and standardized, and the display effect is unified and coordinated; uses Echarts chart to make the data display more visual and intuitive; the application of these technologies improves the safety of pipe gallery operation and realizes the efficiency of pipe gallery operation and management.
Keywords: comprehensive pipe gallery; management platform; Vue; front end development; componentization
参考文献：
[1] 梁荐，郝志成 . 浅议城市地下综合管廊发展现状及应对措施 [J]. 城市建筑，2013（14）：286-287.
[2] 曹茂春，张东霞 . 智慧管廊信息化建设探讨 [J]. 智能建筑与智慧城市，2016（11）：76-80.
[3] 李嘉，赵凯强，李长云 .Web 前端开发技术的演化与 MVVM 设计模式研究 [J]. 电脑知识与技术，2018，14（2）：221-222+251.
[4] 严伟，郭丹 . 基于 MVC 设计模式的前端设计 [J]. 网络安全技术与应用，2016（9）：46+48.
[5] Vue.js.Vue 实例 [EB/OL].[2021-06-10].https://cn.vuejs.org.
[6] 张耀春 .Vue.js 权威指南 [M]. 电子工业出版社，2016.
[7] Vuex.What is Vuex [EB/OL].[2021-06-01].https://vuex.vuejs. org/zh/.
[8] Vue.js.Vue Router [EB/OL].[2021-06-10].https://router.vuejs. org/zh/.
[9] Webpack .Webpack 中文文档 [EB/OL].[2021-06-01].https:// webpack.docschina.org/concepts/. [10] Vue.js.Vue Cli [EB/OL].[2021-06-
10].https://cli.vuejs.org/zh/.
[11] Element UI [EB/OL].[2021-06-10].https://element.eleme.cn/.
[12] Axios [EB/OL].[2021-06-10].https://axios-http.com/.
[13] Mozilla. axios 中文网 .Ajax [EB/OL].[2021-05-31].https:// developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX.
[14] LI D，MEI H H，SHEN Y，et al. ECharts：A Declarative Framework for Rapid Construction of Wed-based Visualization [J]. Visual Informatics，2018（2）：136-146.
作者简介：刘正（1981—），男，汉族，北京人，软件开发工程师，硕士，研究方向：地下管廊信息化。