vue開發看這篇文章就夠了

一二三發表於2018-01-03
Vue

Vue -漸進式JavaScript框架

介紹

庫和框架的區別

Library

庫，本質上是一些函式的集合。每次呼叫函式，實現一個特定的功能，接著把控制權交給使用者

  • 代表：jQuery
  • jQuery這個庫的核心：DOM操作，即：封裝DOM操作，簡化DOM操作

Framework

框架，是一套完整的解決方案，使用框架的時候，需要把你的程式碼放到框架合適的地方，框架會在合適的時機呼叫你的程式碼

  • 框架規定了自己的程式設計方式，是一套完整的解決方案
  • 使用框架的時候，由框架控制一切，我們只需要按照規則寫程式碼

主要區別

  • You call Library, Framework calls you

  • 核心點：誰起到主導作用（控制反轉）

    • 框架中控制整個流程的是框架
    • 使用庫，由開發人員決定如何呼叫庫中提供的方法（輔助）
  • 好萊塢原則：Don`t call us, we`ll call you.
  • 框架的侵入性很高（從頭到尾）

MVVM的介紹

MVC

  • M: Model 資料模型（專門用來運算元據，資料的CRUD）
  • V：View 檢視（對於前端來說，就是頁面）
  • C：Controller 控制器（是檢視和資料模型溝通的橋樑，用於處理業務邏輯）

MVVM組成

  • MVVM ===> M / V / VM
  • M：model資料模型
  • V：view檢視
  • VM：ViewModel 檢視模型

優勢對比

  • MVC模式，將應用程式劃分為三大部分，實現了職責分離
  • 在前端中經常要通過 JS程式碼 來進行一些邏輯操作，最終還要把這些邏輯操作的結果現在頁面中。也就是需要頻繁的操作DOM

  • MVVM通過資料雙向繫結讓資料自動地雙向同步

    • V（修改資料） -> M
    • M（修改資料） -> V
    • 資料是核心
  • Vue這種MVVM模式的框架，不推薦開發人員手動操作DOM

Vue中的MVVM

雖然沒有完全遵循 MVVM 模型，Vue 的設計無疑受到了它的啟發。因此在文件中經常會使用 vm (ViewModel 的簡稱) 這個變數名錶示 Vue 例項

學習Vue要轉化思想

  • 不要在想著怎麼操作DOM，而是想著如何運算元據！！！

起步 – Hello Vue

  • 安裝：npm i -S vue 
<!-- 指定vue管理內容區域，需要通過vue展示的內容都要放到找個元素中  通常我們也把它叫做邊界 資料只在邊界內部解析-->
<div id="app">{{ msg }}</div>

<!-- 引入 vue.js -->
<script src="vue.js"></script>

<!-- 使用 vue -->
<script>
  var vm = new Vue({
    // el：提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標
    el: `#app`,
    // Vue 例項的資料物件，用於給 View 提供資料
    data: {
      msg: `Hello Vue`
    }
  })
</script>

Vue例項

  • 注意 1：先在data中宣告資料，再使用資料
  • 注意 2：可以通過 vm.$data 訪問到data中的所有屬性，或者 vm.msg 
var vm = new Vue({
  data: {
    msg: `大家好，...`
  }
})

vm.$data.msg === vm.msg // true

資料繫結

  • 最常用的方式：Mustache(插值語法)，也就是 {{}} 語法
  • 解釋：{{}}從資料物件data中獲取資料
  • 說明：資料物件的屬性值發生了改變，插值處的內容都會更新
  • 說明：{{}}中只能出現JavaScript表示式 而不能解析js語句
  • 注意：Mustache 語法不能作用在 HTML 元素的屬性上 
<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? `yes`: `no` }}</p>

<!-- ！！！錯誤示範！！！ -->
<h1 title="{{ err }}"></h1>

雙向資料繫結 Vue two way data binding

  • 雙向資料繫結：將DOM與Vue例項的data資料繫結到一起，彼此之間相互影響

    • 資料的改變會引起DOM的改變
    • DOM的改變也會引起資料的變化

  • 原理：Object.defineProperty中的get和set方法

    • getter和setter：訪問器
    • 作用：指定讀取或設定物件屬性值的時候，執行的操作
  • Vue – 深入響應式原理
  • MDN – Object.defineProperty()
/*  defineProperty語法 介紹 */
var obj = {}
Object.defineProperty(obj, `msg`, {
  // 設定 obj.msg = "1" 時set方法會被系統呼叫 引數分別是設定後和設定前的值
  set: function (newVal, oldVal) {  },
  // 讀取 obj.msg 時get方法會被系統呼叫
  get: function ( newVal, oldVal ) {}
})

Vue雙向繫結的極簡實現

<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>

<script>
var txt = document.getElementById(`txt`),
    sp = document.getElementById(`sp`),
    obj = {}

