Vue + Webpack + Vue-loader 系列教程（1）功能介紹篇

時間 2020-07-10

標籤 vue webpack loader 系列教程功能介紹简体版

原文原文鏈接

原文地址：https://lvyongbo.gitbooks.io/vue-loader/content/php

Vue-loader 是什麼？

vue-loader 是一個加載器，能把以下格式的 Vue 組件轉化成JavaScript模塊。

vue-loader 提供了一些很是酷炫的特性：css

ES2015默承認用；
在每一個 Vue 組件內支持其餘的 Webpack 加載器，如用於<style>的 SASS 和用於<template> 的 Jade。
把 <style> 和 <template> 內引用的靜態資源做爲模塊依賴項對待，並用Webpack 加載器處理。
對每一個組件模擬有做用域的CSS。
開發階段支持組件的熱加載。
簡單來講，webpack 和 vue-loader 的組合爲你創做Vue應用的一個更先進、更靈巧的極其強大的前端開發模式。

Webpack 是什麼？

若是你熟悉 Webpack 那就跳過這部分吧，但對於那些新手們，請看下這個簡單介紹吧：html

Webpack 是一個模塊打包工具。在開發中，它把一堆文件中每一個都做爲一個模塊處理，找出它們間的依賴關係，並打包成待發布的靜態資源。前端

列舉一個基本例子，設想咱們有一堆的 CommonJS 的引用。它們是不能在瀏覽器直接運行，因此須要把它們捆綁成 <script> 標記內的單一文件。Webpack 就能按照 require() 調用的依賴關係爲咱們作到這點。vue

實際上，Webpack 能作的更多，經過 "loaders" 咱們能讓 Webpack 按照咱們想要的任何方式打包輸出。例如：webpack

編譯 ES201五、CoffeeScript 或 TypeScript 模塊成 ES5 CommonJS 的模塊；git
編譯以前，能夠經過 linter 校驗源代碼。es6
編譯 Jade 模板成 HTML 並內聯 JavaScript 字符串。github
編譯 SASS 文件成 CSS，而後把生成的CSS插入到 <style> 標籤內，而後再轉譯成 JavaScript 代碼段。web
處理在 HTML 或 CSS 文件中引用的圖片文件，根據配置路徑把它們移動到任意位置，根據 MD5 hash 命名。
若是你學會了Webpack，就會知道它有多麼強大，它很是顯著地改善你前端開發的效率。它主要的缺點是配置方式有點麻煩，可是有了我這份使用指南，那使用 Webpack + Vue + vue-loader 的時候，基本上就掃清了大多數障礙了。

Vue 組件規格

*.vue 文件是用戶用 HTML-like 的語法編寫的 Vue 組件。每一個 *.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 解析文件，提取每一個語言塊，讓他們經過須要的其餘 loaders ，最後組裝起來，放回 CommonJS 的模塊，此模塊的 module.exports 就是個 Vue.js 組件對象。

vue-loader 默認用沒有用語言編譯器，想CSS 預編譯和HTML模板編譯語言等，若是想用這些功能，須要設置 lang 屬性的來實現。例如，你能夠在組件的樣式中這樣用 SASS ：

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

更多細節查看 [使用預編譯器]。

語言塊

`<template>`

默認語言：html 。
每一個 *.vue 文件幾乎都包含一個 <template> 塊。
<template> 內的內容字符串會被提取出來，用來編譯進 Vue 組件內的 template 選項。

`<script>`

默認語言：js（默認ES2015也會經過Babel支持）。
每一個 *.vue 文件幾乎都包含一個 <script> 塊。
腳本就像在CommonJS的環境中同樣被執行（就像經過WebPACK中捆綁一個正常的.js模塊）。就是說你能夠 require() 其餘的依賴項。因爲默認支持 ES2015 ，你也能夠用 import 和 export 語法。
該腳本必須導出一個 Vue.js 組件選項對象，也支持導出一個用 Vue.extend() 建立的擴展構造函數，但首先是導出普通對象。

`<style>`

默認語言：css。
每一個 *.vue 文件支持多個 <style> 標籤。
默認，會經過 style-loader 把內容提取並加載到文檔的 <head> 內的 <style> 標籤內。這也是能夠[經過配置 Webpack 使組件內全部樣式提取到一個單一的CSS文件]。

