腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇

更新時(shí)間：2017年03月14日 10:39:52 作者：Terry√

這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。

Vue-loader 是什么？

vue-loader 是一個(gè)加載器，能把如下格式的 Vue 組件轉(zhuǎn)化成JavaScript模塊。

vue-loader 提供了一些非常酷炫的特性：

ES2015默認(rèn)可用；
在每個(gè) Vue 組件內(nèi)支持其他的 Webpack 加載器，如用于<style>的 SASS 和用于<template> 的 Jade。
把 <style> 和 <template> 內(nèi)引用的靜態(tài)資源作為模塊依賴項(xiàng)對(duì)待，并用Webpack 加載器處理。
對(duì)每個(gè)組件模擬有作用域的CSS。
開發(fā)階段支持組件的熱加載。

簡(jiǎn)單來說，webpack 和 vue-loader 的組合為你創(chuàng)作Vue應(yīng)用的一個(gè)更先進(jìn)、更靈巧的極其強(qiáng)大的前端開發(fā)模式。

Webpack 是什么？

如果你熟悉 Webpack 那就跳過這部分吧，但對(duì)于那些新手們，請(qǐng)看下這個(gè)簡(jiǎn)單介紹吧：

Webpack 是一個(gè)模塊打包工具。在開發(fā)中，它把一堆文件中每個(gè)都作為一個(gè)模塊處理，找出它們間的依賴關(guān)系，并打包成待發(fā)布的靜態(tài)資源。

列舉一個(gè)基本例子，設(shè)想我們有一堆的 CommonJS 的引用。它們是不能在瀏覽器直接運(yùn)行，所以需要把它們捆綁成 <script> 標(biāo)記內(nèi)的單一文件。Webpack 就能按照 require() 調(diào)用的依賴關(guān)系為我們做到這點(diǎn)。

實(shí)際上，Webpack 能做的更多，通過 "loaders" 我們能讓 Webpack 按照我們想要的任何方式打包輸出。例如：

編譯 ES2015、CoffeeScript 或 TypeScript 模塊成 ES5 CommonJS 的模塊；
編譯之前，可以通過 linter 校驗(yàn)源代碼。
編譯 Jade 模板成 HTML 并內(nèi)聯(lián) JavaScript 字符串。
編譯 SASS 文件成 CSS，然后把生成的CSS插入到 <style> 標(biāo)簽內(nèi)，然后再轉(zhuǎn)譯成 JavaScript 代碼段。
處理在 HTML 或 CSS 文件中引用的圖片文件，根據(jù)配置路徑把它們移動(dòng)到任意位置，根據(jù) MD5 hash 命名。
如果你學(xué)會(huì)了Webpack，就會(huì)知道它有多么強(qiáng)大，它非常顯著地改善你前端開發(fā)的效率。它主要的缺點(diǎn)是配置方式有點(diǎn)麻煩，但是有了我這份使用指南，那使用 Webpack + Vue + vue-loader 的時(shí)候，基本上就掃清了大多數(shù)障礙了。

Vue 組件規(guī)格

*.vue 文件是用戶用 HTML-like 的語法編寫的 Vue 組件。每個(gè) *.vue 文件都包括三部分 <template>, <script> 和 <style>:

<template>
 <div class="example">{{ msg }}</div>
</template>
<script>
export default {
 data () {
 return {
 msg: 'Hello world!'
 }
 }
}
</script>
<style>
.example {
 color: red;
}
</style>

vue-loader 解析文件，提取每個(gè)語言塊，讓他們通過需要的其他 loaders ，最后組裝起來，放回 CommonJS 的模塊，此模塊的 module.exports 就是個(gè) Vue.js 組件對(duì)象。

vue-loader 默認(rèn)用沒有用語言編譯器，想CSS 預(yù)編譯和HTML模板編譯語言等，如果想用這些功能，需要設(shè)置 lang 屬性的來實(shí)現(xiàn)。例如，你可以在組件的樣式中這樣用 SASS ：

<style lang="sass">
 /* 編寫 SASS! */
</style>

更多細(xì)節(jié)查看 [使用預(yù)編譯器]。

語言塊

