Vue模板、JS、CSS分离实现

最新推荐文章于 2025-07-03 07:59:38 发布

转载

最新推荐文章于 2025-07-03 07:59:38 发布 · 7.1k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cdffa2af265da1b8e706f23

文章标签：

#javascript #webpack #开发工具 #ViewUI

本文探讨了如何将Vue.js文件中的HTML、CSS、JS分离，以解决模块划分和内聚问题。通过介绍一种解决方案，包括插件安装、Webpack打包改造，实现了细粒度的按功能分治。文章还详细阐述了自动创建模板功能的实现，以及插件的工作原理，提供了一个大型复杂应用的种子示例工程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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