20. Single File Components（单一文件组件）
单个文件组件
介绍
在许多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模块有一流的支持。
关于分离的问题是什么？
需要注意的一件重要事情是，关注的分离不等于文件类型的分离。在现代用户界面开发中，我们发现代替将代码分成三个彼此交织的巨大层，将它们分解为松散耦合的组件并构成它们更有意义。在组件内部，其模板，逻辑和样式本身就是耦合的，并且它们的搭配实际上使组件更加紧密和可维护。
即使您不喜欢单个文件组件的想法，您仍然可以利用其热重新加载和预编译功能，将JavaScript和CSS分隔为单独的文件：
<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
入门
示例沙箱
如果您想直接使用并开始使用单个文件组件，请在CodeSandbox上查看此简单的待办事项应用程序。
适用于JavaScript中模块构建系统的新用户
通过.vue组件，我们正在进入高级JavaScript应用领域。这意味着如果你还没有学习使用一些额外的工具：
节点包管理器（NPM）：通过第10节：卸载全局包来阅读入门指南。
现代JavaScript与ES2015 / 16：通读Babel's Learn ES2015指南。您现在不必记住每个功能，但请保留此页作为您可以回来的参考。
花了一天的时间深入研究这些资源后，我们建议您查看webpack模板。按照说明进行操作，您应该有一个包含.vue组件的Vue项目，ES2015，并立即进行热重装！
要详细了解Webpack本身，请查看他们的官方文档和Webpack Academy。在Webpack中，每个文件在被包含在bundle中之前都可以通过“loader”进行转换，而Vue提供vue-loader插件来转换单个文件（.vue）组件。
对于高级用户
无论您喜欢Webpack还是Browserify，我们都为简单和更复杂的项目编写了模板。我们建议浏览github.com/vuejs-templates，选择适合您的模板，然后按照README中的说明使用vue-cli生成新项目。