// 給物件obj新增msg屬性，並設定setter訪問器
Object.defineProperty(obj, `msg`, {
  // 設定 obj.msg  當obj.msg反生改變時set方法將會被呼叫  
  set: function (newVal) {
    // 當obj.msg被賦值時 同時設定給 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})

// 監聽文字框的改變 當文字框輸入內容時 改變obj.msg
txt.addEventListener(`keyup`, function (event) {
  obj.msg = event.target.value
})
</script>

動態新增資料的注意點

  • 注意：只有data中的資料才是響應式的，動態新增進來的資料預設為非響應式

  • 可以通過以下方式實現動態新增資料的響應式

    • 1 Vue.set(object, key, value) – 適用於新增單個屬性
    • 2 Object.assign() – 適用於新增多個屬性
var vm = new Vue({
  data: {
    stu: {
      name: `jack`,
      age: 19
    }
  }
})

/* Vue.set */
Vue.set(vm.stu, `gender`, `male`)

/* Object.assign 將引數中的所有物件屬性和值 合併到第一個引數 並返回合併後的物件*/
vm.stu = Object.assign({}, vm.stu, { gender: `female`, height: 180 })

非同步DOM更新

  • 說明：Vue 非同步執行 DOM 更新，監視所有資料改變，一次性更新DOM
  • 優勢：可以去除重複資料，對於避免不必要的計算和 避免重複 DOM 操作上，非常重要

  • 如果需要那到更新後dom中的資料 則需要通過 Vue.nextTick(callback)：在DOM更新後，執行某個操作（屬於DOM操作）

    • 例項呼叫vm.$nextTick(function () {}) 
methods: {
  fn() {
    this.msg = `change`
    this.$nextTick(function () {
      console.log(`$nextTick中列印：`, this.$el.children[0].innerText);
    })
    console.log(`直接列印：`, this.$el.children[0].innerText);
  }
}

指令

  • 解釋：指令 (Directives) 是帶有 v- 字首的特殊屬性
  • 作用：當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM

v-text

  • 解釋：更新DOM物件的 textContent
<h1 v-text="msg"></h1>

v-html

  • 解釋：更新DOM物件的 innerHTML
<h1 v-html="msg"></h1>

v-bind

  • 作用：當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM
  • 語法：v-bind:title="msg"
  • 簡寫：:title="msg" 
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on

  • 作用：繫結事件
  • 語法：v-on:click="say" or v-on:click="say(`引數`, $event)"
  • 簡寫：@click="say"
  • 說明：繫結的事件定義在methods 
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

事件修飾符

  • .stop 阻止冒泡，呼叫 event.stopPropagation()
  • .prevent 阻止預設行為，呼叫 event.preventDefault()
  • .capture 新增事件偵聽器時使用事件捕獲模式
  • .self 只當事件在該元素本身（比如不是子元素）觸發時，才會觸發事件
  • .once 事件只觸發一次

v-model

  • 作用：在表單元素上建立雙向資料繫結
  • 說明：監聽使用者的輸入事件以更新資料
  • 案例：計算器
<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-for

  • 作用：基於源資料多次渲染元素或模板塊
<!-- 1 基礎用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 為當前項，index 為索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 為值，key 為鍵，index 為索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

key屬性

  • 推薦：使用 v-for 的時候提供 key 屬性，以獲得效能提升。
  • 說明：使用 key，VUE會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。
  • vue key
  • vue key屬性的說明
<div v-for="item in items" :key="item.id">
  <!-- 內容 -->
</div>

樣式處理 -class和style

  • 使用方式：v-bind:class="expression" or :class="expression"
  • 表示式的型別：字串、陣列、物件（重點）
  • 語法：
<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===> 解析後
<div class="active"></div>

<!-- 2 -->
<div :class="[`active`, `text-danger`]"></div> ===>解析後
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析後
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, `font-size`: fontSize + `px` }"></div>
<!-- 2 將多個 樣式物件 應用到一個元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定義的物件 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if 和 v-show

  • 條件渲染
  • v-if：根據表示式的值的真假條件，銷燬或重建元素
  • v-show：根據表示式之真假值，切換元素的 display CSS 屬性
<p v-show="isShow">這個元素展示出來了嗎？？？</p>
<p v-if="isShow">這個元素，在HTML結構中嗎？？？</p>

提升效能：v-pre

  • 說明：vue會跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
<span v-pre>{{ this will not be compiled }}</span>

提升效能：v-once

  • 說明：vue只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
<span v-once>This will never change: {{msg}}</span>

過濾器 filter

  • 作用：文字資料格式化
  • 過濾器可以用在兩個地方：{{}}和 v-bind 表示式
  • 兩種過濾器：1 全域性過濾器 2 區域性過濾器

全域性過濾器

  • 說明：通過全域性方式建立的過濾器，在任何一個vue例項中都可以使用
  • 注意：使用全域性過濾器的時候，需要先建立全域性過濾器，再建立Vue例項
  • 顯示的內容由過濾器的返回值決定
Vue.filter(`filterName`, function (value) {
  // value 表示要過濾的內容
})
  • 示例：
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date(`YYYY-MM-DD hh:mm:ss`) }}</div>

<script>
  Vue.filter(`date`, function(value, format) {
    // value 要過濾的字串內容，比如：dateStr
    // format 過濾器的引數，比如：`YYYY-MM-DD hh:mm:ss`
  })
</script>

區域性過濾器

  • 說明：區域性過濾器是在某一個vue例項的內容建立的，只在當前例項中起作用
{
  data: {},
  // 通過 filters 屬性建立區域性過濾器
  // 注意：此處為 filters
  filters: {
    filterName: function(value, format) {}
  }
}

按鍵值修飾符

  • 說明：在監聽鍵盤事件時，Vue 允許為 v-on 在監聽鍵盤事件時新增關鍵修飾符
  • 鍵盤事件 – 鍵值修飾符
  • 其他：修飾鍵（.ctrl等）、滑鼠按鍵修飾符（.left等）
// 只有在 keyCode 是 13 時呼叫 vm.submit()
@keyup.13="submit"
// 使用全域性按鍵別名
@keyup.enter="add"

---

// 通過全域性 config.keyCodes 物件自定義鍵值修飾符別名
Vue.config.keyCodes.f2 = 113
// 使用自定義鍵值修飾符
@keyup.enter.f2="add"

監視資料變化 – watch

  • 概述：watch是一個物件，鍵是需要觀察的表示式，值是對應回撥函式
  • 作用：當表示式的值發生變化後，會呼叫對應的回撥函式完成響應的監視操作
  • VUE $watch
new Vue({
  data: { a: 1, b: { age: 10 } },
  watch: {
    a: function(val, oldVal) {
      // val 表示當前值
      // oldVal 表示舊值
      console.log(`當前值為：` + val, `舊值為：` + oldVal)
    },

    // 監聽物件屬性的變化
    b: {
      handler: function (val, oldVal) { /* ... */ },
      // deep : true表示是否監聽物件內部屬性值的變化 
      deep: true
    },

    // 只監視user物件中age屬性的變化
    `user.age`: function (val, oldVal) {
    },
  }
})

計算屬性

  • 說明：計算屬性是基於它們的依賴進行快取的，只有在它的依賴發生改變時才會重新求值
  • 注意：Mustache語法（{{}}）中不要放入太多的邏輯，否則會讓模板過重、難以理解和維護
  • 注意：computed中的屬性不能與data中的屬性同名，否則會報錯
  • Vue computed屬性原理
var vm = new Vue({
  el: `#app`,
  data: {
    firstname: `jack`,
    lastname: `rose`
  },
  computed: {
    fullname() {
      return this.firstname + `.` + this.lastname
    }
  }
})

例項生命週期

  • 所有的 Vue 元件都是 Vue 例項，並且接受相同的選項物件即可 (一些根例項特有的選項除外)。
  • 例項生命週期也叫做：元件生命週期

生命週期介紹

  • vue生命週期鉤子函式
  • 簡單說：一個元件從開始到最後消亡所經歷的各種狀態，就是一個元件的生命週期

生命週期鉤子函式的定義：從元件被建立，到元件掛載到頁面上執行，再到頁面關閉元件被解除安裝，這三個階段總是伴隨著元件各種各樣的事件，這些事件，統稱為元件的生命週期函式！

  • 注意：Vue在執行過程中會自動呼叫生命週期鉤子函式，我們只需要提供這些鉤子函式即可
  • 注意：鉤子函式的名稱都是Vue中規定好的！

鉤子函式 – beforeCreate()

  • 說明：在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫
  • 注意：此時，無法獲取 data中的資料、methods中的方法

鉤子函式 – created()

鉤子函式 – beforeMounted()

  • 說明：在掛載開始之前被呼叫

鉤子函式 – mounted()

  • 說明：此時，vue例項已經掛載到頁面中，可以獲取到el中的DOM元素，進行DOM操作

鉤子函式 – beforeUpdated()

  • 說明：資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
  • 注意：此處獲取的資料是更新後的資料，但是獲取頁面中的DOM元素是更新之前的

鉤子函式 – updated()

  • 說明：元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。

鉤子函式 – beforeDestroy()

  • 說明：例項銷燬之前呼叫。在這一步，例項仍然完全可用。
  • 使用場景：例項銷燬之前，執行清理任務，比如：清除定時器等

鉤子函式 – destroyed()

  • 說明：Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。

axios

  • Promise based HTTP client for the browser and node.js

    • 以Promise為基礎的HTTP客戶端，適用於：瀏覽器和node.js
    • 封裝ajax，用來傳送請求，非同步獲取資料
  • 安裝：npm i -S axios
  • axios
