Vue開發入門看這篇文章就夠了

摘要： 很多值得了解的細節。

• 原文： Vue開發看這篇文章就夠了
• 作者： Random

Fundebug

經授權轉載，版權歸原作者所有。

介紹

• Vue 中文網
• Vue github
• Vue.js 是一套建構使用者界面(UI)的漸進式JavaScript架構

庫和架構的差別

• 我們所說的前端架構與庫的差別？

Library

庫，本質上是一些函數的集合。每次調用函數，實作一個特定的功能，接着把

控制權

交給使用者

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

Framework

架構，是一套完整的解決方案，使用架構的時候，需要把你的代碼放到架構合适的地方，架構會在合适的時機調用你的代碼

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

主要差別

• You call Library, Framework calls you
• 核心點：誰起到主導作用（控制反轉）
  • 架構中控制整個流程的是架構
  • 使用庫，由開發人員決定如何調用庫中提供的方法（輔助）
• 好萊塢原則：Don't call us, we'll call you.
• 架構的侵入性很高（從頭到尾）

MVVM的介紹

• MVVM，一種更好的UI模式解決方案
• 從Script到Code Blocks、Code Behind到MVC、MVP、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雙向綁定的極簡實作

• 剖析Vue原理&實作雙向綁定MVVM

<!-- 示例 -->
<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);
  }
}           

推薦大家使用

，一款很好用的BUG監控工具~

指令

• 解釋：指令 (Directives) 是帶有

  v-

  字首的特殊屬性
• 作用：當表達式的值改變時，将其産生的連帶影響，響應式地作用于 DOM

v-text

• 解釋：更新DOM對象的 textContent

<h1 v-text="msg"></h1>           

v-html

• 解釋：更新DOM對象的 innerHTML

<h1 v-html="msg"></h1>
           

v-bind

• 文法：

  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"

  :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()

• 注意：這是一個常用的生命周期，可以調用methods中的方法、改變data中的資料
• vue執行個體生命周期 參考1
• vue執行個體生命周期 參考2
• 使用場景：發送請求擷取資料

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

// 在浏覽器中使用，直接引入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 剖析Vue原理&實作雙向綁定MVVM

元件

元件系統是 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>
           

内容分發

• 通過 标簽指定内容展示區域

案例：

<!-- 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解析擷取的資料, 展示在頁面中

傳統多頁面應用程式：

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

優勢

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

實作思路和技術點

• ajax
• 錨點的使用（window.location.hash #）
• hashchange 事件

  window.addEventListener("hashchange",function () {})

• 監聽錨點值變化的事件，根據不同的錨點值，請求相應的資料
• 原本用作頁面内部進行跳轉，定位并展示相應的内容

路由

• 路由即：浏覽器中的哈希值（# 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檔案）
• 遵循子產品的機制，想要什麼功能就加載什麼子產品
• 子產品化開發需要遵循規範

子產品化解決的問題

• 命名沖突
• 檔案依賴（加載檔案）
• 子產品的複用
• 統一規範和開發方式

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 的路徑解析方式
• 可以使用以下方式避開此設定：
  • 1 以.js結尾
  • 2 以 / 開始
  • 3 包含協定： https:// 或 http://

// 配置示例
    // 注意配置應當在使用之前
    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]

  捆綁，收集，歸攏，把…塞入
• webpack 将帶有依賴項的各個子產品打包處理後，變成了獨立的浏覽器能夠識别的檔案
• webpack 合并以及解析帶有依賴項的子產品

概述

webpack 是一個現代 JavaScript 應用程式的子產品打包器(特點 module、 bundler)

webpack 是一個子產品化方案（預編譯）

webpack擷取具有依賴關系的子產品，并生成表示這些子產品的靜态資源

• 四個核心概念：入口(entry)、輸出(output)、加載器loader、插件(plugins)

對比子產品化方案: webpack 和 requirejs（通過編寫代碼的方式将前端的功能，劃分成獨立的子產品）

• browserify 是與 webpack 相似的子產品化打包工具
• webpack 預編譯 (在開發階段通過webpack進行子產品化處理, 最終項目上線, 就不在依賴于 webpack)
• requirejs 線上的編譯( 代碼運作是需要依賴與 requirejs 的 )

webpack起源

webpack解決了現存子產品打包器的兩個痛點：

• Code Spliting - 代碼分離 按需加載
• 靜态資源的子產品化處理方案

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 中文網
• webpack 1.0
• webpack 2.x+
• 入門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 - Loaders
• webpack - 管理資源示例

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

• es2015-loose
• babel全家桶

• npm i -D babel-core babel-loader

• npm i -D babel-preset-env

基本使用（兩步）

• 第一步：

/* webpack.config.js */

module: {
  rules: [
    // exclude 排除，不需要編譯的目錄，提高編譯速度
    {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
  ]
}
           

• 第二步：在項目根目錄中建立

  .babelrc

  配置檔案

/* 建立 .babelrc 檔案*/
// 将來babel-loader運作的時候，會檢查這個配置檔案，并讀取相關的文法和插件配置
{
  "presets": ["env"]
}

           

babel的說明

babel的作用：

• 文法轉換：将新的ES文法轉化為浏覽器能識别的文法（babel-preset-*）
• 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')，存在的問題：

• 手動引入太繁瑣

  -多個檔案引入同一個helper（定義），造成代碼重複，增加代碼體積

babel-plugin-transform-runtime：

• 自動引入helper（比如，上面引入的 Promise）
• babel-runtime提供helper定義，引入這個helper即可使用，避免重複
• 依賴于 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)
})
           

單檔案元件使用步驟

• npm i -D vue-loader vue-template-compiler

• 在

  webpack.config.js

  中配置

  .vue

  檔案的loader

  • { test: /\.vue$/, use: 'vue-loader' }

• 建立

  App.vue

  單檔案元件，注意：App可以是任意名稱

• main.js

  入口檔案中，導入

  vue

  App.vue

  元件，通過 render 将元件與執行個體挂到一起

單檔案元件+路由

• vue - Vue.use
• Vue.use 和 路由

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 的移動端元件庫

快速開始

• 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 也是移動端的UI庫
• 使用：從github下載下傳包，找到dist檔案夾，隻需要導入樣式即可

// 隻需要導入 MUI的樣式 即可，根據MUI的例子，直接使用HTML結果即可
// 導入樣式
import './lib/mui/css/mui.min.css'
           

ElementUI

• 這是PC端的UI元件庫

• npm i -S element-ui

• 餓了嗎 - 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"
}
// 在項目根目錄中建立 webpack.prod.js 檔案
// 在 package.json 中, 配置一個 scripts
// 在 終端中 通過 npm run build 對項目進行打包
           

打包處理過程

• 删除掉 devServer 相關的配置項
• 将圖檔和字型檔案輸出到指定的檔案夾中
• 自動删除dist目錄
• 分離第三方包（将使用的vue等第三方包抽離到 vender.js 中）
• 壓縮混淆JS 以及 指定生成環境
• 抽取和壓縮CSS檔案
• 壓縮HTML頁面
• 配合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]'
    }
  }
},
           

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

• 安裝：抽離

  npm i -D extract-text-webpack-plugin

• 安裝：壓縮

  npm i -D optimize-css-assets-webpack-plugin

• webpack 抽離CSS文檔
• 壓縮抽離後的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-minifier

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

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

vue配合webpack實作路由按需加載

• Vue 路由懶加載
• Vue 異步元件
• Vue 元件懶加載淺析
• [Vue.js路由懶加載[譯]]( http://www.jianshu.com/p/abb0... )

步驟

• 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',
},