在之前的實例中，我們都是通過 Vue.component 或者 components 屬性的方式來定義組件，這種方式在很多中小規模的項目中還好，但在復雜的項目中，下面這些缺點就非常明顯了：

字符串模板：缺乏高亮，書寫麻煩，特別是 HTML 多行的時候，雖然可以將模板寫在 html 文件中，但是侵入性太強，不利于組件解耦分離。

不支持CSS：意味著當 HTML 和 JavaScript 組件化時，CSS明顯被遺漏了

沒有構建步驟：限制只能使用 HTML 和 ES5 JavaScript，而不能使用預處理器。

Vuejs 提供的擴展名為 .vue 的 單文件組件 為以上所有問題提供了解決方案。

初識單文件組件

還是利用工欲善其事必先利其器 中的源碼，在 src 目錄下創建 hello.vue 文件，內容如下：

<template> <h2>{{ msg }}</h2></template><script>export default {data () {return {msg:'Hello Vue.js 單文件組件~'}}}</script><style>h2 {color: green;}</style>

然后在 app.js 中引入使用：

// ES6 引入模塊語法import Vue from 'vue';import hello from './hello.vue';new Vue({ el: "#app", template: '<hello/>', components: {  hello }});

此時項目是沒法運行的，因為 .vue 文件 webpack 是沒法是別的，它需要對應的 vue-loader 來處理才行，而且細心的朋友會發現 hello.vue 中用到了 ES6 語法，此時就需要用到相應的語法轉化 loader 將 ES6 轉化成主流瀏覽器兼容的 ES5 語法，這里就需要用到官方推薦的 babel 工具了。先安裝需要的 loader :

# hello.vue 文件中使用了 css，所以需要 css-loader 來處理，vue-loader 會自動調用npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev

有的人疑惑只是使用 babel-loader 為什么還需要安裝后面這么多工具呢，這是因為很多工具都是獨立的， loader 只是為了配合 webpack 使用的橋梁，而這里 babel-core 和 babel-preset-env 才是實現 ES6 到 ES5 的核心。

我們再修改 webpack.config.js 配置如下：

module.exports = { // ... module: {  // 這里用來配置處理不同后綴文件所使用的loader  rules: [   {    test: /.vue$/,    loader: 'vue-loader'   },   {    test: /.js$/,    loader: 'babel-loader'   }  ] }}

對于 babel 的配置，我們還需在項目根目錄下剛創建 .babelrc 文件來配置 Babel presets 和 其他相關插件，內容如下：

{ "presets": [ "env" ]}

但是雖然雖然都配置好了，項目還是還是會報錯，報如下錯誤：

ERROR in ./src/hello.vueModule build failed: Error: Cannot find module 'vue-template-compiler'