4.1.3 单文件组件

Vue.js 自定义了一种 .vue 文件，可以把 HTML、css、JS 代码写到一个文件中，从而实现对一个组件的封装，一个 .vue 文件就是一个单独的组件。由于 .vue 文件是自定义的，浏览器不能识别，因此在 Webpack 构建中，需要安装 vue-loader 对 .vue 文件进行解析。在 Visual Studio Code 编辑器中，书写 .vue 文件前也需要安装对应的插件（如 Vetur）来增加对文件的支持。

使用 Vue-cli 新建一个大觅项目，项目首页代码如示例 1 所示。其中，template 标签中都是 HTML 代码，定义了在页面中显示的内容，也可以说定义了一个模板。script 标签中都是 JS 代码，定义了组件中需要的数据和操作。style 标签中是 CSS 样式，定义了组件的样式，属性 scoped 表明这里写的 CSS 样式只适用于该组件，限定样式的作用域。

在代码中，export default 后面的对象是定义组件所需要的数据（data）以及操作数据的方法等，更加完整的 export default 对象还包括 methods、data、computed 等。不难发现，在 .vue 组件中，data 必须是一个函数，它返回一个对象，这个对象数据供组件实现。

经验

单文件组件在工程化的项目开发中使用最为频繁，一定要理清楚单文件组件的使用。