在很多Vue項目中，我們使用 Vue.component 來定義全局組件，緊接著用new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素。

這種方案在只是使用 JavaScript 增強某個視圖的中小型項目中表現得很好。然而在更復雜的項目中，或者當你的前端完全采用 JavaScript 驅動的時候，以下弊端就顯現出來：

文件擴展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 Webpack 或 Browserify 等構建工具。

以 vue 作為開發技術棧的前端開發者，往往會配合前端構建工具，進行項目的工程化管理。比如，大家常用的 vue 全家桶 + webpack 的方案進行一些中大型前端項目的開發。配合 webpack 后，vue 的組件化優勢更加明顯，我們可以通過單文件的組件化開發方式，在工作實踐中搭建前端頁面，從而提高開發效率。 有這樣一個問題：“當我們在寫 vue 單文件時，我們在寫什么？” 很多人可能會這樣回答：template 負責模板，javascript 負責邏輯，style 負責樣式。當回答到這里時，一個 vue 開發者的世界觀基本上算是很明確了。我們要做的就是在一個單文件組件中寫 template、javascript、style。如果僅僅局限于此，顯然我們無法從更好的利用的單文件組件服務我們的整個開發流程。接下來我將和大家討論在 vue 單文件開發中的一些方法論的問題。

vue 單文件本質

vue單文件是以特定文件擴展名 .vue 命名的文件。如下所示的代碼：

ListDemo.vue

<template>  <div class="list-demo">    <ul>      <li v-for="item in list" :key="item.key">{{item.value}}</li>    </ul>  </div></template><script>export default {  name: 'ListNav',  data() {    return {      list: [        { key: 'home', value: '首頁' },        { key: 'category', value: '文章分類' },        { key: 'tags', value: '標簽' },        { key: 'about', value: '關于我' },        { key: 'links', value: '友情鏈接'},      ],    };  },};</script><style>.list-demo {  font-size: 14px;}</style>

代碼中含有 template，script，style。三者的作用此處就不在贅述，如上的結構展示了一個 vue 單文件基本的文件結構。其背后的理念就是一個單文件組件對應了一個功能性組件，該組件的模板，樣式，業務邏輯都采用就近維護的思想。從組件的復用性，后期可維護性的角度上來說，這樣的理念都大大的提高了組件化的開發效率。vue 的單文件，既不是 js，也不是 html，也不是 css 文件，這樣的文件如何被應用到頁面上，這也就是下面將會說到的一個問題，vue 單文件是如何被處理成頁面中可用的資源。