接着前面的内容：https://www.cnblogs.com/yanggb/p/12682137.html。
单文件组件
介绍
在很多的vue项目中，我们都是使用【Vue.component】来定义全局组件，紧接着用【new Vue({el:'#container'})】在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作得很好，在这些项目里javascript只被用来加强特定的视图。当在更复杂的项目中，或者你的前端完全由javascript驱动的时候，下面的这些缺点将会变得非常明显：
1.全局定义（Global Definitions）强制要求每个component中的命名不得重复。
2.字符串模板（String Template）缺乏语法高亮，在html有多行的时候，需要用到丑陋的【】符号。
3.不支持CSS（No CSS Support）意味着当html和javascript组件化的时候，css被明显遗漏。
4.没有构建步骤（No Build Step）限制只能使用html和es5 javascript，而不能使用预处理器，如Pug（formerly jade）和Babel。
而文件拓展名为【.vue】的single-file-components（单文件组件）为上面所有的问题提供了解决方案，并且还可以使用webpack或Browserify等构建工具。
这是一个文件名为Hello.vue的简单示例：
现在我们就获得了以下好处：
1.完整的语法高亮。
2.CommonJS模块（module.exports）。
3.组件作用域的CSS（注意scoped属性）
正如上面说到的，开发者可以使用预处理器来构建简洁和功能更丰富的组件，比如Pug，Babel（with es2015 modules）和Stylus等。
这些特定的语言只是例子，你可以只是简单地使用Babel，TypeScript，SCSS，PostCSS或其他任何能够帮助你提高生产力的预处理器。比如，如果搭配vue-loader使用webpack，它也能为CSS Modules提供头等支持。
怎么看待关注点分离
一个重要的事情值得注意，关注点分离不等于文件类型分离。在现代UI开发中，我们已经发现，相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来要更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把它们搭配在一起实际上使得组件更加内聚且更可维护。
即便你不喜欢单文件组件，你仍然可以把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>
针对刚接触javascript模块开发系统的用户
有了【.vue】组件，我们就进入了高级javascript的应用领域。如果你没有准备好的话，意味着还需要学会使用一些附加的工具：
1.Node Package Manager（NPM）。
2.Modern JavaScript with ES2015/2016。
在你花费了一天时间了解了这些资源之后，官方文档建议你参考vue cli3。只要遵循指示，你就能很快地运行一个带有【.vue】组件、es2015、webpack和热重载（hot-reloading）的vue项目。
针对高级用户
cli会为你搞定大多数工具的配置问题，同时也支持细粒度自定义配置项。
而有时你可能会想要从零开始搭建你自己的构建工具，这时候你就需要通过vue loader手动配置webpack。关于webpack的内容学习可以通过查阅其官方文档。
"我还是很喜欢你，像细雨洒落八千里，淅淅沥沥。"