Vue模板、JS、CSS分离实现

Vue.js文件默认由template、style、script三种标签将HTML、CSS、JS混合到一个文件当中。

这种模式有它一定的优势，即：当单个VUE文件如果样式、逻辑、模板相对简单时以上结构能很大程度上降低逻辑复杂度，页面功能和整体结构也一目了然。但是，当页面功能内容偏多，交互逻辑复杂，模板嵌套多层时将会出现如下图这种况。几百上千行的代码杂柔在一个文件中，当涉及到重构，维护时将会是个焦油坑。例如下图(733行，所有的css/js/html杂柔在一起，不利于维护，逻辑非常不清晰)：

这种情况可以通过3种情况来改善：

1.将逻辑通过组件方式抽离再引入
2.将css通过@import方式抽离再引入
3.将css/js/html全部抽离，只保留模块主入口文件再引入

前面1，2种都不能很好解决模块划分，内聚模块分治问题，本文讨论的是第3种解决方案，最终效果如下:

二、解决方案

针对这个问题，有人提出过相关的ISSUE，