## 介紹 在很多 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` 的簡單實例： <a href="https://gist.github.com/chrisvfritz/e2b6a6110e0829d78fa4aedf7cf6b235" target="_blank" rel="noopener noreferrer"><img src="/images/vue-component.png" alt="單文件組件的示例 (點擊查看文本版的代碼)" style="display: block; margin: 30px auto;"></a> 現在我們獲得： - [完整語法高亮](https://github.com/vuejs/awesome-vue#source-code-editing) - [CommonJS 模塊](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module) - [組件作用域的 CSS](https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html) 正如我們說過的，我們可以使用預處理器來構建簡潔和功能更豐富的組件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。 <a href="https://gist.github.com/chrisvfritz/1c9f2daea9bc078dcb47e9a82e5f7587" target="_blank" rel="noopener noreferrer"><img src="/images/vue-component-with-preprocessors.png" alt="帶預處理器的單文件組件的示例 (點擊查看文本版的代碼)" style="display: block; margin: 30px auto;"></a> 這些特定的語言只是例子，你可以只是簡單地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助你提高生產力的預處理器。如果搭配 `vue-loader` 使用 webpack，它也是把 CSS Modules 當作第一公民來對待的。 ### 怎么看待關注點分離？ 一個重要的事情值得注意，**關注點分離不等于文件類型分離。**在現代 UI 開發中，我們已經發現相比于把代碼庫分離成三個大的層次并將其相互交織起來，把它們劃分為松散耦合的組件再將其組合起來更合理一些。在一個組件里，其模板、邏輯和樣式是內部耦合的，并且把他們搭配在一起實際上使得組件更加內聚且更可維護。 即便你不喜歡單文件組件，你仍然可以把 JavaScript、CSS 分離成獨立的文件然后做到熱重載和預編譯。 ``` html <!-- 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 應用](https://codesandbox.io/s/o29j95wx9)。 ### 針對剛接觸 JavaScript 模塊開發系統的用戶 有了 `.vue` 組件，我們就進入了高級 JavaScript 應用領域。如果你沒有準備好的話，意味著還需要學會使用一些附加的工具： - **Node Package Manager (NPM)**：閱讀 [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) 直到 *10: Uninstalling global packages*章節。 - **Modern JavaScript with ES2015/16**：閱讀 Babel 的 [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/)。你不需要立刻記住每一個方法，但是你可以保留這個頁面以便后期參考。 在你花一天時間了解這些資源之后，我們建議你參考 [webpack](https://github.com/vuejs-templates/webpack) 模板。只要遵循指示，你就能很快地運行一個用到 `.vue` 組件，ES2015 和熱重載 (hot-reloading) 的 Vue 項目! 想學習更多 webpack 的知識，請移步[它們的官方文檔](https://webpack.js.org/configuration/)以及 [webpack learning academy](https://webpack.academy/p/the-core-concepts)。在 webpack 中，每個模塊被打包到 bundle 之前都由一個相應的“loader”來轉換，Vue 也提供 [vue-loader](https://github.com/vuejs/vue-loader) 插件來執行 `.vue` 單文件組件 的轉換。 ### 針對高級用戶 無論你更鐘情 webpack 或是 Browserify，我們為簡單的和更復雜的項目都提供了一些文檔模板。我們建議瀏覽 [github.com/vuejs-templates](https://github.com/vuejs-templates)，找到你需要的部分，然后參考 README 中的說明，使用 [vue-cli](https://github.com/vuejs/vue-cli) 工具生成新的項目。 模板中使用 [webpack](https://webpack.js.org/)，一個模塊加載器加載多個模塊然后構建成最終應用。為了進一步了解 webpack，可以看 [官方介紹視頻](https://www.youtube.com/watch?v=WQue1AN93YU)。如果你有基礎，可以看 [在 Egghead.io 上的 webpack 進階教程](https://egghead.io/courses/using-webpack-for-production-javascript-applications)。