#介紹

在很多 Vue 項(xiàng)目中，我們使用 app.component 來(lái)定義全局組件，緊接著用 app.mount('#app') 在每個(gè)頁(yè)面內(nèi)指定一個(gè)容器元素。

這種方式在很多中小規(guī)模的項(xiàng)目中運(yùn)作的很好，在這些項(xiàng)目里 JavaScript 只被用來(lái)加強(qiáng)特定的視圖。但當(dāng)在更復(fù)雜的項(xiàng)目中，或者你的前端完全由 JavaScript 驅(qū)動(dòng)的時(shí)候，下面這些缺點(diǎn)將變得非常明顯：

• 全局定義 (Global definitions) 強(qiáng)制要求每個(gè) component 中的命名不得重復(fù)
• 字符串模板 (String templates) 缺乏語(yǔ)法高亮，在 HTML 有多行的時(shí)候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味著當(dāng) HTML 和 JavaScript 組件化時(shí)，CSS 明顯被遺漏
• 沒有構(gòu)建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用預(yù)處理器，如 Pug (formerly Jade) 和 Babel

所有這些都可以通過(guò)擴(kuò)展名為 .vue 的 single-file components (單文件組件) 來(lái)解決，并且還可以使用 webpack 或 Browserify 等構(gòu)建工具。

這是一個(gè)文件名為 Hello.vue 的簡(jiǎn)單實(shí)例：

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

• 完整語(yǔ)法高亮
• CommonJS 模塊
• 組件作用域的 CSS

正如我們說(shuō)過(guò)的，我們可以使用預(yù)處理器來(lái)構(gòu)建簡(jiǎn)潔和功能更豐富的組件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。

這些特定的語(yǔ)言只是例子，你可以只是簡(jiǎn)單地使用 Babel，TypeScript，SCSS，PostCSS 或者其他任何能夠幫助你提高生產(chǎn)力的預(yù)處理器。如果搭配 vue-loader 使用 webpack，它也能為 CSS Modules 提供頭等支持。

#怎么看待關(guān)注點(diǎn)分離？

一個(gè)重要的事情值得注意，關(guān)注點(diǎn)分離不等于文件類型分離。在現(xiàn)代 UI 開發(fā)中，我們已經(jīng)發(fā)現(xiàn)相比于把代碼庫(kù)分離成三個(gè)大的層次并將其相互交織起來(lái)，把它們劃分為松散耦合的組件再將其組合起來(lái)更合理一些。在一個(gè)組件里，其模板、邏輯和樣式是內(nèi)部耦合的，并且把他們搭配在一起實(shí)際上使得組件更加內(nèi)聚且更可維護(hù)。

即便你不喜歡單文件組件，你仍然可以把 JavaScript、CSS 分離成獨(dú)立的文件然后做到熱重載和預(yù)編譯。

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

#起步

#例子沙箱

如果你希望深入了解并開始使用單文件組件，請(qǐng)來(lái) CodeSandbox 看看這個(gè)簡(jiǎn)單的 todo 應(yīng)用。

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

有了 .vue 組件，我們就進(jìn)入了高階 JavaScript 應(yīng)用領(lǐng)域。如果你沒有準(zhǔn)備好的話，意味著還需要學(xué)會(huì)使用一些附加的工具：

• Node 包管理器 (npm)： 閱讀 Getting Started guide 中關(guān)于如何從注冊(cè)地 (registry) 獲取包的章節(jié)。
• 現(xiàn)代 JavaScript 與 ES2015/16：閱讀 Babel 的 Learn ES2015 guide。你不需要立刻記住每一個(gè)方法，但是你可以保留這個(gè)頁(yè)面以便后期參考。

在你花一天時(shí)間了解這些資源之后，我們建議你參考 Vue CLI。只要遵循指示，你就能很快地運(yùn)行一個(gè)帶有 .vue 組件、ES2015、webpack 和熱重載 (hot-reloading) 的 Vue 項(xiàng)目！

#針對(duì)高階用戶

CLI 會(huì)為你搞定大多數(shù)工具的配置問(wèn)題，同時(shí)也支持細(xì)粒度自定義配置項(xiàng)。

有時(shí)你會(huì)想從零搭建你自己的構(gòu)建工具，這時(shí)你需要通過(guò) Vue Loader 手動(dòng)配置 webpack。關(guān)于學(xué)習(xí)更多 webpack 的內(nèi)容，請(qǐng)查閱其官方文檔和 Webpack Academy。