单文件组件
介绍
在许多 Vue 项目中，全局组件将使用 Vue.component 定义，然后使用 new Vue({ el: '#container' }) 来定位每个页面主体中的容器元素。
这对于中小型项目非常有效，在这些项目中，JavaScript 仅用于增强某些视图。然而，在更复杂的项目中，或者当您的前端完全由 JavaScript 驱动时，这些缺点就会显现出来。
- 全局定义 强制每个组件使用唯一的名称。
- 字符串模板 缺乏语法高亮，并且需要使用难看的斜杠来处理多行 HTML。
- 没有 CSS 支持 意味着虽然 HTML 和 JavaScript 被模块化到组件中，但 CSS 明显地被排除在外。
- 没有构建步骤 限制我们只能使用 HTML 和 ES5 JavaScript，而不是像 Pug（以前称为 Jade）和 Babel 这样的预处理器。
所有这些问题都可以通过使用 .vue 扩展名的单文件组件来解决，这得益于 Webpack 或 Browserify 等构建工具。
以下是一个名为 Hello.vue 的文件的示例。
现在我们得到了
正如承诺的那样，我们也可以使用 Pug、Babel（使用 ES2015 模块）和 Stylus 等预处理器来创建更简洁、功能更丰富的组件。
这些特定语言只是示例。您也可以轻松地使用 Bublé、TypeScript、SCSS、PostCSS - 或任何其他帮助您提高效率的预处理器。如果使用 Webpack 和 vue-loader，它还对 CSS 模块提供一流的支持。
关于关注点分离？
需要注意的一点是，关注点分离并不等于文件类型分离。 在现代 UI 开发中，我们发现，与其将代码库划分为三个相互交织的巨大层，不如将其划分为松散耦合的组件并进行组合。在一个组件内部，它的模板、逻辑和样式是内在耦合的，将它们放在一起实际上使组件更具凝聚力和可维护性。
即使您不喜欢单文件组件的想法，您仍然可以通过将 JavaScript 和 CSS 分开到不同的文件中来利用它的热重载和预编译功能。
|
入门
示例沙箱
如果您想直接开始使用单文件组件，请查看 CodeSandbox 上的这个简单的待办事项应用程序。
对于 JavaScript 模块构建系统的新手
使用 .vue 组件，我们进入了高级 JavaScript 应用程序的领域。这意味着如果您还没有学习，需要学习一些额外的工具。
Node 包管理器 (NPM)：阅读入门指南中关于如何从注册表获取包的部分。
使用 ES2015/16 的现代 JavaScript：阅读 Babel 的学习 ES2015 指南。您不必现在就记住所有功能，但请将此页面作为参考，以便您以后可以回来查看。
在您花了一天时间学习了这些资源之后，我们建议您查看Vue CLI 3。按照说明操作，您应该很快就能拥有一个包含 .vue 组件、ES2015、Webpack 和热重载的 Vue 项目！
对于高级用户
CLI 为您处理了大多数工具配置，但也允许您通过其自己的配置选项进行细粒度的自定义。
如果您更喜欢从头开始设置自己的构建设置，则需要使用vue-loader手动配置 webpack。要了解有关 webpack 本身的更多信息，请查看其官方文档和Webpack Academy。