默認(rèn)語言：html 。
每個(gè) *.vue 文件幾乎都包含一個(gè) <template> 塊。
<template> 內(nèi)的內(nèi)容字符串會(huì)被提取出來，用來編譯進(jìn) Vue 組件內(nèi)的 template 選項(xiàng)。

默認(rèn)語言：js（默認(rèn)ES2015也會(huì)通過Babel支持）。
每個(gè) *.vue 文件幾乎都包含一個(gè) <script> 塊。
腳本就像在CommonJS的環(huán)境中一樣被執(zhí)行（就像通過WebPACK中捆綁一個(gè)正常的.js模塊）。就是說你可以 require() 其他的依賴項(xiàng)。由于默認(rèn)支持 ES2015 ，你也可以用 import 和 export 語法。
該腳本必須導(dǎo)出一個(gè) Vue.js 組件選項(xiàng)對(duì)象，也支持導(dǎo)出一個(gè)用 Vue.extend() 創(chuàng)建的擴(kuò)展構(gòu)造函數(shù)，但首先是導(dǎo)出普通對(duì)象。

<style>

默認(rèn)語言：css。
每個(gè) *.vue 文件支持多個(gè) <style> 標(biāo)簽。
默認(rèn)，會(huì)通過 style-loader 把內(nèi)容提取并加載到文檔的 <head> 內(nèi)的 <style> 標(biāo)簽內(nèi)。這也是可以[通過配置 Webpack 使組件內(nèi)所有樣式提取到一個(gè)單一的CSS文件]。

Src Imports

如果你喜歡把你的 *.vue 組件拆分成多個(gè)文件，那么你可以用 src 屬性導(dǎo)入外部文件，代碼如下：

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

需要注意的是 src 導(dǎo)入要遵循和 CommonJS 的 require() 調(diào)用一樣的路徑解析規(guī)則，這就是說你需要用以 ./ 開頭的相對(duì)路徑，并且你可以直接從已安裝的 NPM 包內(nèi)導(dǎo)入資源，例如：

<!-- 從已安裝的 "todomvc-app-css" NPM 包內(nèi)導(dǎo)入文件 -->
<style src="todomvc-app-css/index.css">

語法高亮顯示

開發(fā)中的第一件事，你可能想讓 *.vue 組件能高亮顯示?，F(xiàn)階段，在 Sublime Text ， Atom ， Vim ， Visual Studio Code ， Brackets ，和 JetBrains products （WebStorm，PhpStorm，等）都有支持語法高亮顯示的插件。如果在 Vue 組件內(nèi)沒有使用任何預(yù)編譯器，那么編輯器就把 *.vue 文件當(dāng)成普通的 HTML 文件一樣。

注釋

在每個(gè)代碼塊內(nèi)，注釋的時(shí)候，需要使用各自語言的注釋語法去注釋（HTML、CSS、JavaScript、Jade 等）。在文件最頂部注釋的時(shí)候用HTML的注釋語法：<!— 在這里寫注釋的內(nèi)容 --> 。

項(xiàng)目設(shè)置

語法高亮

開發(fā)中的第一件事，你可能想讓 *.vue 組件能高亮顯示?，F(xiàn)階段，在 Sublime Text ， Atom ， Vim ， Visual Studio Code ， Brackets ，和 JetBrains products （WebStorm，PhpStorm，等）都有支持語法高亮顯示的插件。如果在 Vue 組件內(nèi)沒有使用任何預(yù)編譯器，那么編輯器就把 *.vue 文件當(dāng)成普通的 HTML 文件一樣。

使用 vue-cli

創(chuàng)建項(xiàng)目的時(shí)候推薦使用腳手架工具，可以用 vue-loader 和 vue-cli，命令行如下：

npm install -g vue-cli
vue init webpack-simple hello-vue
cd hello-vue
npm install
npm run dev # 一切就緒！

ES2015

當(dāng) vue-loader 檢測(cè)到 babel-loader 或者 buble-loader 在項(xiàng)目中存在的時(shí)候，將會(huì)用它們?nèi)ヌ幚硭?*.vue 文件的 <script> 部分，所以我們就可以在 Vue 組件中用 ES2015 。如果你還不熟悉這個(gè)新語言的話，最好去學(xué)一下：

Babel - Learn ES2015
ES6 Features
Exploring ES6 (book)