// 在瀏覽器中使用，直接引入js檔案使用下面的GET/POST請求方式即可
// 1 引入 axios.js
// 2 直接呼叫axios提供的API傳送請求
created: function () {
  axios.get(url)
    .then(function(resp) {})
}

---
// 配合 webpack 使用方式如下：
import Vue from `vue`
import axios from `axios`
// 將 axios 新增到 Vue.prototype 中
Vue.prototype.$axios = axios

---
// 在元件中使用：
methods: {
  getData() {
    this.$axios.get(`url`)
      .then(res => {})
      .catch(err => {})
  }
}

---
// API使用方式：

axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)

Get 請求

const url = `http://vue.studyit.io/api/getnewslist`

// url中帶有query引數
axios.get(`/user?id=89`)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// url和引數分離，使用物件
axios.get(`/user`, {
  params: {
    id: 12345
  }
})

Post 請求

  • 不同環境中處理 POST請求
  • 預設情況下，axios 會將JS物件序列化為JSON物件。為了使用 application/x-www-form-urlencoded 格式傳送請求，我們可以這樣：
// 使用 qs 包，處理將物件序列化為字串
// npm i -S qs
// var qs = require(`qs`)
import qs from `qs`
qs.stringify({ `bar`: 123 }) ===> "bar=123"
axios.post(`/foo`, qs.stringify({ `bar`: 123 }))

// 或者：
axios.post(`/foo`, `bar=123&age=19`)
const url = `http://vue.studyit.io/api/postcomment/17`
axios.post(url, `content=點個贊不過份`)

axios.post(`/user`, qs.stringify({
    firstName: `Fred`,
    lastName: `Flintstone`
  }))
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

全域性配置

// 設定請求公共路徑：
axios.defaults.baseURL = `http://vue.studyit.io`

攔截器

  • 攔截器會攔截髮送的每一個請求，請求傳送之前執行request中的函式，請求傳送完成之後執行response中的函式
// 請求攔截器
axios.interceptors.request.use(function (config) {
    // 所有請求之前都要執行的操作

    return config;
  }, function (error) {
    // 錯誤處理

    return Promise.reject(error);
  });

// 響應攔截器
axios.interceptors.response.use(function (response) {
    // 所有請求完成後都要執行的操作

    return response;
  }, function (error) {
    // 錯誤處理
    return Promise.reject(error);
  });

自定義指令

  • 作用：進行DOM操作
  • 使用場景：對純 DOM 元素進行底層操作，比如：文字框獲得焦點
  • vue 自定義指令用法例項
  • 兩種指令：1 全域性指令 2 區域性指令

全域性自定義指令

// 第一個引數：指令名稱
// 第二個引數：配置物件，指定指令的鉤子函式
Vue.directive(`directiveName`, {
  // bind中只能對元素自身進行DOM操作，而無法對父級元素操作
  // 只呼叫一次 指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
  bind( el，binding, vnode ) {
    // 引數詳解
    // el：指令所繫結的元素，可以用來直接操作 DOM 。
    // binding：一個物件，包含以下屬性：
      // name：指令名，不包括 v- 字首。
      // value：指令的繫結值，等號後面的值 。
      // oldValue：指令繫結的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
      // expression：字串形式的指令表示式 等號後面的字串 形式
      // arg：傳給指令的引數，可選。例如 v-my-directive:foo 中，引數為 "foo"。
      // modifiers：指令修飾符。例如：v-directive.foo.bar中，修飾符物件為 { foo: true, bar: true }。
    // vnode：Vue 編譯生成的虛擬節點。。
    // oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
  },
  // inserted這個鉤子函式呼叫的時候，當前元素已經插入頁面中了，也就是說可以獲取到父級節點了
  inserted (  el，binding, vnode ) {},
  //  DOM重新渲染前
  update(el，binding, vnode,oldVnode) {},
  // DOM重新渲染後
  componentUpdated ( el，binding, vnode,oldVnode ) {},
  // 只呼叫一次，指令與元素解綁時呼叫
  unbind ( el ) {
    // 指令所在的元素在頁面中消失，觸發
  }
})
// 簡寫 如果你想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子:
Vue.directive(`自定義指令名`, function( el, binding ) {})
// 例：
Vue.directive(`color`, function(el, binding) {
  el.style.color = binging.value
})
// 使用 注意直接些會被i成data中的資料“red” 需要字串則巢狀引號"`red`"
<p v-color="`red`"></p>

區域性自定義指令

var vm = new Vue({
  el : "#app",
  directives: {
    directiveName: { }
  }
})

元件

元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可複用的元件構建大型應用。仔細想想，幾乎任意型別的應用介面都可以抽象為一個元件樹

  • 建立元件的兩種方式：1 全域性元件 2 區域性元件

全域性元件

  • 說明：全域性元件在所有的vue例項中都可以使用
  • 注意：先註冊元件，再初始化根例項 
// 1 註冊全域性元件  
Vue.component(`my-component`, {
  // template 只能有一個根元素
  template: `<p>A custom component!</p>`,
  // 元件中的 `data` 必須是函式 並且函式的返回值必須是物件
  data() {
    return {
      msg: `注意：元件的data必須是一個函式！！！`
    }
  }
})

// 2 使用：以自定義元素的方式
<div id="example">
  <my-component></my-component>
</div>

// =====> 渲染結果
<div id="example">
  <p>A custom component!</p>
</div>


// 3 template屬性的值可以是：
  - 1 模板字串
  - 2 模板id  template: `#tpl`
<script type="text/x-template" id="tpl">
  <p>A custom component!</p>
</script>
  • extend：使用基礎 Vue 構造器，建立一個“子類”。引數是一個包含元件選項的物件。
// 註冊元件，傳入一個擴充套件過的構造器
Vue.component(`my-component`, Vue.extend({ /* ... */ }))

// 註冊元件，傳入一個選項物件 (自動呼叫 Vue.extend)
Vue.component(`my-component`, { /* ... */ })

var Home = Vue.extend({
  template: ``,
  data() {}
})
Vue.component(`home`, Home)

區域性元件

  • 說明：區域性元件，是在某一個具體的vue例項中定義的，只能在這個vue例項中使用
var Child = {
  template: `<div>A custom component!</div>`
}

new Vue({
  // 注意：此處為 components
  components: {
    // <my-component> 將只在當前vue例項中使用
    // my-component 為元件名 值為配置物件 
    `my-component`: {
      template: ``,
      data () { return { } },
      props : []
    }
  }
})

is特性

在某些特定的標籤中只能存在指定表恰 如ul > li 如果要瀏覽器正常解析則需要使用is

<!-- 案例 -->
<ul id="app">
  <!-- 不能識別 -->
  <my-li></my-li> 
  正常識別
  <li is="my-li"></li>
</ul>

<script>
  var vm = new Vue({
    el: "#app",
    components : {
      myLi : {
        template : `<li>內容</li>`
      }
    }
  })
</script>

元件通訊

父元件到子元件

  • 方式：通過子元件props屬性來傳遞資料 props是一個陣列
  • 注意：屬性的值必須在元件中通過props屬性顯示指定，否則，不會生效
  • 說明：傳遞過來的props屬性的用法與data屬性的用法相同
