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,
于是有个哥们,给了这段:
其实是要对VUX工程进行改造,使用vue-builder-webpack-plugin插件
三、插件安装
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,直接可作为大型复杂应用种子示例工程使用: