Vue.js 2.0 單文件組件

Vue.js 2.0 單文件組件介紹

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

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

• 全局定義(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 等構建工具。

這是一個文件名為 Hello.vue 的簡單實例：

現(xiàn)在我們獲得：

• 完整語法高亮
• CommonJS 模塊
• 組件化的 CSS

正如我們說過的，我們可以使用預處理器來構建簡潔和功能更豐富的組件，比如 Jade，Babel (with ES2015 modules)，和 Stylus。

這些特定的語言只是例子，你可以只是簡單地使用 Buble，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助你提高生產(chǎn)力的預處理器。

起步

針對剛接觸 JavaScript 模塊開發(fā)系統(tǒng)的用戶

有了 .vue 組件，我們就進入了高級 JavaScirpt 應用領域。如果你沒有準備好的話，意味著還需要學會使用一些附加的工具：

• Node Package Manager (NPM)：閱讀 Getting Started guide 直到 10: Uninstalling global packages 章節(jié)。
• Modern JavaScript with ES2015/16：閱讀 Babel 的 Learn ES2015 guide. 你不需要立刻記住每一個方法，但是你可以保留這個頁面以便后期參考。

在你花一些時日了解這些資源之后，我們建議你參考 webpack-simple 。只要遵循指示，你就能很快的運行一個用到 .vue 組件，ES2015 和 熱重載( hot-reloading ) 的Vue項目!

這個模板使用 Webpack，一個能將多個模塊打包成最終應用的模塊打包工具。 這個視頻 介紹了Webpack的更多相關信息。 學習了這些基礎知識后， 你可能想看看 這個在 Egghead.io上的 高級 Webpack 課程。

在 Webpack中，每個模塊被打包到 bundle 之前都由一個相應的 “l(fā)oader” 來轉換，Vue 也提供 vue-loader 插件來執(zhí)行 .vue 單文件組件 的轉換. 這個 webpack-simple 模板已經(jīng)為你準備好了所有的東西，但是如果你想了解更多關于 .vue 組件和 Webpack 如何一起運轉的信息，你可以閱讀 vue-loader 的文檔。

針對高級用戶

無論你更鐘情 Webpack 或是 Browserify，我們?yōu)楹唵蔚暮透鼜碗s的項目都提供了一些文檔模板。我們建議瀏覽 github.com/vuejs-templates，找到你需要的部分，然后參考 README 中的說明，使用 vue-cli 工具生成新的項目。

Webpack 中，每個模塊在構建前被加載器轉變，Vue 官方插件 vue-loader 用來轉變 .vue單文件組件。 webpack-simple 模板已經(jīng)準備好了一切， 如果要更多了解 .vue 如何和 Webpack 配合工作， 請看 vue-loader 文檔。