<div id="app">
  <!-- 如果需要往子元件總傳遞父元件data中的資料 需要加v-bind="資料名稱" -->
  <hello v-bind:msg="info"></hello>
  <!-- 如果傳遞的是字面量 那麼直接寫-->
  <hello my-msg="abc"></hello>
</div>

<!-- js -->
<script>
  new Vue({
    el: "#app",
    data : {
      info : 15
    },
    components: {
      hello: {
        // 建立props及其傳遞過來的屬性
        props: [`msg`, `myMsg`],
        template: `<h1>這是 hello 元件，這是訊息：{{msg}} --- {{myMsg}}</h1>`
      }
    }
  })
</script>

子元件到父元件

方式：父元件給子元件傳遞一個函式，由子元件呼叫這個函式

  • 說明：藉助vue中的自定義事件（v-on:cunstomFn=”fn”）

步驟:

  • 1、在父元件中定義方法 parentFn
  • 2、在子元件 元件引入標籤 中繫結自定義事件 v-on:自定義事件名=”父元件中的方法” ==> @pfn=”parentFn”
  • 3、子元件中通過$emit()觸發自定義事件事件 this.$emit(pfn,引數列表。。。)
<hello @pfn="parentFn"></hello>

<script>
  Vue.component(`hello`, {
    template: `<button @click="fn">按鈕</button>`,
    methods: {
      // 子元件：通過$emit呼叫
      fn() {
        this.$emit(`pfn`, `這是子元件傳遞給父元件的資料`)
      }
    }
  })
  new Vue({
    methods: {
      // 父元件：提供方法
      parentFn(data) {
        console.log(`父元件：`, data)
      }
    }
  })
</script>

非父子元件通訊

在簡單的場景下，可以使用一個空的 Vue 例項作為事件匯流排

  • $on()：繫結自定義事件
var bus = new Vue()

// 在元件 B 繫結自定義事件
bus.$on(`id-selected`, function (id) {
  // ...
})
// 觸發元件 A 中的事件
bus.$emit(`id-selected`, 1)
  • 示例：元件A —> 元件B
<!-- 元件A： -->
<com-a></com-a>
<!-- 元件B： -->
<com-b></com-b>

<script>
  // 中間元件
  var bus = new Vue()
  // 通訊元件
  var vm = new Vue({
    el: `#app`,
    components: {
      comB: {
        template: `<p>元件A告訴我：{{msg}}</p>`,
        data() {
          return {
            msg: ``
          }
        },
        created() {
          // 給中間元件繫結自定義事件 注意:如果用到this 需要用箭頭函式
          bus.$on(`tellComB`, (msg) => {
            this.msg = msg
          })
        }
      },
      comA: {
        template: `<button @click="emitFn">告訴B</button>`,
        methods: {
          emitFn() {
            // 觸發中間元件中的自定義事件
            bus.$emit(`tellComB`, `土豆土豆我是南瓜`)
          }
        }
      }
    }
  })
</script>

內容分發

  • 通過<slot></slot> 標籤指定內容展示區域

案例：

<!-- html程式碼 -->
<div id="app">
  <hello>
    <!-- 如果只有一個slot插槽 那麼不需要指定名稱 -->
    <p slot="插槽名稱">我是額外的內容</p>
  </hello>
</div>
// js程式碼
new vue({
  el : "#app",
  components : {
    hello : {
      template : `
          <div>
            <p>我是子元件中的內容</p>
            <slot name="名稱"></slot>
          </div>
        `
    }
  }
})

獲取元件（或元素） – refs

  • 說明：vm.$refs 一個物件，持有已註冊過 ref 的所有子元件（或HTML元素）
  • 使用：在 HTML元素 中，新增ref屬性，然後在JS中通過vm.$refs.屬性來獲取
  • 注意：如果獲取的是一個子元件，那麼通過ref就能獲取到子元件中的data和methods
<div id="app">
  <div ref="dv"></div>
  <my res="my"></my>
</div>

<!-- js -->
<script>
  new Vue({
    el : "#app",
    mounted() {
      this.$refs.dv //獲取到元素
      this.$refs.my //獲取到元件
    },
    components : {
      my : {
        template: `<a>sss</a>`
      }
    }
  })
</script>

SPA -單頁應用程式

SPA： Single Page Application

單頁Web應用（single page application，SPA），就是隻有一個Web頁面的應用，
是載入單個HTML頁面，並在使用者與應用程式互動時動態更新該頁面的Web應用程式。

  • 單頁面應用程式：

    • 只有第一次會載入頁面, 以後的每次請求, 僅僅是獲取必要的資料.然後, 由頁面中js解析獲取的資料, 展示在頁面中

  • 傳統多頁面應用程式：

    • 對於傳統的多頁面應用程式來說, 每次請求伺服器返回的都是一個完整的頁面

優勢

  • 1 減少了請求體積，加快頁面響應速度，降低了對伺服器的壓力
  • 2 更好的使用者體驗，讓使用者在web app感受native app的流暢

實現思路和技術點

  • 1 ajax
  • 2 錨點的使用（window.location.hash #）
  • 3 hashchange 事件 window.addEventListener(“hashchange”,function () {})
  • 4 監聽錨點值變化的事件，根據不同的錨點值，請求相應的資料
  • 5 原本用作頁面內部進行跳轉，定位並展示相應的內容

路由

  • 路由即：瀏覽器中的雜湊值（# hash）與展示檢視內容（template）之間的對應規則
  • vue中的路由是：hash 和 component的對應關係

    在 Web app 中，通過一個頁面來展示和管理整個應用的功能。
    SPA往往是功能複雜的應用，為了有效管理所有檢視內容，前端路由 應運而生！
    簡單來說，路由就是一套對映規則（一對一的對應規則），由開發人員制定規則。
    當URL中的雜湊值（# hash）發生改變後，路由會根據制定好的規則，展示對應的檢視內容

基本使用

  • 安裝：npm i -S vue-router
    <div id="app">
      <!-- 5 路由入口 指定跳轉到只定入口 -->
      <router-link to="/home">首頁</router-link>
      <router-link to="/login">登入</router-link>
    
      <!-- 7 路由出口：用來展示匹配路由檢視內容 -->
      <router-view></router-view>
    </div>
    
    <!-- 1 匯入 vue.js -->
    <script src="./vue.js"></script>
    <!-- 2 匯入 路由檔案 -->
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
      // 3 建立兩個元件
      const Home = Vue.component(`home`, {
        template: `<h1>這是 Home 元件</h1>`
      })
      const Login = Vue.component(`login`, {
        template: `<h1>這是 Login 元件</h1>`
      })
    
      // 4 建立路由物件
      const router = new VueRouter({
        routes: [
          // 路徑和元件一一對應
          { path: `/home`, component: Home },
          { path: `/login`, component: Login }
        ]
      })
    
      var vm = new Vue({
        el: `#app`,
        // 6 將路由例項掛載到vue例項
        router
      })
    </script>

重定向

//  將path 重定向到 redirect
{ path: `/`, redirect: `/home` }

路由其他配置

  • 路由導航高亮

    • 說明：當前匹配的導航連結，會自動新增router-link-exact-active router-link-active類
    • 配置：linkActiveClass

  • 匹配路由模式

    • 配置：mode
