建站
咨詢
售后
建站咨詢
新聞中心
Vue.js 2.0 單文件組件介紹
在很多Vue項(xiàng)目中，我們使用 Vue.component 來定義全局組件，緊接著用 new Vue({ el: '#container '}) 在每個(gè)頁(yè)面內(nèi)指定一個(gè)容器元素。
創(chuàng)新互聯(lián)公司主營(yíng)鼓樓網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app開發(fā)定制,鼓樓h5小程序開發(fā)搭建,鼓樓網(wǎng)站營(yíng)銷推廣歡迎鼓樓等地區(qū)企業(yè)咨詢
這種方案在只是使用 JavaScript 增強(qiáng)某個(gè)視圖的中小型項(xiàng)目中表現(xiàn)得很好。然而在更復(fù)雜的項(xiàng)目中，或者當(dāng)你的前端完全采用 JavaScript 驅(qū)動(dòng)的時(shí)候，以下弊端就顯現(xià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
文件擴(kuò)展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 Webpack 或 Browserify 等構(gòu)建工具。
這是一個(gè)文件名為 Hello.vue 的簡(jiǎn)單實(shí)例：
現(xiàn)在我們獲得：
- 完整語(yǔ)法高亮
- CommonJS 模塊
- 組件化的 CSS
正如我們說過的，我們可以使用預(yù)處理器來構(gòu)建簡(jiǎn)潔和功能更豐富的組件，比如 Jade，Babel (with ES2015 modules)，和 Stylus。
這些特定的語(yǔ)言只是例子，你可以只是簡(jiǎn)單地使用 Buble，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助你提高生產(chǎn)力的預(yù)處理器。
起步
針對(duì)剛接觸 JavaScript 模塊開發(fā)系統(tǒng)的用戶
有了 .vue 組件，我們就進(jìn)入了高級(jí) JavaScirpt 應(yīng)用領(lǐng)域。如果你沒有準(zhǔn)備好的話，意味著還需要學(xué)會(huì)使用一些附加的工具：
- Node Package Manager (NPM)：閱讀 Getting Started guide 直到 10: Uninstalling global packages 章節(jié)。
- Modern JavaScript with ES2015/16：閱讀 Babel 的 Learn ES2015 guide. 你不需要立刻記住每一個(gè)方法，但是你可以保留這個(gè)頁(yè)面以便后期參考。
在你花一些時(shí)日了解這些資源之后，我們建議你參考 webpack-simple 。只要遵循指示，你就能很快的運(yùn)行一個(gè)用到 .vue 組件，ES2015 和 熱重載( hot-reloading ) 的Vue項(xiàng)目!
這個(gè)模板使用 Webpack，一個(gè)能將多個(gè)模塊打包成最終應(yīng)用的模塊打包工具。 這個(gè)視頻 介紹了Webpack的更多相關(guān)信息。 學(xué)習(xí)了這些基礎(chǔ)知識(shí)后， 你可能想看看 這個(gè)在 Egghead.io上的 高級(jí) Webpack 課程。
在 Webpack中，每個(gè)模塊被打包到 bundle 之前都由一個(gè)相應(yīng)的 “l(fā)oader” 來轉(zhuǎn)換，Vue 也提供 vue-loader 插件來執(zhí)行 .vue 單文件組件 的轉(zhuǎn)換. 這個(gè) webpack-simple 模板已經(jīng)為你準(zhǔn)備好了所有的東西，但是如果你想了解更多關(guān)于 .vue 組件和 Webpack 如何一起運(yùn)轉(zhuǎn)的信息，你可以閱讀 vue-loader 的文檔。
針對(duì)高級(jí)用戶
無(wú)論你更鐘情 Webpack 或是 Browserify，我們?yōu)楹?jiǎn)單的和更復(fù)雜的項(xiàng)目都提供了一些文檔模板。我們建議瀏覽 github.com/vuejs-templates，找到你需要的部分，然后參考 README 中的說明，使用 vue-cli 工具生成新的項(xiàng)目。
Webpack 中，每個(gè)模塊在構(gòu)建前被加載器轉(zhuǎn)變，Vue 官方插件 vue-loader 用來轉(zhuǎn)變 .vue單文件組件。 webpack-simple 模板已經(jīng)準(zhǔn)備好了一切， 如果要更多了解 .vue 如何和 Webpack 配合工作， 請(qǐng)看 vue-loader 文檔。
文章名稱：創(chuàng)新互聯(lián)VUE2教程：Vue.js2.0單文件組件
轉(zhuǎn)載注明：http://fisionsoft.com.cn/article/djjcdoh.html
