Vue模板、JS、CSS分离实现

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

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

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

1.将JS逻辑通过公共组件方式抽离再引入

2.将css通过@import方式抽离再引入

3.将css/js/html全部抽离，只保留模块主入口文件再引入

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

二、解决方案

针对这个问题，有人提出过相关的ISSUE，尤大也给出了相应的解决方案，但只仅针对于针对VUE纯工程而言，如果要针对VUX这种定制化框架来说是无效的。

github.com/vuejs/vueif…

于是有个哥们，给了这段：

插件

github.com/pksunkara/v…

三、插件安装

npm install vue-builder-webpack-plugin --save-dev
复制代码

四、WEBPACK打包改造

要使用这种效果需要对vux工程 build 目录中的 webpack.base.conf.js 进行改造。

1.引入插件包

const VueBuilder = require('vue-builder-webpack-plugin');
复制代码

2.找到 module.exports = vuxLoader.merge(webpackConfig, {.. 代码部份，加入启用插件代码。

new VueBuilder({
   path: 'src'
}),
复制代码

请注意： src 为当前工程源码目录

五、使用

假设我们要建立的组件名字为 SplitComponent.vue 并且内容是这样的:

现在的目标是要将html/css/js三者抽离,减少逻辑复杂度，提升可维护性。

1.建立入口:

2.建立css:

3.建立html:

4.建立js:

六、细粒度按小功能分治原则

基于以上规则，我们可以将一个相对复杂的模块细粒度按小功能分治划分，可达到如图所示效果，同时也支持子功能模块互相内嵌使用。

七、自动创建模板html/css/js功能实现

经过以上改造，我们发现有个问题，当划分粒度内容比较多，即有多个小组件需要创建时，需要不断地粘贴复制，有没有办法自动创建类似脚本的功能，通过一个命令输入模块名，即可自动创建？答案是肯定的。

1.在 npm script 扩充以下命令:

注：除此之外也可以使用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勾子中：

以上为简要实现思路摘录，参考源码已放于github,直接可作为大型复杂应用种子示例工程使用:

github.com/jamesliauw/…