1.01-组件化开发问题

2018-09-28 本文已影响14人 Jimmy_L_Wang

在Vue.js前端组件化思路下，一个朴素的（Vanilla）开发流程如下图所示：

WX20180919-142041@2x.png

这和传统的网站开发没有太大的差异：我们将编写完的HTML/JS/CSS代码直接推送到服务器，然后在浏览器中查看效果并进行一些手工测试。唯一的区别在于，在组件化思路下，我们将编写HTML/JS/CSS的工作，从网页级别分拆到组件级别了。

组件化分拆引发的麻烦

组件化分拆的理念很好，但是写起代码来相当地生硬。例如，为了组织EzApp组件的HTML 模板、CSS样式和JS代码，我们不得不借助于宿主HTML文件：

component-split-vanilla.png

这种代码组织方式存在着一些令人不吐不快的问题：