Src Imports

若是你喜歡把你的 *.vue 組件拆分紅多個文件，那麼你能夠用 src 屬性導入外部文件，代碼以下：

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

須要注意的是 src 導入要遵循和 CommonJS 的 require() 調用同樣的路徑解析規則，這就是說你須要用以 ./ 開頭的相對路徑，而且你能夠直接從已安裝的 NPM 包內導入資源，例如：

<!-- 從已安裝的 "todomvc-app-css" NPM 包內導入文件 -->
<style src="todomvc-app-css/index.css">

語法高亮顯示

開發中的第一件事，你可能想讓 *.vue 組件能高亮顯示。現階段，在 Sublime Text ， Atom ， Vim ， Visual Studio Code ， Brackets ，和 JetBrains products （WebStorm，PhpStorm，等）都有支持語法高亮顯示的插件。若是在 Vue 組件內沒有使用任何預編譯器，那麼編輯器就把 *.vue 文件當成普通的 HTML 文件同樣。

註釋

在每一個代碼塊內，註釋的時候，須要使用各自語言的註釋語法去註釋（HTML、CSS、JavaScript、Jade 等）。在文件最頂部註釋的時候用HTML的註釋語法：<!— 在這裏寫註釋的內容 --> 。

項目設置

語法高亮

使用 `vue-cli`

建立項目的時候推薦使用腳手架工具，能夠用 vue-loader 和 vue-cli，命令行以下：

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

ES2015

當 vue-loader 檢測到 babel-loader 或者 buble-loader 在項目中存在的時候，將會用它們去處理全部 *.vue 文件的 <script> 部分，因此咱們就能夠在 Vue 組件中用 ES2015 。若是你還不熟悉這個新語言的話，最好去學一下：

這裏是一個引用其餘 Vue 組件的典型模式，

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

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

在這裏用的就是 ES2015 精簡的語法定義個子組件。{ ComponentA } 是指 { ComponentA: ComponentA } 。Vue會被自動轉爲 component-a，因此你就能在模板中引入組件 <component-a> 。

轉譯正常的 `.js` 文件

因爲 vue-loader 只能處理 *.vue 文件，你須要在配置文件中告訴 Webpack 用 babel-loader 或者 buble-loader 。這點，能夠用項目腳手架工具 vue-cli 。

用 `.babelrc` 文件來配置 Babel

.babelrc 能夠控制 babel-loader ，並推薦這種方式來配置 Babel 預設插件。

Scoped CSS

當 <style> 標籤有 scoped 屬性的時候，它的 CSS 就只能做用於當前的組件。這就像樣式被封裝在 Shadow DOM 內。這是用 PostCSS 轉譯實現的。以下：

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

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

轉換成：

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

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

注意

在同一組件內，你能同時用有做用域和無做用域的樣式：

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

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

父組件的有做用域的CSS和子組件的有做用域的CSS將同時影響子組件。
有做用域的樣式對其餘部分沒有影響。
有做用域限定的樣式不排除類的須要. 因爲瀏覽器渲染方式支持多種不一樣的CSS選擇器，加了做用域的 p { color: red } 會慢好多倍（即，和屬性選擇器組合時候的時候）。若是你用類或者id選擇器，好比 .example { color: red } ，你就能消除性能損失。這裏有個練習場，你能夠比較測試下其中的差別。
在遞歸組件中當心後代選擇器！ 對於 CSS 規則的選擇器 .a .b，若是匹配 .a 的元素內包含一個遞歸子組件，那麼子組件中全部包含 .b 的元素都會被匹配到。

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')()]
      }
    })
  ]
}

除了接受插件的數組，postcss 選項也接受：

返回值是插件數組的方法；
包含被傳遞到PostCSS處理器選項的對象。當你的項目依賴於自定義解析器或編譯器的時候，這就會頗有用。

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

熱加載

「熱加載」不僅是當你修改了文件簡單地從新加載下頁面。當啓用了熱加載功能，編寫完 *.vue 文件後，組件的全部的實例對象被替換，而頁面並無從新加載。仍然保持應用原有的狀態。這在你調整模板或修改組件樣式的時候，大大改善了開發體驗。

當使用項目的腳手架工具 vue-cli ，熱加載自動啓用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。