Vue.js 單檔案元件
單檔案元件
介紹
在很多 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 等構建工具。
這是一個檔名為 Hello.vue 的簡單例項：
現在我們獲得：
正如我們說過的，我們可以使用前處理器來構建簡潔和功能更豐富的元件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。
這些特定的語言只是例子，你可以只是簡單地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助你提高生產力的前處理器。如果搭配 vue-loader 使用 webpack，它也是把 CSS Modules 當作第一公民來對待的。
怎麼看待關注點分離？
一個重要的事情值得注意，關注點分離不等於檔案型別分離。在現代 UI 開發中，我們已經發現相比於把程式碼庫分離成三個大的層次並將其相互交織起來，把它們劃分為鬆散耦合的元件再將其組合起來更合理一些。在一個元件裡，其模板、邏輯和樣式是內部耦合的，並且把他們搭配在一起實際上使得元件更加內聚且更可維護。
即便你不喜歡單檔案元件，你仍然可以把 JavaScript、CSS 分離成獨立的檔案然後做到熱過載和預編譯。
<!-- my-component.vue --> <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style> |
起步
例子沙箱
如果你希望深入瞭解並開始使用單檔案元件，請來 CodeSandbox 看看這個簡單的 todo 應用。
針對剛接觸 JavaScript 模組開發系統的使用者
有了 .vue 元件，我們就進入了高階 JavaScript 應用領域。如果你沒有準備好的話，意味著還需要學會使用一些附加的工具：
-
Node Package Manager (NPM)：閱讀 Getting Started guide 直到 10: Uninstalling global packages章節。
-
Modern JavaScript with ES2015/16：閱讀 Babel 的 Learn ES2015 guide。你不需要立刻記住每一個方法，但是你可以保留這個頁面以便後期參考。
在你花一天時間瞭解這些資源之後，我們建議你參考 webpack 模板。只要遵循指示，你就能很快地執行一個用到 .vue 元件，ES2015 和熱過載 (hot-reloading) 的 Vue 專案!
想學習更多 webpack 的知識，請移步它們的官方文件以及 webpack learning academy。在 webpack 中，每個模組被打包到 bundle 之前都由一個相應的“loader”來轉換，Vue 也提供 vue-loader 外掛來執行 .vue 單檔案元件 的轉換。
針對高階使用者
無論你更鐘情 webpack 或是 Browserify，我們為簡單的和更復雜的專案都提供了一些文件模板。我們建議瀏覽 github.com/vuejs-templates，找到你需要的部分，然後參考 README 中的說明，使用 vue-cli 工具生成新的專案。
模板中使用 webpack，一個模組載入器載入多個模組然後構建成最終應用。為了進一步瞭解 webpack，可以看 官方介紹視訊。如果你有基礎，可以看 在 Egghead.io 上的 webpack 進階教程。
from: https://cn.vuejs.org/v2/guide/single-file-components.html