vue單文件組件

2、在用 Vue 構建大型應用時推薦使用 NPM 安裝。

參考：https://vue-loader.vuejs.org/zh/

https://vue-loader.vuejs.org/zh/spec.html

NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。
一個重要的事情值得注意，關注點分離不等於文件類型分離。在現代 UI 開發中，咱們已經發現相比於把代碼庫分離成三個大的層次並將其相互交織起來，把它們劃分爲鬆散耦合的組件再將其組合起來更合理一些。在一個組件裏，其模板、邏輯和樣式是內部耦合的，而且把他們搭配在一塊兒實際上使得組件更加內聚且更可維護。

Vue Loader 是一個 webpack 的 loader，它容許你以一種名爲單文件組件 (SFCs)的格式撰寫 Vue 組件。.vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每一個 .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還容許添加可選的自定義塊。通常狀況，你應該將 vue-loader 和 vue-template-compiler 一塊兒安裝。每一個 vue 包的新版本發佈時，一個相應版本的 vue-template-compiler 也會隨之發佈。編譯器的版本必須和基本的 vue 包保持同步，這樣 vue-loader 就會生成兼容運行時的代碼。這意味着你每次升級項目中的 vue 包時，也應該匹配升級 vue-template-compiler。Vue Loader 的配置和其它的 loader 不太同樣。除了經過一條規則將 vue-loader 應用到全部擴展名爲 .vue 的文件上以外，請確保在你的 webpack 配置中添加 Vue Loader 的插件。

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  module: {
    rules: [
      // ... 其它規則
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin() // 請確保引入這個插件！
  ]
}

這個插件是必須的！ 它的職責是將你定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊。例如，若是你有一條匹配 /\.js$/ 的規則，那麼它會應用到 .vue 文件裏的 <script> 塊。vue-loader 會解析文件，提取每一個語言塊，若有必要會經過其它 loader 處理，最後將他們組裝成一個 ES Module，它的默認導出是一個 Vue.js 組件選項的對象。

<template>
  <div class="example">{{ msg }}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>
<style>
.example {
  color: red;
}
</style>