Vue组件化开发,vue高级组件开发

　　本文主要介绍基于vue组件的测试平台开发前端代码重构。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。

基于 springboot+vue 的测试平台开发

　　继续更新(魔都的人T_T)。

　　其实这一期并不是对开发过程的详细记录，主要关注的是前端的重构。

　　目前重建总进度80%，重建页面变化不大。我们再复习一遍。

一、为什么重构

　　目前项目的功能开发以界面管理为主，内容多，任务重，但是当我开始准备继续开发新功能的时候，发现了一个重大问题。

　　之前所有和我界面相关的功能都写在一个vue文件里。看了一下，代码行将近800行。现在看以前的代码和改动很不方便。后面还有很多功能。如果继续写下去，很可能会丢掉。

　　因此，重构前端代码首先被提上日程。

　　怎么重构，当然还是要用vue的组件化特性来拆分。按照目前的完成程度，从原来的1档(红框)开始，目前的10档(其他)已经拆分。

二、如何拆分

　　这一部分有两个主要部分。

1. 补充对应知识

　　这不是废话吗？一开始不知道怎么做，就找了一下。互联网上有很多免费的学习资源，比如博客和视频，你很容易就能找到。

　　一开始也是想补充vue组件关联度高的知识点。后来看了，不知不觉就差点把vue系统化了。虽然花了很多时间，但是收获很大。之前很多半生不熟的问题都知道为什么。

　　以下是一些重要的知识点，仅供参考：

　　e生命周期vue组件基础知识组件vuex中的通信技术，后两者是耗费精力较多的。因为组件拆分必然有多个组件协同工作，父、子、兄弟和任何组件之间的数据传输和操作都需要这些技术来解决。

2. 合理拆分

　　其实合理拆分并没有严格的要求。对我来说，有两个关键点：更清晰的代码结构和代码的重用。

　　比如看图。

　　图为界面定义的编辑页面，原本是一个文件里的一大坨。拆分后：

　　作为最外面的组件，红框包含其他组件。三个绿色方框对应三个子组件。在请求参数部分，我进一步分割了子组件(黄色框)。如果有后续的添加或者其他改动，代码结构一目了然，易于维护。

　　而在实战中，我就跟了这么一个组件化编码的流程:

　　先把静态组件拆分，按不同功能拆分，合理命名。如果你觉得很难为你的拆分选择一个名字，那么大概率拆分它们是不合理的。然后实现动态组件，看看这个组件是在用还是会被重用，决定数据应该存储在哪里。最后，交互可以从绑定事件开始。一步一步来，中间有很多洞。毕竟把知识的简单演示应用到实际项目中还是需要一定努力的。

三、关于项目

　　这个项目后续会继续更新，但时间未定。作为一个手部训练项目，无论是正面发展还是背面发展都能得到一定的锻炼。

　　然而，最近由于react在我的工作中的使用，我现在优先考虑肝脏的知识。感兴趣的朋友还可以了解一下react、antd pro等。

　　前端：

　　https://github.com/wessonlan/bloomtest-web

　　后端

　　https://github.com/wessonlan/bloomtest-backend

　　以上是测试平台开发的vue组件重构前端代码的详细内容。更多关于vue组件重构的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。