new Router({
  routers:[],
  mode: "hash", //預設hash | history 可以達到隱藏位址列hash值 | abstract，如果發現沒有瀏覽器的 API 則強制進入
  linkActiveClass : "now" //當前匹配的導航連結將被自動新增now類
})

路由引數

  • 說明：我們經常需要把某種模式匹配到的所有路由，全都對映到同一個元件，此時，可以通過路由引數來處理
  • 語法：/user/:id
  • 使用：當匹配到一個路由時，引數值會被設定到 this.$route.params
  • 其他：可以通過 $route.query 獲取到 URL 中的查詢引數 等
    // 方式一
    <router-link to="/user/1001">如果你需要在模版中使用路由引數 可以這樣 {{$router.params.id}}</router-link>
    // 方式二
    <router-link :to="{path:`/user`,query:{name:`jack`,age:18}}">使用者 Rose</router-link>


    <script>
    // 路由
    var router = new Router({
      routers : [
        // 方式一 注意 只有/user/1001這種形式能被匹配 /user | /user/ | /user/1001/ 都不能被匹配
        // 將來通過$router.params獲取引數返回 {id:1001}
        { path: `/user/:id`, component: User }, 
        // 方式二
        { path: "user" , component: User}
      ]
    })
    
    // User元件：
    const User = {
      template: `<div>User {{ $route.params.id }}</div>`
    }
    </script>  
    <!-- 如果要子啊vue例項中獲取路由引數 則使用this.$router.params 獲取路由引數物件 -->
    <!--  {{$router.query}} 獲取路由中的查詢字串 返回物件 -->

巢狀路由 – 子路由

  • 路由是可以巢狀的，即：路由中又包含子路由
  • 規則：父元件中包含 router-view，在路由規則中使用 children 配置
    // 父元件：
    const User = Vue.component(`user`, {
      template: `
        <div class="user">
          <h2>User Center</h2>
          <router-link to="/user/profile">個人資料</router-link>
          <router-link to="/user/posts">崗位</router-link>
          <!-- 子路由展示在此處 -->
          <router-view></router-view>
        </div>
        `
    })
    
    // 子元件[簡寫]
    const UserProfile = {
      template: `<h3>個人資料：張三</h3>`
    }
    const UserPosts = {
      template: `<h3>崗位：FE</h3>`
    }
    
    // 路由
    var router =new Router({
      routers : [

        { path: `/user`, component: User,
          // 子路由配置：
          children: [
            {
              // 當 /user/profile 匹配成功，
              // UserProfile 會被渲染在 User 的 <router-view> 中
              path: `profile`,
              component: UserProfile
            },
            {
              // 當 /user/posts 匹配成功
              // UserPosts 會被渲染在 User 的 <router-view> 中
              path: `posts`,
              component: UserPosts
            }
          ]
        }
      ]
    })

前端模組化

為什麼需要模組化

  • 1 最開始的js就是為了實現客戶端驗證以及一些簡單的效果
  • 2 後來，js得到重視，應用越來越廣泛，前端開發的複雜度越來越高
  • 3 舊版本的js中沒有提供與模組（module）相關的內容

模組的概念

  • 在js中，一個模組就是實現特定功能的檔案（js檔案）
  • 遵循模組的機制，想要什麼功能就載入什麼模組
  • 模組化開發需要遵循規範

模組化解決的問題

  • 1 命名衝突
  • 2 檔案依賴（載入檔案）
  • 3 模組的複用
  • 4 統一規範和開發方式

JS實現模組化的規範

  • AMD 瀏覽器端

    • requirejs

  • CommonJS nodejs

    • 載入模組：require()
    • 匯出模組：module.exports = {} / exports = {}
  • ES6 中的 import / export

  • CMD 瀏覽器端

    • 玉伯（阿里前端大神） -> seajs
  • UMD 通用模組化規範，可以相容 AMD、CommonJS、瀏覽器中沒有模組化規範 等這些語法

AMD 的使用

Asynchronous Module Definition：非同步模組定義，瀏覽器端模組開發的規範 代表：require.js 特點：模組被非同步載入，模組載入不影響後面語句的執行

1、定義模組

    // 語法:define(name, dependencies?, factory);
    // name表示：當前模組的名稱，是一個字串 可有可無
    // dependencies表示：當前模組的依賴項，是一個陣列無論依賴一項還是多項 無則不寫
    // factory表示：當前模組要完成的一些功能，是一個函式
    
    // 定義物件模組
    define({})
    // 定義方法模組
    define(function() {
      return {}
    })
    // 定義帶有依賴項的模組
    define([`js/a`], function() {})

2、載入模組

// - 注意：require的第一個引數必須是陣列

    // 引數必須是陣列 表示模組路徑 以當前檔案為基準,通過回撥函式中的引數獲取載入模組中的變數 引數與模組按照順序一一對應
    require([`a`, `js/b`], function(a, b) {
      // 使用模組a 和 模組b 中的程式碼
    })

3、路徑查詢配置

  • requirejs 預設使用 baseUrl+paths 的路徑解析方式

  • 可以使用以下方式避開此設定：

// 配置示例
    // 注意配置應當在使用之前
    require.config({
      baseUrl: `./js` // 配置基礎路徑為：當前目錄下的js目錄
    })
    require([`a`])    // 查詢 基礎路徑下的 ./js/a.js

// 簡化載入模組路徑
    require.config({
      baseUrl: `./js`,
      // 配置一次即可，直接通過路徑名稱（template || jquery）載入模組
      paths: {
        template: `assets/artTemplate/template-native`,
        jquery: `assets/jquery/jquery.min`
      }
    })
    // 載入jquery template模組
    require([`jquery`, `template`])

4、非模組化和依賴項支援

  • 1 新增模組的依賴模組，保證載入順序（deps）
  • 2 將非模組化模組，轉化為模組化（exports）
// 示例
    require.config({
      baseUrl: `./js`,
      paths: {
        // 配置路徑
        noModule: `assets/demo/noModule`
      },
      // 配置不符合規範的模組項
      shim: {
        // 模組名稱
        noModule: {
          deps: [],         // 依賴項
          exports: `sayHi`  // 匯出模組中存在的函式或變數
        }
      }
    });

// 注意點  如果定義模組的時候，指定了模組名稱，需要使用該名稱來引用模組
    // 定義 這個模組名稱與paths中的名稱相同
    define(`moduleA`, function() {})
    // 匯入
    require.config({
      paths: {
        // 此處的模組名：moduleA
        moduleA: `assets/demo/moduleA`
      }
    })

5、路徑載入規則

  • 路徑配置的優先順序：

    • 1 通過 config 配置規則查詢
    • 2 通過 data-main 指定的路徑查詢
    • 3 以引入 requirejs 的頁面所在路徑為準查詢
    <!-- 
      設定data-main屬性
      1 data-main屬性指定的檔案也會同時被載入
      2 用於指定查詢其他模組的基礎路徑
    -->
    <script src="js/require.js" data-main="js/main"></script>

Webpack

  • webpack 官網
  • bundle [ˈbʌndl] 捆綁，收集，歸攏，把…塞入
1 webpack 將帶有依賴項的各個模組打包處理後，變成了獨立的瀏覽器能夠識別的檔案
2 webpack 合併以及解析帶有依賴項的模組

概述

