1.01-组件化开发问题

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

WX20180919-142041@2x.png

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

组件化分拆引发的麻烦

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

component-split-vanilla.png

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

• 代码太杂乱：组件的相关代码，散落在各处，看起来不爽，维护起来麻烦
• 组件不独立：组件存在对宿主HTML文件和样式文件的依赖，不是自包含的
• 样式未隔离：组件样式是全局有效的，不同组件的样式声明可能冲突