這里是一個(gè)引用其他 Vue 組件的典型模式，

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
 components: {
 ComponentA,
 ComponentB
 }
}
</script>

在這里用的就是 ES2015 精簡(jiǎn)的語法定義個(gè)子組件。{ ComponentA } 是指 { ComponentA: ComponentA } 。Vue會(huì)被自動(dòng)轉(zhuǎn)為 component-a，所以你就能在模板中引入組件 <component-a> 。

轉(zhuǎn)譯正常的 .js 文件

由于 vue-loader 只能處理 *.vue 文件，你需要在配置文件中告訴 Webpack 用 babel-loader 或者 buble-loader 。這點(diǎn)，可以用項(xiàng)目腳手架工具 vue-cli 。

用 .babelrc 文件來配置 Babel

.babelrc 可以控制 babel-loader ，并推薦這種方式來配置 Babel 預(yù)設(shè)插件。

Scoped CSS

當(dāng) <style> 標(biāo)簽有 scoped 屬性的時(shí)候，它的 CSS 就只能作用于當(dāng)前的組件。這就像樣式被封裝在 Shadow DOM 內(nèi)。這是用 PostCSS 轉(zhuǎn)譯實(shí)現(xiàn)的。如下：

<style scoped>
.example {
 color: red;
}
</style>

<template>
 <div class="example">hi</div>
</template>

轉(zhuǎn)換成：

<style>
.example[_v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" _v-f3f3eg9>hi</div>
</template>

注意

在同一組件內(nèi)，你能同時(shí)用有作用域和無作用域的樣式：

<style>
 /* global styles */
</style>

<style scoped>
 /* local styles */
</style>

父組件的有作用域的CSS和子組件的有作用域的CSS將同時(shí)影響子組件。
有作用域的樣式對(duì)其他部分沒有影響。
有作用域限定的樣式不排除類的需要. 由于瀏覽器渲染方式支持多種不同的CSS選擇器，加了作用域的 p { color: red } 會(huì)慢好多倍（即，和屬性選擇器組合時(shí)候的時(shí)候）。如果你用類或者id選擇器，比如 .example { color: red } ，你就能消除性能損失。這里有個(gè)練習(xí)場(chǎng) ，你可以比較測(cè)試下其中的差異。
在遞歸組件中小心后代選擇器！對(duì)于 CSS 規(guī)則的選擇器 .a .b，如果匹配 .a 的元素內(nèi)包含一個(gè)遞歸子組件，那么子組件中所有包含 .b 的元素都會(huì)被匹配到。

PostCSS

任何通過 vue-loader 處理過的 CSS 都再用 PostCSS重寫有作用域限制的 CSS 部分。你也能添加自定義的 PostCSS 插件處理，例如， autoprefixer 或 CSSNext。

在 Webpack 1.x 中的用法如下：

// webpack.config.js
module.exports = {
 // 其他配置...
 vue: {
 // 使用用戶自定義的 postcss 插件
 postcss: [require('postcss-cssnext')()]
 }
}

Webpack 2.x 中的用法:

// webpack.config.js
module.exports = {
 // 其他配置...
 plugins: [
 new webpack.LoaderOptionsPlugin({
  vue: {
  // 使用用戶自定義插件
  postcss: [require('postcss-cssnext')()]
  }
 })
 ]
}

除了接受插件的數(shù)組，postcss 選項(xiàng)也接受：

返回值是插件數(shù)組的方法；
包含被傳遞到PostCSS處理器選項(xiàng)的對(duì)象。當(dāng)你的項(xiàng)目依賴于自定義解析器或編譯器的時(shí)候，這就會(huì)很有用。

 postcss: {
 plugins: [...], // list of plugins
 options: {
  parser: sugarss // use sugarss parser
 }
 }

熱加載

“熱加載” 不只是當(dāng)你修改了文件簡(jiǎn)單地重新加載下頁面。當(dāng)啟用了熱加載功能，編寫完 *.vue 文件后，組件的所有的實(shí)例對(duì)象被替換，而頁面并沒有重新加載。仍然保持應(yīng)用原有的狀態(tài)。這在你調(diào)整模板或修改組件樣式的時(shí)候，大大改善了開發(fā)體驗(yàn)。