webpack 是一個現代 JavaScript 應用程式的模組打包器(特點 module、 bundler)
webpack 是一個模組化方案（預編譯）
webpack獲取具有依賴關係的模組，並生成表示這些模組的靜態資源

  • 四個核心概念：入口(entry)、輸出(output)、載入器loader、外掛(plugins) 
對比
模組化方案: webpack 和 requirejs（通過編寫程式碼的方式將前端的功能，劃分成獨立的模組）

browserify 是與 webpack 相似的模組化打包工具

webpack 預編譯 (在開發階段通過webpack進行模組化處理, 最終專案上線, 就不在依賴於 webpack)
requirejs 線上的編譯( 程式碼執行是需要依賴與 requirejs 的 )

webpack起源

  • webpack解決了現存模組打包器的兩個痛點：

    • 1 Code Spliting – 程式碼分離 按需載入
    • 2 靜態資源的模組化處理方案

webpack與模組

  • 前端模組系統的演進
  • 在webpack看來：所有的靜態資源都是模組
  • webpack 模組能夠識別以下等形式的模組之間的依賴：

  • JS的模組化規範：

    • ES2015 import export
    • CommonJS require() module.exports
    • AMD define 和 require

  • 非JS等靜態資源：

    • css/sass/less 檔案中的 @import
    • 圖片連線，比如：樣式 url(...) 或 HTML <img src=...>
    • 字型 等

webpack文件和資源

安裝webpack

  • 全域性安裝：npm i -g webpack

    • 目的：在任何目錄中通過CLI使用 webpack 這個命令

  • 專案安裝：npm i -D webpack

    • 目的：執行當前專案的構建

webpack的基本使用

  • 安裝：npm i -D webpack
  • webpack的兩種使用方式：1 命令列 2 配置檔案（webpack.config.js）

命令列方式演示 – 案例：隔行變色

  • 1 使用npm init -y 初始package.json，使用npm來管理專案中的包
  • 2 新建index.html和index.js，實現隔行變色功能
  • 3 執行webpack src/js/index.js dist/bundle.js進行打包構建，語法是：webpack 入口檔案 輸出檔案
  • 4 注意：需要在頁面中引入 輸出檔案 的路徑（此步驟可通過配置webpack去掉）
/*
  src/js/index.js
*/

// 1 匯入 jQuery
import $ from `jquery`
// 2 獲取頁面中的li元素
const $lis = $(`#ulList`).find(`li`)
// 3 隔行變色
// jQuery中的 filter() 方法用來過濾jquery物件
$lis.filter(`:odd`).css(`background-color`, `#def`)
$lis.filter(`:even`).css(`background-color`, `skyblue`)

//命令列執行 `webpack src/js/index.js   dist/bundle.js   目錄生成在命令列執行目錄
/*
  執行流程：
  1、webpack 根據入口找到入口檔案
  2、分析js中的模組化語法 
  3、將所有關聯檔案 打包合併輸出到出口
*/

webpack-dev-server 配置

一、package.json配置方式

  • 安裝：npm i -D webpack-dev-server
  • 作用：配合webpack，建立開發環境（啟動伺服器、監視檔案變化、自動編譯、重新整理瀏覽器等），提高開發效率
  • 注意：無法直接在終端中執行 webpack-dev-server，需要通過 package.json 的 scripts 實現
  • 使用方式：npm run dev 
// 引數解釋  注意引數是無序的 有值的引數空格隔開
// --open 自動開啟瀏覽器
// --contentBase ./  指定瀏覽器 預設開啟的頁面路徑中的 index.html 檔案
// --open 自動開啟瀏覽器
// --port 8080 埠號
// --hot 熱更新，只載入修改的檔案(按需載入修改的內容)，而非全部載入
"scripts": {
  "dev": "webpack-dev-server --open --contentBase ./ --port 8080 --hot"
}

二、webpack.config.js 配置方式(推薦)

var path = require(`path`)
module.exports = {
  // 入口檔案
  entry: path.join(__dirname, `src/js/index.js`),

  // 輸出檔案
  output: {
    path: path.join(__dirname, `dist`),   // 輸出檔案的路徑
    filename: `bundle.js`                 // 輸出檔案的名稱
  }
}

const webpack = require(`webpack`)

devServer: {
  // 伺服器的根目錄 Tell the server where to serve content from
  // https://webpack.js.org/configuration/dev-server/#devserver-contentbase
  contentBase: path.join(__dirname, `./`),
  // 自動開啟瀏覽器
  open: true,
  // 埠號
  port: 8888,

  // --------------- 1 熱更新 -----------------
  hot: true
},

plugins: [
  // ---------------- 2 啟用熱更新外掛 ----------------
  new webpack.HotModuleReplacementPlugin()
]

  • html-webpack-plugin 外掛

    • 安裝：npm i -D html-webpack-plugin
    • 作用：根據模板，自動生成html頁面
    • 優勢：頁面儲存在記憶體中，自動引入bundle.js、css等檔案
/* webpack.config.js */
const htmlWebpackPlugin = require(`html-webpack-plugin`)
plugins: [
  new htmlWebpackPlugin({
    // 模板頁面路徑
    template: path.join(__dirname, `./index.html`),
    // 在記憶體中生成頁面路徑，預設值為：index.html
    filename: `index.html`
  })
]

Loaders（載入器）

webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.

  • webpack只能處理JavaScript資源
  • webpack通過loaders處理非JavaScript靜態資源

1、 CSS打包

  • 安裝：npm i -D style-loader css-loader
  • 注意：use中模組的順序不能顛倒，載入順序：從右向左載入
/* 在index.js  匯入 css 檔案*/
import `./css/app.css`

/* webpack.config.js 配置各種資原始檔的loader載入器*/
module: {
  // 配置匹配規則
  rules: [
    // test 用來配置匹配檔案規則（正則）
    // use  是一個陣列，按照從後往前的順序執行載入
    {test: /.css$/, use: [`style-loader`, `css-loader`]},
  ]
}

2、 使用webpack打包sass檔案

  • 安裝：npm i -D sass-loader node-sass
  • 注意：sass-loader 依賴於 node-sass 模組
/* webpack.config.js */
// 參考：https://webpack.js.org/loaders/sass-loader/#examples
// "style-loader"  ：creates style nodes from JS strings 建立style標籤
// "css-loader"    ：translates CSS into CommonJS 將css轉化為CommonJS程式碼
// "sass-loader"   ：compiles Sass to CSS 將Sass編譯為css
module:{
  rules:[
    {test: /.(scss|sass)$/, use: [`style-loader`, `css-loader`, `sass-loader`]},
  ]
}

3、 圖片和字型打包

  • 安裝：npm i -D url-loader file-loader
  • file-loader：載入並重新命名檔案（圖片、字型 等）
  • url-loader：將圖片或字型轉化為base64編碼格式的字串，嵌入到樣式檔案中
/* webpack.config.js */
module: {
  rules:[
    // 打包 圖片檔案
    { test: /.(jpg|png|gif|jpeg)$/, use: `url-loader` },

    // 打包 字型檔案
    { test: /.(woff|woff2|eot|ttf|otf)$/, use: `file-loader` }
  ]
}

