VUE复习笔记25（单文件组件）

介绍

很多的vue项目中，我们使用 vue.component来定义全局组件，然后使用 new Vue({el:'#app'})在每个页面内指定一个容器元素。

这样的方式在很多中小规模的应用中运行的良好，在这些项目里，js只是被用来加强特定的视图，但是在更加复杂的应用中，或者我们的前端完全由js驱动的时候，下面这些缺点将会比奥明显。

1.全局的定义会强制要求每个组件的命名不能相同。
2.字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
3.不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
4.没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

所以我们可以使用 单文件组件 来解决这些问题。
单文件组件的文件扩展名为 vue，并且还可以使用 webpack 或 Browserify 等构建工具。

以下是一个文件名为 hello.vue的实例

image.png

这样写，我们可以获得

• 完整语法高亮
• CommonJS 模块
• 组件作用域的 CSS

正如我们说过的，我们可以使用预处理器来构建简介丰富的组件。

image.png

这些特定的语言只是例子，你可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 vue-loader 使用 webpack，它也是把 CSS Modules 当作第一公民来对待的。

怎么看待关注点分离

一个重要的事情值得注意，关注点分离不等于文件类型分离，在现代的ui开发中，我们已经发现相比于把代码库分离成3个大层次并将它互相交织起来，把他划分为松散的耦合组件再把它们组合起来更加合理一些。在一个组件中，他的模板/逻辑/样式都是内部耦合的，并且把他们搭配在一起，实际上使得组件更加内聚更可维护。

如果你不喜欢单文件组件，你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。

起步

针对刚开始接触 js 开发的用户

有了 .vue 文件，我们就进入了高级的 js 应用领域，如果你还没有准备好的话，意味着还需要学习一些附加的内容。

Node Package Manager (NPM)：阅读 Getting Started guide 直到 10: Uninstalling global packages章节。
Modern JavaScript with ES2015/16：阅读 Babel 的 Learn ES2015 guide。你不需要立刻记住每一个方法，但是你可以保留这个页面以便后期参考。

在你花了一天，了解这些资源之后，们建议你参考 webpack 模板。只要遵循指示，你就能很快地运行一个用到 .vue 组件，ES2015 和热重载 (hot-reloading) 的 Vue 项目!

想学习更多 webpack 的知识，请移步它们的官方文档以及 webpack learning academy。在 webpack 中，每个模块被打包到 bundle 之前都由一个相应的“loader”来转换，Vue 也提供 vue-loader 插件来执行 .vue 单文件组件 的转换。

针对高级用户

无论你更钟情 webpack 或是 Browserify，我们为简单的和更复杂的项目都提供了一些文档模板。我们建议浏览 github.com/vuejs-templates，找到你需要的部分，然后参考 README 中的说明，使用 vue-cli 工具生成新的项目。

模板中使用 webpack，一个模块加载器加载多个模块然后构建成最终应用。为了进一步了解 webpack，可以看 官方介绍视频。如果你有基础，可以看 在 Egghead.io 上的 webpack 进阶教程。