前端开发人员只要了解过vue.js框架可能都知道单文件组件。vue.js中的单文件组件允许在一个文件中定义一个组件的所有内容。这是一个非常有用的解决方案，在浏览器网页中已经开始提倡这种机制。但是不幸的是，这个概念自从2017年8月被提出以来，到现在没有任何进展，像是已经要消亡了一样。然而，深入研究这个主题并试着使用现有的技术来实现单文件组件是很有趣的，值得尝试。
单文件组件知道“渐进增强”这个概念的前端开发人员想必也听说过“分层”这个概念。在组件中，同样有这样的概念。事实上，每个组件至少有3层，甚至多余3层：内容/模板，表现和行为。又或者保守的说，每个组件会被分成至少3个文件，比如：一个按钮组件的文件结构可能是下面这样的：
Button/
| -- Button.html
| -- Button.css
| -- Button.js
采用这种方式分层相当于技术的分离（内容/模板：使用html，表现：使用css，行为：使用JavaScript）。如果没有采用任何构建工具打包，这意味着浏览器需要获取这3个文件。因此，一个想法是：迫切需要一种分离组件代码而不分离技术（文件）的技术来解决这个问题。这就是这篇文章要讨论的主题—单文件组件。
总的来说，我对“技术分层”持怀疑态度。它来自一个事实，就是组件分层常常因为绕不开“技术分层”而被放弃，而这两者是完全分离的。
回到主题，用单文件组件实现按钮可能是这样的：
<template> <!-- Button.html contents go here. --> </template> <style> /* Button.css contents go here. */ </style> <script> // Button.js contents go here. </script>