## 一、概述 在很多 Vue 项目中，我们使用`Vue.component`来定义全局组件，紧接着用`new Vue({ el: '#container '})`在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显： * **全局定义 (Global definitions)**强制要求每个 component 中的命名不得重复 * **字符串模板 (String templates)**缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的`\` * **不支持 CSS (No CSS support)**意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏 * **没有构建步骤 (No build step)**限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel 文件扩展名为`.vue`的**single-file components(单文件组件)**为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。 ## 二、单文件组件 .vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js； > .vue文件由三部分组成：`<template>、<style>、<script>` ``` <template> html </template> <style> css </style> <script> js </script> ``` ## 三、规范 参考：[https://vue-loader.vuejs.org/zh/spec.html](https://vue-loader.vuejs.org/zh/spec.html) >[danger] 如果在 Vue 组件中没有使用任何预处理器（如scss等css预处理器），你可以把 .vue 文件当作 HTML 对待。