Vue | 25 工具 - 单文件组件

内容提要：

1. 单文件组件的意义
2. 关于新手和高级用户如何使用单文件组件的建议

介绍

在一些Vue项目中，全局组件将使用Vue.component定义，而后通过new Vue（{ el: '#container' }）在页面内找到一个容器元素。

这在小型到中型的项目中可以完美工作，JavaScript仅仅用于改善某些特定的视图，然而在一些复杂的项目中，或当你的前端完全通过JavaScript驱动，这些不利条件变得明显：

• 全局定义强制每一组件使用唯一的名字
• 字符串模板缺少语法高亮，并且多行HTML要求难看的斜杠
• 没有CSS的支持意味着HTML和JavaScrip是模块化在组件中的，CSS被明显的忽略了。
• 没有构建步骤限制我们去使用HTML和ES5 JavaScript，而不像Pug（以前叫Jade）和Babel那样的预处理程序

以上这些问题通过单文件组件被解决，一个.vue的扩展，可以使用像Webpack或Browserify这样的构建工具。

这里有一个文件例子，我们将调用Hello.vue:

现在我们能够获得：

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

正如所承诺的，我们可以使用预处理程序来构建简洁但功能丰富的组件，比如Pug，Babel（with ES2015 modules）和Stylus。

这些特定的语言仅仅是一个例子。你可以很容易的使用Bublé，TypeScript，SCSS, PostCSS - 或无论什么其他预处理程序帮助你提高产能。如果你使用携带vue-loader的Webpack，它也会优先支持CSS模块。

怎么看待关注点分离呢？

首先需要注意的是关注点分离并不等于文件类型分离。在限定的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>

起步

例子沙箱

如果你想深入了解并开始使用单文件组件，请来CodeSandbox这里有一个简单的todo例子.

针对刚接触在JavaScript使用模块构建系统的用户

使用.vue组件，我们进入了一个高级JavaScript应用领域。那意为着需要学习使用一些工具（如果你还不知道的话）：

• Node Package Mannager（NPM）：通过读第10章：起步指导:卸载全局包。
• 使用ES2015/16的现代化的JavaScript：读Babel的Learn 2015 Guide.你现在不必记住每一个特性，但你可以保留网页的链接以便回来查找。
  在你花一天的时间去深入了解这些资源之后。我们推荐Vue CLI3.跟着说明你可以很快开始一个使用vue组件的Vue项目，ES2015，Webpack和热重载！

对于高级用户

CLI为你处理了大多数工具配置，但也允许细微的自定义通过它自己的config options.

如果你更喜欢从头开始你的构建设置，你需要使用vue-loader手动构建你的webpack.去学习关于webpack本身，来官方文档 和Webpack Academy.