圖片打包細節

  • limit引數的作用：（單位為：位元組(byte)）

    • 當圖片檔案大小（位元組）小於指定的limit時，圖片被轉化為base64編碼格式
    • 當圖片檔案大小（位元組）大於等於指定的limit時，圖片被重新命名以url路徑形式載入（此時，需要file-loader來載入圖片）
  • 圖片檔案重新命名，保證相同檔案不會被載入多次。例如：一張圖片（a.jpg）拷貝一個副本（b.jpg），同時引入這兩張圖片，重新命名後只會載入一次，因為這兩張圖片就是同一張
  • 檔案重新命名以後，會通過MD5加密的方式，來計算這個檔案的名稱
/* webpack.config.js */

module: {
  rules: [
    // {test: /.(jpg|png|gif|jpeg)$/, use: `url-loader?limit=100`},
    {
      test: /.(jpg|png|gif|jpeg)$/,
      use: [
        {
          loader: `url-loader`,
          options: {
            limit: 8192
          }
        }
      ]
    }
  ]
}

字型檔案打包說明

  • 處理方式與圖片相同，可以使用：file-loader或url-loader

babel

基本使用（兩步）

  • 第一步：
/* webpack.config.js */

module: {
  rules: [
    // exclude 排除，不需要編譯的目錄，提高編譯速度
    {test: /.js$/, use: `babel-loader`, exclude: /node_modules/}
  ]
}
  • 第二步：在專案根目錄中新建.babelrc配置檔案
/* 建立 .babelrc 檔案*/
// 將來babel-loader執行的時候，會檢查這個配置檔案，並讀取相關的語法和外掛配置
{
  "presets": ["env"]
}

babel的說明

  • babel的作用：

    • 1 語法轉換：將新的ES語法轉化為瀏覽器能識別的語法（babel-preset-*）
    • 2 polyfill瀏覽器相容：讓低版本瀏覽器相容最新版ES的API

babel-preset-*

Babel通過語法轉換器，能夠支援最新版本的JavaScript語法
babel-preset-* 用來指定我們書寫的是什麼版本的JS程式碼

  • 作用：將新的ES語法轉化為瀏覽器能識別的ES5程式碼

  • ES6語法提案的批准流程

    • ES2015 也就是 ES6, 下一個版本是ES7, 從 ES6 到 ES7之間經歷了 5 個階段
    • babel-preset-es2015 轉換es6的語法
    • babel-preset-stage-0 轉換比es6更新的語法
Stage 0 - Strawman（展示階段）
Stage 1 - Proposal（徵求意見階段）
Stage 2 - Draft（草案階段）
Stage 3 - Candidate（候選人階段）
Stage 4 - Finished（定案階段）

Stage 0 is "i`ve got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let`s use polyfills and transpilers to play with it",
stage 3 is "let`s let browsers implement it and see how it goes",
stage 4 is "now it`s javascript".

babel-polyfill 和 transform-runtime

  • 作用：實現瀏覽器對不支援API的相容（相容舊環境、填補）

    • 在低版本瀏覽器中使用高階的ES6或ES7的方法或函式，比如：`abc`.padStart(10)
  • 方式一 polyfill
  • 方式二 transform-runtime
  • 方式一：npm i -S babel-polyfill

  • 方式二：npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime

    • 注意：babel-runtime包中的程式碼會被打包到你的程式碼中（-S）
區別：
polyfill 所有相容性問題，都可以通過polyfill解決（包括：例項方法）、汙染全域性環境
runtime  除了例項方法以外，其他相容新問題都能解決、不汙染全域性環境

polyfill：如果想要支援全域性物件（比如：`Promise`）、靜態方法（比如：`Object.assign`）或者**例項方法**（比如：`String.prototype.padStart`）等，那麼就需要使用`babel-polyfill`

babel-runtime ：提供了相容舊環境的函式，使用的時候，需要我們自己手動引入
  比如： const Promise = require(`babel-runtime/core-js/promise`)
  存在的問題：
    1 手動引入太繁瑣
    2 多個檔案引入同一個helper（定義），造成程式碼重複，增加程式碼體積
babel-plugin-transform-runtime：
    1 自動引入helper（比如，上面引入的 Promise）
    2 babel-runtime提供helper定義，引入這個helper即可使用，避免重複
    3 依賴於 babel-runtime 外掛

transform-runtime外掛的使用：
  直接在 .bablerc 檔案中，新增一個 plugins 的配置項即可！！！
  "plugins": [
    "transform-runtime"
  ]
/*
  babel-polyfill 的使用步驟：
  1 main.js
*/
// 第一行引入
require("babel-polyfill")

var s = `abc`.padStart(4)
console.log(s)


// 2 webpack.config.js 配置
module.exports = {
  entry: [`babel-polyfill`, `./js/main.js`]
}

總結

babel-core babel核心包

babel-loader 用來解析js檔案

babel-preset-* 新ES語法的解析和轉換

transform-runtime / babel-polyfill 相容舊瀏覽器，到達支援新API目的

// 判斷瀏覽器是否相容 padStart 這個 API
if (!String.prototype.padStart) {
  // 如果不相容, 就自己模擬 padStart的功能實現一份
  String.prototype.padStart = function padStart(targetLength,padString) {
  }
}

vue單檔案元件

  • vue-loader
  • single-file components(單檔案元件)
  • 字尾名：.vue，該檔案需要被預編譯後才能在瀏覽器中使用
  • 注意：單檔案元件依賴於兩個包 vue-loader / vue-template-compiler
  • 安裝：npm i -D vue-loader vue-template-compiler 
<!-- App.vue 示例程式碼： -->
<template>
  <div>
    <h1>VUE 單檔案元件示例 -- App.vue</h1>
    <p>這是 模板內容</p>
  </div>
</template>

<script>
  // 元件中的邏輯程式碼
  export default {}
</script>

<style>
/* 元件樣式 */
h1 {
  color: red;
}
</style>
// webpack.config.js 配置：
module: {
  rules: [
    {
      test: /.vue$/,
      loader: `vue-loader`
    }
  ]
}

使用單檔案元件

/* main.js */

import Vue from `vue`
// 匯入 App 元件
import App from `./App.vue`

const vm = new Vue({
  el: `#app`,
  // 通過 render 方法，渲染App元件
  render: c => c(App)
})

單檔案元件使用步驟

  • 1 安裝：npm i -D vue-loader vue-template-compiler

  • 2 在 webpack.config.js 中配置 .vue 檔案的loader

    • { test: /.vue$/, use: `vue-loader` }
  • 3 建立 App.vue 單檔案元件，注意：App可以是任意名稱
  • 4 在 main.js 入口檔案中，匯入 vue 和 App.vue元件，通過 render 將元件與例項掛到一起

單檔案元件+路由

import Vue from `vue`
import App from `./App.vue`

// ------------- vue路由配置 開始 --------------
import Home from `./components/home/Home.vue`
import Login from `./components/login/Login.vue`

// 1 匯入 路由模組
import VueRouter from `vue-router`
// 2 ** 呼叫use方法使用外掛 **
Vue.use(VueRouter)
// 3 建立路由物件
const router = new VueRouter({
  routes: [
    { path: `/home`, component: Home },
    { path: `/login`, component: Login }
  ]
})

// ------------- vue路由配置 結束 --------------

