默认情况下，Vue.js 文件由三个标签组成：template、style 和 script，它们将 HTML、CSS 和 JS 混合到一个文件中。
这些模式都有一定的优势，那就是如果单个VUE文件的样式、逻辑、模板都比较简单，那么上述结构可以大大降低逻辑复杂度，而且页面功能和整体结构也一目了然。 而且，当页面功能和内容较多、交互逻辑复杂、模板嵌套多层时css优点，就会出现如右图这样的情况。 当涉及到构建和维护时，一个文件中的数十万行代码将成为一个焦油坑。 比如右图（733行，所有的css/js/html都混在一起，不利于维护，而且逻辑很不清楚）：
这些情况可以通过3种情况来改善：
1、逻辑被抽取出来，以组件的形式重新引入
2.提取并以@import的形式重新引入css
3、提取所有css/js/html，导入前只保留模块主入口文件
后一种和第二种方法无法解决模块定义和内聚模块划分和征服的问题。 本文讨论的是第三种方案，最终的疗效如下：
二、解决办法
针对这个问题，有人提出了相关的ISSUE，
github.com/vuejs/vueif...
于是有哥们给出了这样一段话：
虽然是改造VUX项目，使用vue-builder-webpack-plugin插件
github.com/pksunkara/v...
3.插件安装
npm install vue-builder-webpack-plugin --save-dev
4.WEBPACK包重构
要使用这些效果，需要修改vux项目构建目录中的webpack.base.conf.js。
1.引入插件包
const VueBuilder = require('vue-builder-webpack-plugin');
2.找到 module.exports=vuxLoader.merge(webpackConfig,{.. 代码部分，添加启用插件的代码。
new VueBuilder({
path: 'src'
}),
请注意：src是当前项目源代码目录
5. 使用
假设我们要完成的组件名称是SplitComponent.vue，内容是这样的：
目前的目标是分离html/css/js，降低逻辑复杂度css优点，提高可维护性。
1. 构建入口：
2.构建CSS：
3. 构建html：
4.构建js：
六、细化以小函数分治原则
基于以上规则，我们可以定义一个相对复杂的模块，细化为小功能，可以达到如图所示的效果，同时也支持子功能模块的嵌入使用。
七、自动创建模板html/css/js功能实现
经过上述修改后，我们发现了一个问题。 当细粒度内容较多时，即要创建多个widget时，需要不断粘贴复制。 有没有办法手动创建一个类似脚本的函数，通过命令输入模块名称，就可以手动创建了？ 答案是肯定的。
1. 在 npmscript 中展开以下命令：
注意：此外，还可以使用npm软链接的形式来创建实现，以减少命令宽度。 这部分知识本文不再讨论。
2. 在build目录下新建generate.js。 基本逻辑是根据用户输入的组件路径和组件名称，手动创建js/css/html模板代码。 关键代码如下：
3、用途：
此时会在src/components/vector目录下生成：
VectorComponent.vue
VectorComponent.vue.css
VectorComponent.vue.js
VectorComponent.vue.html
4、项目运行成效：
八、插件原理分析
通过观察，我们发现所有文件都必须有.vue后缀，尽管这样的内容是有效的：
同时还发现该插件还支持typescript、sass、less等预编译语言：
关键步骤是将插件挂载到 webpack hook 中：
以上是摘录的一个简单的实现思路。 参考源码已放在github上，可以直接作为小型复杂应用种子示例项目：
github.com/1166544/vue...
