什么是单文件组件？
我们之前使用的是全局引用、全局定义的方式。
- script 引入一个资源，然后全局绑定一个变量。比如 jQuery
- 然后我们用引入的资源操作。
因为这样使用有一些弊端，然后出现了模块化。
而单文件组件可以理解为 Vue 的模块化使用，他解决了一下问题。
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
\
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
单文件组件的定义及使用
单文件组件的后缀名为 .vue，我们一般通过 webpack 来构建。
一直有个概念页面为 结构层（模板 html）、逻辑层（数据 逻辑 js）、表现层（样式 css），正好这个在 Vue 的单文件组件中得到了良好的实现。
相比 js 和 css 分家的组件来说。这样的单文件组件我感觉更香呀。
<template> <div>这里是我们的模板定义的地方。注意只能有一个根节点呀</div> </template> <script> // 这里是我们组件的数据部分。 // 这里不需要template，构建的时候会自动解析上面的模板 // 这里需要 export default 或者 module.exports ，因为这样才可以传递出去。 export default { } </script> <style scoped> /*** * 这里可以放我们的css，然编译之后可以抽离出去。 * scoped 是让css 只在当前组件生效 / </style>
如何使用
webpack
vue-loader
当然，vue 也有 Vue-CLI 工具。通过它我们可以很快的跑起我们的页面。