const vm = new Vue({
  el: `#app`,
  render: c => c(App),
  // 4 掛載到 vue 例項中
  router
})

Mint-UI

  • 基於 Vue.js 的移動端元件庫
  • Mint-UI

快速開始

  • 安裝：npm i -S mint-ui 
// 1 匯入 mint-ui模組
import MintUI from `mint-ui`
// 2 匯入 樣式
import `mint-ui/lib/style.css`
// 3 註冊外掛
Vue.use(MintUI)

MUI

  • MUI
  • MUI 也是移動端的UI庫
  • 使用：從github下載包，找到dist資料夾，只需要匯入樣式即可
// 只需要匯入 MUI的樣式 即可，根據MUI的例子，直接使用HTML結果即可
// 匯入樣式
import `./lib/mui/css/mui.min.css`

ElementUI

{
  "presets": [
    ["es2015", { "modules": false }], "stage-0"
  ],

  "plugins": [
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      },
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
      }
    ]]
  ]
}

Webpack 釋出專案

  • webpack 打包的各種坑
  • webpack 命令能夠生成dist目錄到磁碟中，最終，把打包後的程式碼，部署伺服器中去
  • webpack-dev-server 僅是在記憶體中生成的檔案，並沒有寫到磁碟中，所以，只能在開發期間使用

建立專案釋出配置檔案

  • 開發期間配置檔案：webpack.config.js
  • 專案釋出配置檔案：webpack.prod.js （檔名稱非固定 production 生產環境）
  • 命令：webpack --config webpack.prod.js 指定配置檔名稱執行webpack
  • 引數：--display-error-details 用於顯示webpack打包的錯誤資訊
/* package.json */

"scripts": {
  "build": "webpack --config webpack.prod.js"
}
1 在專案根目錄中建立 webpack.prod.js 檔案
2 在 package.json 中, 配置一個 scripts
3 在 終端中 通過 npm run build 對專案進行打包

打包處理過程

1 刪除掉 devServer 相關的配置項
2 將圖片和字型檔案輸出到指定的資料夾中
3 自動刪除dist目錄
4 分離第三方包（將使用的vue等第三方包抽離到 vender.js 中）
5 壓縮混淆JS 以及 指定生成環境
6 抽取和壓縮CSS檔案
7 壓縮HTML頁面
8 配合vue的非同步元件，實現按需載入功能

處理圖片路徑

  • 注意：如果limit小於比圖片大，那麼圖片將被轉化為base64編碼格式
  • name引數介紹
/* webpack.prod.js */
// 處理URL路徑的loader

{
  test: /.(jpg|png|gif|bmp|jpeg)$/,
  use: {
    loader: `url-loader`,
    options: {
      limit: 8192,
      name: `images/[hash:7].[ext]` // 作用：將圖片輸出到images資料夾中，檔名採用7位的雜湊值（MD5），並且保持原來的圖片副檔名

      // name：指定檔案輸出路徑和輸出檔案命令規則
      // [hash:7]：表示使用7位雜湊值代表檔名稱
      // [ext]：表示保持檔案原有字尾名
      // name: `imgs/img-[hash:7].[ext]`
    }
  }
},

自動刪除dist目錄

  • 安裝：npm i -D clean-webpack-plugin
  • 作用: 每次打包之前, 刪除上一次打包的dist目錄
/* webpack.prod.js */
const cleanWebpackPlugin = require(`clean-webpack-plugin`)

plugins: [
  // 建立一個刪除資料夾的外掛，刪除dist目錄
  new cleanWebpackPlugin([`./dist`])
]

分離第三方包

  • 目的：將公共的第三方包，抽離為一個單獨的包檔案，這樣防止重複打包！

    • 例如：main.js、router、vuex中都引入了vue，不分離的話，vue會被打包3次
    • 抽離後, vue檔案只會被打包一次, 用到的地方僅僅是引用
/* webpack.prod.js */

// 1 入口 -- 打包檔案的入口
entry: {
  // 專案程式碼入口
  app: path.join(__dirname, `./src/js/main.js`),
  // 第三方包入口
  vendor: [`vue`, `vue-router`, `axios`]
},

output: {
  // 2 修改輸出檔案路徑和命名規則
  filename: `js/[name].[chunkhash].js`,
},

plugins: [
  // 3 抽離第三方包
  new webpack.optimize.CommonsChunkPlugin({
    // 將 entry 中指定的 [`vue`, `vue-router`, `axios`] 打包到名為 vendor 的js檔案中
    // 第三方包入口名稱，對應 entry 中的 vendor 屬性
    name: `vendor`,
  }),
]

壓縮混淆JS

  • 注意：uglifyjs 無法壓縮ES6的程式碼 
plugins: [
  // 優化程式碼
  // https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6
  new webpack.optimize.UglifyJsPlugin({
    // 壓縮
    compress: {
      // 移除警告
      warnings: false
    }
  }),

  // 指定環境為生產環境：vue會根據這一項啟用壓縮後的vue檔案
  new webpack.DefinePlugin({
    `process.env`: {
      `NODE_ENV`: JSON.stringify(`production`)
    }
  })
]

抽取和壓縮CSS檔案

壓縮和抽離CSS報錯的說明：
Error processing file: css/style.css
postcss-svgo: Error in parsing SVG: Unquoted attribute value

原因：壓縮和抽離CSS的外掛中只允許 SVG 使用雙引號
/* webpack.prod.js */

// 分離 css 到獨立的檔案中
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 壓縮 css 資原始檔
const OptimizeCssAssetsPlugin = require(`optimize-css-assets-webpack-plugin`)

// bug描述: 生成後面的css檔案中圖片路徑錯誤，開啟頁面找不到圖片
// 解決：google搜尋 webpack css loader 樣式圖片路徑
output: {
  // ...

  // https://doc.webpack-china.org/configuration/output/#output-publicpath
  // 設定公共路徑
  publicPath: `/`,
},

module: {
  rules: [
    {
      test: /.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [`css-loader`, `sass-loader`]
      })
    },
  ]
},
plugins: [
  // 通過外掛抽離 css (引數)
  new ExtractTextPlugin("css/style.css"),
  // 抽離css 的輔助壓縮外掛
  new OptimizeCssAssetsPlugin()
]

壓縮HTML頁面

new htmlWebpackPlugin({
  // 模板頁面
  template: path.join(__dirname, `./index.html`),

  // 壓縮HTML
  minify: {
    // 移除空白
    collapseWhitespace: true,
    // 移除註釋
    removeComments: true,
    // 移除屬性中的雙引號
    removeAttributeQuotes: true
  }
}),

vue配合webpack實現路由按需載入

步驟

  • 1 修改元件的引用方式
// 方式一: require.ensure()
const NewsList = r => require.ensure([], () => r(require(`../components/news/newslist.vue`)), `news`)

// 方式二: import() -- 推薦
// 注意：/* webpackChunkName: "newsinfo" */ 是一個特殊的語法，表示生成js檔案的名稱
const NewsInfo = () => import(/* webpackChunkName: "newsinfo" */ `../components/news/newsinfo.vue`)
  • 2 修改 webpack 配置檔案的output
output: {
  // ------新增 chunkFilename, 指定輸出js檔案的名稱------
  chunkFilename: `js/[name].[chunkhash].js`,
},

相關文章