摘要：如何快速、高效地构建前端组件乃至页面是解放前端生产力的重要标志，掌握抽象组件和页面模型，理解前端可视化搭建思路，摆脱固有的开发模式，提高前端开发效率，是每位前端应该了解的。
本文分享自华为云社区《【云驻共创】前端可视化框架是怎样炼成的？》，原文作者：华为云EI专家胡琦。
随着移动互联网的迅猛发展和 5G 技术的普及，前端页面需求量爆炸增长，用户交互也变得越来越复杂，页面从零开发的成本也水涨船高。如何快速、高效地构建前端组件乃至页面是解放前端生产力的重要标志，掌握抽象组件和页面模型，理解前端可视化搭建思路，摆脱固有的开发模式，提高前端开发效率，是每位前端应该了解的。
从一个“栗子”说起在我们前端开发过程中可能经常这样会遇到这样的场景：
(某天，产品经理找到前端。) 产品经理：简单开发一个欢迎页面，就展示下“欢迎访问”。 (这没什么难度啊，代码很好写了，于是前端不假思索就把代码秀出来。) 前端： ``` <template> <div> 欢迎访问 </div> </template> ``` （一天之后，产品经理觉得这个欢迎词不够具体，还想加个主语，于是……） 产品经理：那个欢迎词简单改一下，改成“欢迎访问我们的网站”。 前端： ``` <template> <div> 欢迎访问我们的网站 </div> </template> ``` （经过代码提交、代码审核、代码合并、部署到测试环境、测试验证、灰度发布、产品验证、 发布上线等一系列流程，欢迎词终于更新了…… 又一天后，产品经理觉得欢迎词没有展现出我们的优势，于是加了个形容词来描述我们的网站。） 产品经理：那个欢迎词还是不行，改成“欢迎访问我们帅气的网站”。 （迫于产品经理手中40米长大刀的威慑，尽管心中满是问号，前端还是修改了代码。） 前端： ``` <template> <div> 欢迎访问我们帅气的网站 </div> </template> ``` （又又一天后，产品经理想到一个“狂拽酷炫”的形容词，于是……） 产品经理：欢迎词再改下，改成“欢迎访问我们狂拽酷炫的网站”。 （此时，前端坐不住了，想到了通过让产品经理自己维护JSON文件，在页面中获取JSON中title字段进行渲染显示） 前端： ``` <template> <div> {{title}} </div> </template> <script> import axios from "axios"; export default { data() { return { title: '' } }, created() { this.queryTitle() }, methods: { queryTitle() { axios.get('JSON文件所在路径').then(res=>{ if(res && res.status === 200) { this.title = res.data.title } }) } } } </script> ``` (又又又一天后，产品经理有了另一个想法，这次不是改欢迎词了。) 产品经理：我想再加一个选择框，用来收集用户信息。 （此时，一阵风吹过，前端在风中凌乱了……）