## 一、概述 在很多 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 對待。