介紹

• Vue 中文網(wǎng)

• Vue github

• Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架

庫(kù)和框架的區(qū)別

• 我們所說(shuō)的前端框架與庫(kù)的區(qū)別？

Library

庫(kù)，本質(zhì)上是一些函數(shù)的集合。每次調(diào)用函數(shù)，實(shí)現(xiàn)一個(gè)特定的功能，接著把控制權(quán)交給使用者

• 代表：jQuery

• jQuery這個(gè)庫(kù)的核心：DOM操作，即：封裝DOM操作，簡(jiǎn)化DOM操作

Framework

框架，是一套完整的解決方案，使用框架的時(shí)候，需要把你的代碼放到框架合適的地方，框架會(huì)在合適的時(shí)機(jī)調(diào)用你的代碼

• 框架規(guī)定了自己的編程方式，是一套完整的解決方案

• 使用框架的時(shí)候，由框架控制一切，我們只需要按照規(guī)則寫代碼

主要區(qū)別

• You call Library, Framework calls you

• 核心點(diǎn)：誰(shuí)起到主導(dǎo)作用（控制反轉(zhuǎn)）

• 框架中控制整個(gè)流程的是框架

• 使用庫(kù)，由開(kāi)發(fā)人員決定如何調(diào)用庫(kù)中提供的方法（輔助）

• 好萊塢原則：Don't call us, we'll call you.

• 框架的侵入性很高（從頭到尾）

MVVM的介紹

• MVVM，一種更好的UI模式解決方案

• 從Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普

MVC

• M: Model 數(shù)據(jù)模型（專門用來(lái)操作數(shù)據(jù)，數(shù)據(jù)的CRUD）

• V：View 視圖（對(duì)于前端來(lái)說(shuō)，就是頁(yè)面）

• C：Controller 控制器（是視圖和數(shù)據(jù)模型溝通的橋梁，用于處理業(yè)務(wù)邏輯）

MVVM組成

• MVVM => M / V / VM

• M：model數(shù)據(jù)模型

• V：view視圖

• VM：ViewModel 視圖模型

優(yōu)勢(shì)對(duì)比

• MVC模式，將應(yīng)用程序劃分為三大部分，實(shí)現(xiàn)了職責(zé)分離

• 在前端中經(jīng)常要通過(guò) JS代碼 來(lái)進(jìn)行一些邏輯操作，最終還要把這些邏輯操作的結(jié)果現(xiàn)在頁(yè)面中。也就是需要頻繁的操作DOM

• MVVM通過(guò)數(shù)據(jù)雙向綁定讓數(shù)據(jù)自動(dòng)地雙向同步

• V（修改數(shù)據(jù)） -> M

• M（修改數(shù)據(jù)） -> V

• 數(shù)據(jù)是核心

• Vue這種MVVM模式的框架，不推薦開(kāi)發(fā)人員手動(dòng)操作DOM

Vue中的MVVM

雖然沒(méi)有完全遵循 MVVM 模型，Vue 的設(shè)計(jì)無(wú)疑受到了它的啟發(fā)。因此在文檔中經(jīng)常會(huì)使用 vm (ViewModel 的簡(jiǎn)稱) 這個(gè)變量名表示 Vue 實(shí)例

學(xué)習(xí)Vue要轉(zhuǎn)化思想

• 不要在想著怎么操作DOM，而是想著如何操作數(shù)據(jù)?。?！

起步 - Hello Vue

• 安裝：npm i -S vue

<!-- 指定vue管理內(nèi)容區(qū)域，需要通過(guò)vue展示的內(nèi)容都要放到找個(gè)元素中 ?通常我們也把它叫做邊界 數(shù)據(jù)只在邊界內(nèi)部解析--> <div id="app">{{ msg }}</div> <!-- 引入 vue.js --> <script src="vue.js"></script> <!-- 使用 vue --> <script> ?var vm = new Vue({ ? ?// el：提供一個(gè)在頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo) ? ?el: '#app', ? ?// Vue 實(shí)例的數(shù)據(jù)對(duì)象，用于給 View 提供數(shù)據(jù) ? ?data: { ? ? ?msg: 'Hello Vue' ? ?} ?}) </script>

Vue實(shí)例

• 注意 1：先在data中聲明數(shù)據(jù)，再使用數(shù)據(jù)

• 注意 2：可以通過(guò) vm.$data 訪問(wèn)到data中的所有屬性，或者 vm.msg

var vm = new Vue({ ?data: { ? ?msg: '大家好，...' ?} }) vm.$data.msg === vm.msg // true

數(shù)據(jù)綁定

• 最常用的方式：Mustache(插值語(yǔ)法)，也就是 {{}} 語(yǔ)法

• 解釋：{{}}從數(shù)據(jù)對(duì)象data中獲取數(shù)據(jù)

• 說(shuō)明：數(shù)據(jù)對(duì)象的屬性值發(fā)生了改變，插值處的內(nèi)容都會(huì)更新

• 說(shuō)明：{{}}中只能出現(xiàn)JavaScript表達(dá)式 而不能解析js語(yǔ)句

• 注意：Mustache 語(yǔ)法不能作用在 HTML 元素的屬性上

<h1>Hello, {{ msg }}.</h1> <p>{{ 1 + 2 }}</p> <p>{{ isOk ? 'yes': 'no' }}</p> <!-- ?。?！錯(cuò)誤示范?。。?--> <h1 title="{{ err }}"></h1>

雙向數(shù)據(jù)綁定 Vue two way data binding

• 雙向數(shù)據(jù)綁定：將DOM與Vue實(shí)例的data數(shù)據(jù)綁定到一起，彼此之間相互影響

• 數(shù)據(jù)的改變會(huì)引起DOM的改變

• DOM的改變也會(huì)引起數(shù)據(jù)的變化

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

• getter和setter：訪問(wèn)器

• 作用：指定讀取或設(shè)置對(duì)象屬性值的時(shí)候，執(zhí)行的操作

• Vue - 深入響應(yīng)式原理

• MDN - Object.defineProperty()

/* ?defineProperty語(yǔ)法 介紹 */ var obj = {} Object.defineProperty(obj, 'msg', { ?// 設(shè)置 obj.msg = "1" 時(shí)set方法會(huì)被系統(tǒng)調(diào)用 參數(shù)分別是設(shè)置后和設(shè)置前的值 ?set: function (newVal, oldVal) { ?}, ?// 讀取 obj.msg 時(shí)get方法會(huì)被系統(tǒng)調(diào)用 ?get: function ( newVal, oldVal ) {} })

Vue雙向綁定的極簡(jiǎn)實(shí)現(xiàn)

• 剖析Vue原理&實(shí)現(xiàn)雙向綁定MVVM

<!-- 示例 --> <input type="text" id="txt" /> <span id="sp"></span> <script> var txt = document.getElementById('txt'), ? ?sp = document.getElementById('sp'), ? ?obj = {} // 給對(duì)象obj添加msg屬性，并設(shè)置setter訪問(wèn)器 Object.defineProperty(obj, 'msg', { ?// 設(shè)置 obj.msg ?當(dāng)obj.msg反生改變時(shí)set方法將會(huì)被調(diào)用 ? ?set: function (newVal) { ? ?// 當(dāng)obj.msg被賦值時(shí) 同時(shí)設(shè)置給 input/span ? ?txt.value = newVal ? ?sp.innerText = newVal ?} }) // 監(jiān)聽(tīng)文本框的改變 當(dāng)文本框輸入內(nèi)容時(shí) 改變obj.msg txt.addEventListener('keyup', function (event) { ?obj.msg = event.target.value }) </script>

動(dòng)態(tài)添加數(shù)據(jù)的注意點(diǎn)

• 注意：只有data中的數(shù)據(jù)才是響應(yīng)式的，動(dòng)態(tài)添加進(jìn)來(lái)的數(shù)據(jù)默認(rèn)為非響應(yīng)式

• 可以通過(guò)以下方式實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)的響應(yīng)式

• 1 Vue.set(object, key, value) - 適用于添加單個(gè)屬性

• 2 Object.assign() - 適用于添加多個(gè)屬性

var vm = new Vue({ ?data: { ? ?stu: { ? ? ?name: 'jack', ? ? ?age: 19 ? ?} ?} }) /* Vue.set */ Vue.set(vm.stu, 'gender', 'male') /* Object.assign 將參數(shù)中的所有對(duì)象屬性和值 合并到第一個(gè)參數(shù) 并返回合并后的對(duì)象*/ vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })

異步DOM更新

• 說(shuō)明：Vue 異步執(zhí)行 DOM 更新，監(jiān)視所有數(shù)據(jù)改變，一次性更新DOM

• 優(yōu)勢(shì)：可以去除重復(fù)數(shù)據(jù)，對(duì)于避免不必要的計(jì)算和 避免重復(fù) DOM 操作上，非常重要

• 如果需要那到更新后dom中的數(shù)據(jù) 則需要通過(guò) Vue.nextTick(callback)：在DOM更新后，執(zhí)行某個(gè)操作（屬于DOM操作）

• 實(shí)例調(diào)用vm.$nextTick(function () {})

methods: { ?fn() { ? ?this.msg = 'change' ? ?this.$nextTick(function () { ? ? ?console.log('$nextTick中打印：', this.$el.children[0].innerText); ? ?}) ? ?console.log('直接打?。?#39;, this.$el.children[0].innerText); ?} }

推薦大家使用Fundebug，一款很好用的BUG監(jiān)控工具~

指令

• 解釋：指令 (Directives) 是帶有 v- 前綴的特殊屬性

• 作用：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM

v-text

• 解釋：更新DOM對(duì)象的 textContent

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

v-html

• 解釋：更新DOM對(duì)象的 innerHTML

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

v-bind

• 作用：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM

• 語(yǔ)法：v-bind:title="msg"

• 簡(jiǎn)寫：:title="msg"

<!-- 完整語(yǔ)法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a>

v-on

• 作用：綁定事件

• 語(yǔ)法：v-on:click="say" or v-on:click="say('參數(shù)', $event)"

• 簡(jiǎn)寫：@click="say"

• 說(shuō)明：綁定的事件定義在methods

<!-- 完整語(yǔ)法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>

事件修飾符

• .stop 阻止冒泡，調(diào)用 event.stopPropagation()

• .prevent 阻止默認(rèn)行為，調(diào)用 event.preventDefault()

• .capture 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式

• .self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)，才會(huì)觸發(fā)事件

• .once 事件只觸發(fā)一次

v-model

• 作用：在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定

• 說(shuō)明：監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)

• 案例：計(jì)算器

<input type="text" v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

v-for

• 作用：基于源數(shù)據(jù)多次渲染元素或模板塊

<!-- 1 基礎(chǔ)用法 --> <div v-for="item in items"> ?{{ item.text }} </div> <!-- item 為當(dāng)前項(xiàng)，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 的時(shí)候提供 key 屬性，以獲得性能提升。

• 說(shuō)明：使用 key，VUE會(huì)基于 key 的變化重新排列元素順序，并且會(huì)移除 key 不存在的元素。

• vue key

• vue key屬性的說(shuō)明

<div v-for="item in items" :key="item.id"> ?<!-- 內(nèi)容 --> </div>

樣式處理 -class和style

• 使用方式：v-bind:class="expression" or :class="expression"

• 表達(dá)式的類型：字符串、數(shù)組、對(duì)象（重點(diǎn)）

• 語(yǔ)法：

<!-- 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 將多個(gè) 樣式對(duì)象 應(yīng)用到一個(gè)元素上--> <!-- baseStyles 和 overridingStyles 都是data中定義的對(duì)象 --> <div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if 和 v-show

• 條件渲染

• v-if：根據(jù)表達(dá)式的值的真假條件，銷毀或重建元素

• v-show：根據(jù)表達(dá)式之真假值，切換元素的 display CSS 屬性

<p v-show="isShow">這個(gè)元素展示出來(lái)了嗎？？？</p> <p v-if="isShow">這個(gè)元素，在HTML結(jié)構(gòu)中嗎？？？</p>

提升性能：v-pre

• 說(shuō)明：vue會(huì)跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程?？梢杂脕?lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯。

<span v-pre>{{ this will not be compiled }}</span>

提升性能：v-once

• 說(shuō)明：vue只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。這可以用于優(yōu)化更新性能。

<span v-once>This will never change: {{msg}}</span>

過(guò)濾器 filter

• 作用：文本數(shù)據(jù)格式化

• 過(guò)濾器可以用在兩個(gè)地方：{{}}和 v-bind 表達(dá)式

• 兩種過(guò)濾器：1 全局過(guò)濾器 2 局部過(guò)濾器

全局過(guò)濾器

• 說(shuō)明：通過(guò)全局方式創(chuàng)建的過(guò)濾器，在任何一個(gè)vue實(shí)例中都可以使用

• 注意：使用全局過(guò)濾器的時(shí)候，需要先創(chuàng)建全局過(guò)濾器，再創(chuàng)建Vue實(shí)例

• 顯示的內(nèi)容由過(guò)濾器的返回值決定

Vue.filter('filterName', function (value) { ?// value 表示要過(guò)濾的內(nèi)容 })

• 示例：

<div>{{ dateStr | date }}</div> <div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div> <script> ?Vue.filter('date', function(value, format) { ? ?// value 要過(guò)濾的字符串內(nèi)容，比如：dateStr ? ?// format 過(guò)濾器的參數(shù)，比如：'YYYY-MM-DD hh:mm:ss' ?}) </script>

局部過(guò)濾器

• 說(shuō)明：局部過(guò)濾器是在某一個(gè)vue實(shí)例的內(nèi)容創(chuàng)建的，只在當(dāng)前實(shí)例中起作用

{ ?data: {}, ?// 通過(guò) filters 屬性創(chuàng)建局部過(guò)濾器 ?// 注意：此處為 filters ?filters: { ? ?filterName: function(value, format) {} ?} }

按鍵值修飾符

• 說(shuō)明：在監(jiān)聽(tīng)鍵盤事件時(shí)，Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤事件時(shí)添加關(guān)鍵修飾符

• 鍵盤事件 - 鍵值修飾符

• 其他：修飾鍵（.ctrl等）、鼠標(biāo)按鍵修飾符（.left等）

// 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() @keyup.13="submit" // 使用全局按鍵別名 @keyup.enter="add" --- // 通過(guò)全局 config.keyCodes 對(duì)象自定義鍵值修飾符別名 Vue.config.keyCodes.f2 = 113 // 使用自定義鍵值修飾符 @keyup.enter.f2="add"

監(jiān)視數(shù)據(jù)變化 - watch

• 概述：watch是一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)

• 作用：當(dāng)表達(dá)式的值發(fā)生變化后，會(huì)調(diào)用對(duì)應(yīng)的回調(diào)函數(shù)完成響應(yīng)的監(jiān)視操作

• VUE $watch

new Vue({ ?data: { a: 1, b: { age: 10 } }, ?watch: { ? ?a: function(val, oldVal) { ? ? ?// val 表示當(dāng)前值 ? ? ?// oldVal 表示舊值 ? ? ?console.log('當(dāng)前值為：' + val, '舊值為：' + oldVal) ? ?}, ? ?// 監(jiān)聽(tīng)對(duì)象屬性的變化 ? ?b: { ? ? ?handler: function (val, oldVal) { /* ... */ }, ? ? ?// deep : true表示是否監(jiān)聽(tīng)對(duì)象內(nèi)部屬性值的變化 ? ? ?deep: true ? ?}, ? ?// 只監(jiān)視user對(duì)象中age屬性的變化 ? ?'user.age': function (val, oldVal) { ? ?}, ?} })

計(jì)算屬性

• 說(shuō)明：計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，只有在它的依賴發(fā)生改變時(shí)才會(huì)重新求值

• 注意：Mustache語(yǔ)法（{{}}）中不要放入太多的邏輯，否則會(huì)讓模板過(guò)重、難以理解和維護(hù)

• 注意：computed中的屬性不能與data中的屬性同名，否則會(huì)報(bào)錯(cuò)

• Vue computed屬性原理

var vm = new Vue({ ?el: '#app', ?data: { ? ?firstname: 'jack', ? ?lastname: 'rose' ?}, ?computed: { ? ?fullname() { ? ? ?return this.firstname + '.' + this.lastname ? ?} ?} })

實(shí)例生命周期

• 所有的 Vue 組件都是 Vue 實(shí)例，并且接受相同的選項(xiàng)對(duì)象即可 (一些根實(shí)例特有的選項(xiàng)除外)。

• 實(shí)例生命周期也叫做：組件生命周期

生命周期介紹

• vue生命周期鉤子函數(shù)

• 簡(jiǎn)單說(shuō)：一個(gè)組件從開(kāi)始到最后消亡所經(jīng)歷的各種狀態(tài)，就是一個(gè)組件的生命周期

生命周期鉤子函數(shù)的定義：從組件被創(chuàng)建，到組件掛載到頁(yè)面上運(yùn)行，再到頁(yè)面關(guān)閉組件被卸載，這三個(gè)階段總是伴隨著組件各種各樣的事件，這些事件，統(tǒng)稱為組件的生命周期函數(shù)！

• 注意：Vue在執(zhí)行過(guò)程中會(huì)自動(dòng)調(diào)用生命周期鉤子函數(shù)，我們只需要提供這些鉤子函數(shù)即可

• 注意：鉤子函數(shù)的名稱都是Vue中規(guī)定好的！

鉤子函數(shù) -beforeCreate()

• 說(shuō)明：在實(shí)例初始化之后，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用

• 注意：此時(shí)，無(wú)法獲取 data中的數(shù)據(jù)、methods中的方法

鉤子函數(shù) -created()

• 注意：這是一個(gè)常用的生命周期，可以調(diào)用methods中的方法、改變data中的數(shù)據(jù)

• vue實(shí)例生命周期 參考1

• vue實(shí)例生命周期 參考2

• 使用場(chǎng)景：發(fā)送請(qǐng)求獲取數(shù)據(jù)

鉤子函數(shù) -beforeMounted()

• 說(shuō)明：在掛載開(kāi)始之前被調(diào)用

鉤子函數(shù) -mounted()

• 說(shuō)明：此時(shí)，vue實(shí)例已經(jīng)掛載到頁(yè)面中，可以獲取到el中的DOM元素，進(jìn)行DOM操作

鉤子函數(shù) -beforeUpdated()

• 說(shuō)明：數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過(guò)程。

• 注意：此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁(yè)面中的DOM元素是更新之前的

鉤子函數(shù) -updated()

• 說(shuō)明：組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。

鉤子函數(shù) -beforeDestroy()

• 說(shuō)明：實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。

• 使用場(chǎng)景：實(shí)例銷毀之前，執(zhí)行清理任務(wù)，比如：清除定時(shí)器等

鉤子函數(shù) -destroyed()

• 說(shuō)明：Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

推薦大家使用Fundebug，一款很好用的BUG監(jiān)控工具~

axios

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

• 以Promise為基礎(chǔ)的HTTP客戶端，適用于：瀏覽器和node.js

• 封裝ajax，用來(lái)發(fā)送請(qǐng)求，異步獲取數(shù)據(jù)

• 安裝：npm i -S axios

• axios

// 在瀏覽器中使用，直接引入js文件使用下面的GET/POST請(qǐng)求方式即可 // 1 引入 axios.js // 2 直接調(diào)用axios提供的API發(fā)送請(qǐng)求 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 請(qǐng)求

const url = 'http://vue.studyit.io/api/getnewslist' // url中帶有query參數(shù) axios.get('/user?id=89') ?.then(function (response) { ? ?console.log(response); ?}) ?.catch(function (error) { ? ?console.log(error); ?}); // url和參數(shù)分離，使用對(duì)象 axios.get('/user', { ?params: { ? ?id: 12345 ?} })

Post 請(qǐng)求

• 不同環(huán)境中處理 POST請(qǐng)求

• 默認(rèn)情況下，axios 會(huì)將JS對(duì)象序列化為JSON對(duì)象。為了使用 application/x-www-form-urlencoded 格式發(fā)送請(qǐng)求，我們可以這樣：

// 使用 qs 包，處理將對(duì)象序列化為字符串 // 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=點(diǎn)個(gè)贊不過(guò)份') axios.post('/user', qs.stringify({ ? ?firstName: 'Fred', ? ?lastName: 'Flintstone' ?})) ?.then(function (response) { ? ?console.log(response); ?}) ?.catch(function (error) { ? ?console.log(error); ?});

全局配置

// 設(shè)置請(qǐng)求公共路徑： axios.defaults.baseURL = 'http://vue.studyit.io'

攔截器

• 攔截器會(huì)攔截發(fā)送的每一個(gè)請(qǐng)求，請(qǐng)求發(fā)送之前執(zhí)行request中的函數(shù)，請(qǐng)求發(fā)送完成之后執(zhí)行response中的函數(shù)

// 請(qǐng)求攔截器 axios.interceptors.request.use(function (config) { ? ?// 所有請(qǐng)求之前都要執(zhí)行的操作 ? ?return config; ?}, function (error) { ? ?// 錯(cuò)誤處理 ? ?return Promise.reject(error); ?}); // 響應(yīng)攔截器 axios.interceptors.response.use(function (response) { ? ?// 所有請(qǐng)求完成后都要執(zhí)行的操作 ? ?return response; ?}, function (error) { ? ?// 錯(cuò)誤處理 ? ?return Promise.reject(error); ?});

自定義指令

• 作用：進(jìn)行DOM操作

• 使用場(chǎng)景：對(duì)純 DOM 元素進(jìn)行底層操作，比如：文本框獲得焦點(diǎn)

• vue 自定義指令用法實(shí)例

• 兩種指令：1 全局指令 2 局部指令

全局自定義指令

// 第一個(gè)參數(shù)：指令名稱 // 第二個(gè)參數(shù)：配置對(duì)象，指定指令的鉤子函數(shù) Vue.directive('directiveName', { ?// bind中只能對(duì)元素自身進(jìn)行DOM操作，而無(wú)法對(duì)父級(jí)元素操作 ?// 只調(diào)用一次 指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。 ?bind( el，binding, vnode ) { ? ?// 參數(shù)詳解 ? ?// el：指令所綁定的元素，可以用來(lái)直接操作 DOM 。 ? ?// binding：一個(gè)對(duì)象，包含以下屬性： ? ? ?// name：指令名，不包括 v- 前綴。 ? ? ?// value：指令的綁定值，等號(hào)后面的值 。 ? ? ?// oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用。 ? ? ?// expression：字符串形式的指令表達(dá)式 等號(hào)后面的字符串 形式 ? ? ?// arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。 ? ? ?// modifiers：指令修飾符。例如：v-directive.foo.bar中，修飾符對(duì)象為 { foo: true, bar: true }。 ? ?// vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。。 ? ?// oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。 ?}, ?// inserted這個(gè)鉤子函數(shù)調(diào)用的時(shí)候，當(dāng)前元素已經(jīng)插入頁(yè)面中了，也就是說(shuō)可以獲取到父級(jí)節(jié)點(diǎn)了 ?inserted ( ?el，binding, vnode ) {}, ?// ?DOM重新渲染前 ?update(el，binding, vnode,oldVnode) {}, ?// DOM重新渲染后 ?componentUpdated ( el，binding, vnode,oldVnode ) {}, ?// 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用 ?unbind ( el ) { ? ?// 指令所在的元素在頁(yè)面中消失，觸發(fā) ?} }) // 簡(jiǎn)寫 如果你想在 bind 和 update 時(shí)觸發(fā)相同行為，而不關(guān)心其它的鉤子: Vue.directive('自定義指令名', function( el, binding ) {}) // 例： Vue.directive('color', function(el, binding) { ?el.style.color = binging.value }) // 使用 注意直接些會(huì)被i成data中的數(shù)據(jù)“red” 需要字符串則嵌套引號(hào)"'red'" <p v-color="'red'"></p>

局部自定義指令

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

• vue 剖析Vue原理&實(shí)現(xiàn)雙向綁定MVVM

組件

組件系統(tǒng)是 Vue 的另一個(gè)重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。仔細(xì)想想，幾乎任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹(shù)

• 創(chuàng)建組件的兩種方式：1 全局組件 2 局部組件

全局組件

• 說(shuō)明：全局組件在所有的vue實(shí)例中都可以使用

• 注意：先注冊(cè)組件，再初始化根實(shí)例

// 1 注冊(cè)全局組件 ? Vue.component('my-component', { ?// template 只能有一個(gè)根元素 ?template: '<p>A custom component!</p>', ?// 組件中的 `data` 必須是函數(shù) 并且函數(shù)的返回值必須是對(duì)象 ?data() { ? ?return { ? ? ?msg: '注意：組件的data必須是一個(gè)函數(shù)！?。?#39; ? ?} ?} }) // 2 使用：以自定義元素的方式 <div id="example"> ?<my-component></my-component> </div> // =====> 渲染結(jié)果 <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：使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。

// 注冊(cè)組件，傳入一個(gè)擴(kuò)展過(guò)的構(gòu)造器 Vue.component('my-component', Vue.extend({ /* ... */ })) // 注冊(cè)組件，傳入一個(gè)選項(xiàng)對(duì)象 (自動(dòng)調(diào)用 Vue.extend) Vue.component('my-component', { /* ... */ }) var Home = Vue.extend({ ?template: '', ?data() {} }) Vue.component('home', Home)

局部組件

• 說(shuō)明：局部組件，是在某一個(gè)具體的vue實(shí)例中定義的，只能在這個(gè)vue實(shí)例中使用

var Child = { ?template: '<div>A custom component!</div>' } new Vue({ ?// 注意：此處為 components ?components: { ? ?// <my-component> 將只在當(dāng)前vue實(shí)例中使用 ? ?// my-component 為組件名 值為配置對(duì)象 ? ?'my-component': { ? ? ?template: ``, ? ? ?data () { return { } }, ? ? ?props : [] ? ?} ?} })

is特性

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

<!-- 案例 --> <ul id="app"> ?<!-- 不能識(shí)別 --> ?<my-li></my-li> ?正常識(shí)別 ?<li is="my-li"></li> </ul> <script> ?var vm = new Vue({ ? ?el: "#app", ? ?components : { ? ? ?myLi : { ? ? ? ?template : `<li>內(nèi)容</li>` ? ? ?} ? ?} ?}) </script>

組件通訊

父組件到子組件

• 方式：通過(guò)子組件props屬性來(lái)傳遞數(shù)據(jù) props是一個(gè)數(shù)組

• 注意：屬性的值必須在組件中通過(guò)props屬性顯示指定，否則，不會(huì)生效

• 說(shuō)明：傳遞過(guò)來(lái)的props屬性的用法與data屬性的用法相同

<div id="app"> ?<!-- 如果需要往子組件總傳遞父組件data中的數(shù)據(jù) 需要加v-bind="數(shù)據(jù)名稱" --> ?<hello v-bind:msg="info"></hello> ?<!-- 如果傳遞的是字面量 那么直接寫--> ?<hello my-msg="abc"></hello> </div> <!-- js --> <script> ?new Vue({ ? ?el: "#app", ? ?data : { ? ? ?info : 15 ? ?}, ? ?components: { ? ? ?hello: { ? ? ? ?// 創(chuàng)建props及其傳遞過(guò)來(lái)的屬性 ? ? ? ?props: ['msg', 'myMsg'], ? ? ? ?template: '<h1>這是 hello 組件，這是消息：{{msg}} --- {{myMsg}}</h1>' ? ? ?} ? ?} ?}) </script>

子組件到父組件

方式：父組件給子組件傳遞一個(gè)函數(shù)，由子組件調(diào)用這個(gè)函數(shù)

• 說(shuō)明：借助vue中的自定義事件（v-on:cunstomFn="fn"）

步驟:

• 1、在父組件中定義方法 parentFn

• 2、在子組件 組件引入標(biāo)簽 中綁定自定義事件 v-on:自定義事件名="父組件中的方法" ==> @pfn="parentFn"

• 3、子組件中通過(guò)$emit()觸發(fā)自定義事件事件 this.$emit(pfn,參數(shù)列表。。。)

<hello @pfn="parentFn"></hello> <script> ?Vue.component('hello', { ? ?template: '<button @click="fn">按鈕</button>', ? ?methods: { ? ? ?// 子組件：通過(guò)$emit調(diào)用 ? ? ?fn() { ? ? ? ?this.$emit('pfn', '這是子組件傳遞給父組件的數(shù)據(jù)') ? ? ?} ? ?} ?}) ?new Vue({ ? ?methods: { ? ? ?// 父組件：提供方法 ? ? ?parentFn(data) { ? ? ? ?console.log('父組件：', data) ? ? ?} ? ?} ?}) </script>

非父子組件通訊

在簡(jiǎn)單的場(chǎng)景下，可以使用一個(gè)空的 Vue 實(shí)例作為事件總線

• $on()：綁定自定義事件

var bus = new Vue() // 在組件 B 綁定自定義事件 bus.$on('id-selected', function (id) { ?// ... }) // 觸發(fā)組件 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 需要用箭頭函數(shù) ? ? ? ? ?bus.$on('tellComB', (msg) => { ? ? ? ? ? ?this.msg = msg ? ? ? ? ?}) ? ? ? ?} ? ? ?}, ? ? ?comA: { ? ? ? ?template: '<button @click="emitFn">告訴B</button>', ? ? ? ?methods: { ? ? ? ? ?emitFn() { ? ? ? ? ? ?// 觸發(fā)中間組件中的自定義事件 ? ? ? ? ? ?bus.$emit('tellComB', '土豆土豆我是南瓜') ? ? ? ? ?} ? ? ? ?} ? ? ?} ? ?} ?}) </script>

內(nèi)容分發(fā)

• 通過(guò)<slot></slot> 標(biāo)簽指定內(nèi)容展示區(qū)域

案例：

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

獲取組件（或元素） - refs

• 說(shuō)明：vm.$refs 一個(gè)對(duì)象，持有已注冊(cè)過(guò) ref 的所有子組件（或HTML元素）

• 使用：在 HTML元素 中，添加ref屬性，然后在JS中通過(guò)vm.$refs.屬性來(lái)獲取

• 注意：如果獲取的是一個(gè)子組件，那么通過(guò)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 -單頁(yè)應(yīng)用程序

SPA： Single Page Application

單頁(yè)Web應(yīng)用（single page application，SPA），就是只有一個(gè)Web頁(yè)面的應(yīng)用， 是加載單個(gè)HTML頁(yè)面，并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。

單頁(yè)面應(yīng)用程序：

只有第一次會(huì)加載頁(yè)面, 以后的每次請(qǐng)求, 僅僅是獲取必要的數(shù)據(jù).然后, 由頁(yè)面中js解析獲取的數(shù)據(jù), 展示在頁(yè)面中

傳統(tǒng)多頁(yè)面應(yīng)用程序：

對(duì)于傳統(tǒng)的多頁(yè)面應(yīng)用程序來(lái)說(shuō), 每次請(qǐng)求服務(wù)器返回的都是一個(gè)完整的頁(yè)面

優(yōu)勢(shì)

• 減少了請(qǐng)求體積，加快頁(yè)面響應(yīng)速度，降低了對(duì)服務(wù)器的壓力

• 更好的用戶體驗(yàn)，讓用戶在web app感受native app的流暢

實(shí)現(xiàn)思路和技術(shù)點(diǎn)

• ajax

• 錨點(diǎn)的使用（window.location.hash #）

• hashchange 事件 window.addEventListener("hashchange",function () {})

• 監(jiān)聽(tīng)錨點(diǎn)值變化的事件，根據(jù)不同的錨點(diǎn)值，請(qǐng)求相應(yīng)的數(shù)據(jù)

• 原本用作頁(yè)面內(nèi)部進(jìn)行跳轉(zhuǎn)，定位并展示相應(yīng)的內(nèi)容

路由

• 路由即：瀏覽器中的哈希值（# hash）與展示視圖內(nèi)容（template）之間的對(duì)應(yīng)規(guī)則

• vue中的路由是：hash 和 component的對(duì)應(yīng)關(guān)系
  在 Web app 中，通過(guò)一個(gè)頁(yè)面來(lái)展示和管理整個(gè)應(yīng)用的功能。 SPA往往是功能復(fù)雜的應(yīng)用，為了有效管理所有視圖內(nèi)容，前端路由 應(yīng)運(yùn)而生！ 簡(jiǎn)單來(lái)說(shuō)，路由就是一套映射規(guī)則（一對(duì)一的對(duì)應(yīng)規(guī)則），由開(kāi)發(fā)人員制定規(guī)則。 當(dāng)URL中的哈希值（# hash）發(fā)生改變后，路由會(huì)根據(jù)制定好的規(guī)則，展示對(duì)應(yīng)的視圖內(nèi)容

基本使用

• 安裝：npm i -S vue-router

<div id="app"> ? ? ?<!-- 5 路由入口 指定跳轉(zhuǎn)到只定入口 --> ? ? ?<router-link to="/home">首頁(yè)</router-link> ? ? ?<router-link to="/login">登錄</router-link> ? ? ? ? ?<!-- 7 路由出口：用來(lái)展示匹配路由視圖內(nèi)容 --> ? ? ?<router-view></router-view> ? ?</div> ? ? ? ?<!-- 1 導(dǎo)入 vue.js --> ? ?<script src="./vue.js"></script> ? ?<!-- 2 導(dǎo)入 路由文件 --> ? ?<script src="./node_modules/vue-router/dist/vue-router.js"></script> ? ?<script> ? ? ?// 3 創(chuàng)建兩個(gè)組件 ? ? ?const Home = Vue.component('home', { ? ? ? ?template: '<h1>這是 Home 組件</h1>' ? ? ?}) ? ? ?const Login = Vue.component('login', { ? ? ? ?template: '<h1>這是 Login 組件</h1>' ? ? ?}) ? ? ? ? ?// 4 創(chuàng)建路由對(duì)象 ? ? ?const router = new VueRouter({ ? ? ? ?routes: [ ? ? ? ? ?// 路徑和組件一一對(duì)應(yīng) ? ? ? ? ?{ path: '/home', component: Home }, ? ? ? ? ?{ path: '/login', component: Login } ? ? ? ?] ? ? ?}) ? ? ? ? ?var vm = new Vue({ ? ? ? ?el: '#app', ? ? ? ?// 6 將路由實(shí)例掛載到vue實(shí)例 ? ? ? ?router ? ? ?}) ? ?</script>

重定向

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

路由其他配置

• 路由導(dǎo)航高亮

• 說(shuō)明：當(dāng)前匹配的導(dǎo)航鏈接，會(huì)自動(dòng)添加router-link-exact-active router-link-active類

• 配置：linkActiveClass

• 匹配路由模式

• 配置：mode

new Router({ ?routers:[], ?mode: "hash", //默認(rèn)hash | history 可以達(dá)到隱藏地址欄hash值 | abstract，如果發(fā)現(xiàn)沒(méi)有瀏覽器的 API 則強(qiáng)制進(jìn)入 ?linkActiveClass : "now" //當(dāng)前匹配的導(dǎo)航鏈接將被自動(dòng)添加now類 })

路由參數(shù)

• 說(shuō)明：我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同一個(gè)組件，此時(shí)，可以通過(guò)路由參數(shù)來(lái)處理

• 語(yǔ)法：/user/:id

• 使用：當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到 this.$route.params

• 其他：可以通過(guò) $route.query 獲取到 URL 中的查詢參數(shù) 等

// 方式一 ? ?<router-link to="/user/1001">如果你需要在模版中使用路由參數(shù) 可以這樣 {{$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/ 都不能被匹配 ? ? ? ?// 將來(lái)通過(guò)$router.params獲取參數(shù)返回 {id:1001} ? ? ? ?{ path: '/user/:id', component: User }, ? ? ? ?// 方式二 ? ? ? ?{ path: "user" , component: User} ? ? ?] ? ?}) ? ? ? ?// User組件： ? ?const User = { ? ? ?template: `<div>User {{ $route.params.id }}</div>` ? ?} ? ?</script> ? ? ?<!-- 如果要子啊vue實(shí)例中獲取路由參數(shù) 則使用this.$router.params 獲取路由參數(shù)對(duì)象 --> ? ?<!-- ?{{$router.query}} 獲取路由中的查詢字符串 返回對(duì)象 -->

嵌套路由 - 子路由

• 路由是可以嵌套的，即：路由中又包含子路由

• 規(guī)則：父組件中包含 router-view，在路由規(guī)則中使用 children 配置

// 父組件： ? ?const User = Vue.component('user', { ? ? ?template: ` ? ? ? ?<div class="user"> ? ? ? ? ?<h2>User Center</h2> ? ? ? ? ?<router-link to="/user/profile">個(gè)人資料</router-link> ? ? ? ? ?<router-link to="/user/posts">崗位</router-link> ? ? ? ? ?<!-- 子路由展示在此處 --> ? ? ? ? ?<router-view></router-view> ? ? ? ?</div> ? ? ? ?` ? ?}) ? ? ? ?// 子組件[簡(jiǎn)寫] ? ?const UserProfile = { ? ? ?template: '<h3>個(gè)人資料：張三</h3>' ? ?} ? ?const UserPosts = { ? ? ?template: '<h3>崗位：FE</h3>' ? ?} ? ? ? ?// 路由 ? ?var router =new Router({ ? ? ?routers : [ ? ? ? ?{ path: '/user', component: User, ? ? ? ? ?// 子路由配置： ? ? ? ? ?children: [ ? ? ? ? ? ?{ ? ? ? ? ? ? ?// 當(dāng) /user/profile 匹配成功， ? ? ? ? ? ? ?// UserProfile 會(huì)被渲染在 User 的 <router-view> 中 ? ? ? ? ? ? ?path: 'profile', ? ? ? ? ? ? ?component: UserProfile ? ? ? ? ? ?}, ? ? ? ? ? ?{ ? ? ? ? ? ? ?// 當(dāng) /user/posts 匹配成功 ? ? ? ? ? ? ?// UserPosts 會(huì)被渲染在 User 的 <router-view> 中 ? ? ? ? ? ? ?path: 'posts', ? ? ? ? ? ? ?component: UserPosts ? ? ? ? ? ?} ? ? ? ? ?] ? ? ? ?} ? ? ?] ? ?})

前端模塊化

為什么需要模塊化

• 1 最開(kāi)始的js就是為了實(shí)現(xiàn)客戶端驗(yàn)證以及一些簡(jiǎn)單的效果

• 2 后來(lái)，js得到重視，應(yīng)用越來(lái)越廣泛，前端開(kāi)發(fā)的復(fù)雜度越來(lái)越高

• 3 舊版本的js中沒(méi)有提供與模塊（module）相關(guān)的內(nèi)容

模塊的概念

• 在js中，一個(gè)模塊就是實(shí)現(xiàn)特定功能的文件（js文件）

• 遵循模塊的機(jī)制，想要什么功能就加載什么模塊

• 模塊化開(kāi)發(fā)需要遵循規(guī)范

模塊化解決的問(wèn)題

• 命名沖突

• 文件依賴（加載文件）

• 模塊的復(fù)用

• 統(tǒng)一規(guī)范和開(kāi)發(fā)方式

JS實(shí)現(xiàn)模塊化的規(guī)范

• AMD 瀏覽器端

• requirejs

• CommonJS nodejs

• 加載模塊：require()

• 導(dǎo)出模塊：module.exports = {} / exports = {}

• ES6 中的 import / export

• CMD 瀏覽器端

• 玉伯（阿里前端大神） -> seajs

• UMD 通用模塊化規(guī)范，可以兼容 AMD、CommonJS、瀏覽器中沒(méi)有模塊化規(guī)范 等這些語(yǔ)法

AMD 的使用

Asynchronous Module Definition：異步模塊定義，瀏覽器端模塊開(kāi)發(fā)的規(guī)范 代表：require.js 特點(diǎn)：模塊被異步加載，模塊加載不影響后面語(yǔ)句的運(yùn)行

1、定義模塊

// 語(yǔ)法:define(name, dependencies?, factory); ? ?// name表示：當(dāng)前模塊的名稱，是一個(gè)字符串 可有可無(wú) ? ?// dependencies表示：當(dāng)前模塊的依賴項(xiàng)，是一個(gè)數(shù)組無(wú)論依賴一項(xiàng)還是多項(xiàng) 無(wú)則不寫 ? ?// factory表示：當(dāng)前模塊要完成的一些功能，是一個(gè)函數(shù) ? ? ? ?// 定義對(duì)象模塊 ? ?define({}) ? ?// 定義方法模塊 ? ?define(function() { ? ? ?return {} ? ?}) ? ?// 定義帶有依賴項(xiàng)的模塊 ? ?define(['js/a'], function() {})

2、加載模塊

// - 注意：require的第一個(gè)參數(shù)必須是數(shù)組 ? ?// 參數(shù)必須是數(shù)組 表示模塊路徑 以當(dāng)前文件為基準(zhǔn),通過(guò)回調(diào)函數(shù)中的參數(shù)獲取加載模塊中的變量 參數(shù)與模塊按照順序一一對(duì)應(yīng) ? ?require(['a', 'js/b'], function(a, b) { ? ? ?// 使用模塊a 和 模塊b 中的代碼 ? ?})

3、路徑查找配置

• requirejs 默認(rèn)使用 baseUrl+paths 的路徑解析方式

• 可以使用以下方式避開(kāi)此設(shè)置：

• 1 以.js結(jié)尾

• 2 以 / 開(kāi)始

• 3 包含協(xié)議：https:// 或 http://

// 配置示例 ? ?// 注意配置應(yīng)當(dāng)在使用之前 ? ?require.config({ ? ? ?baseUrl: './js' // 配置基礎(chǔ)路徑為：當(dāng)前目錄下的js目錄 ? ?}) ? ?require(['a']) ? ?// 查找 基礎(chǔ)路徑下的 ./js/a.js // 簡(jiǎn)化加載模塊路徑 ? ?require.config({ ? ? ?baseUrl: './js', ? ? ?// 配置一次即可，直接通過(guò)路徑名稱（template || jquery）加載模塊 ? ? ?paths: { ? ? ? ?template: 'assets/artTemplate/template-native', ? ? ? ?jquery: 'assets/jquery/jquery.min' ? ? ?} ? ?}) ? ?// 加載jquery template模塊 ? ?require(['jquery', 'template'])

4、非模塊化和依賴項(xiàng)支持

• 1 添加模塊的依賴模塊，保證加載順序（deps）

• 2 將非模塊化模塊，轉(zhuǎn)化為模塊化（exports）

// 示例 ? ?require.config({ ? ? ?baseUrl: './js', ? ? ?paths: { ? ? ? ?// 配置路徑 ? ? ? ?noModule: 'assets/demo/noModule' ? ? ?}, ? ? ?// 配置不符合規(guī)范的模塊項(xiàng) ? ? ?shim: { ? ? ? ?// 模塊名稱 ? ? ? ?noModule: { ? ? ? ? ?deps: [], ? ? ? ? // 依賴項(xiàng) ? ? ? ? ?exports: 'sayHi' ?// 導(dǎo)出模塊中存在的函數(shù)或變量 ? ? ? ?} ? ? ?} ? ?}); // 注意點(diǎn) ?如果定義模塊的時(shí)候，指定了模塊名稱，需要使用該名稱來(lái)引用模塊 ? ?// 定義 這個(gè)模塊名稱與paths中的名稱相同 ? ?define('moduleA', function() {}) ? ?// 導(dǎo)入 ? ?require.config({ ? ? ?paths: { ? ? ? ?// 此處的模塊名：moduleA ? ? ? ?moduleA: 'assets/demo/moduleA' ? ? ?} ? ?})

5、路徑加載規(guī)則

• 路徑配置的優(yōu)先級(jí)：

• 1 通過(guò) config 配置規(guī)則查找

• 2 通過(guò) data-main 指定的路徑查找

• 3 以引入 requirejs 的頁(yè)面所在路徑為準(zhǔn)查找

<!-- ? ? ?設(shè)置data-main屬性 ? ? ?1 data-main屬性指定的文件也會(huì)同時(shí)被加載 ? ? ?2 用于指定查找其他模塊的基礎(chǔ)路徑 ? ?--> ? ?<script src="js/require.js" data-main="js/main"></script>

Webpack

• webpack 官網(wǎng)

• bundle [?b?ndl] 捆綁，收集，歸攏，把…塞入

• webpack 將帶有依賴項(xiàng)的各個(gè)模塊打包處理后，變成了獨(dú)立的瀏覽器能夠識(shí)別的文件

• webpack 合并以及解析帶有依賴項(xiàng)的模塊

概述

webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(特點(diǎn) module、 bundler) webpack 是一個(gè)模塊化方案（預(yù)編譯） webpack獲取具有依賴關(guān)系的模塊，并生成表示這些模塊的靜態(tài)資源

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

對(duì)比模塊化方案: webpack 和 requirejs（通過(guò)編寫代碼的方式將前端的功能，劃分成獨(dú)立的模塊）

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

• webpack 預(yù)編譯 (在開(kāi)發(fā)階段通過(guò)webpack進(jìn)行模塊化處理, 最終項(xiàng)目上線, 就不在依賴于 webpack)

• requirejs 線上的編譯( 代碼運(yùn)行是需要依賴與 requirejs 的 )

webpack起源

webpack解決了現(xiàn)存模塊打包器的兩個(gè)痛點(diǎn)：

• Code Spliting - 代碼分離 按需加載

• 靜態(tài)資源的模塊化處理方案

webpack與模塊

• 前端模塊系統(tǒng)的演進(jìn)

• 在webpack看來(lái)：所有的靜態(tài)資源都是模塊

• webpack 模塊能夠識(shí)別以下等形式的模塊之間的依賴：

• JS的模塊化規(guī)范：

• ES2015 importexport

• CommonJS require()module.exports

• AMD define 和 require

• 非JS等靜態(tài)資源：

• css/sass/less 文件中的 @import

• 圖片連接，比如：樣式 url(...) 或 HTML <img src=...>

• 字體 等

webpack文檔和資源

• webpack 中文網(wǎng)

• webpack 1.0

• webpack 2.x+

• 入門Webpack，看這篇就夠了

安裝webpack

• 全局安裝：npm i -g webpack

• 目的：在任何目錄中通過(guò)CLI使用 webpack 這個(gè)命令

• 項(xiàng)目安裝：npm i -D webpack

• 目的：執(zhí)行當(dāng)前項(xiàng)目的構(gòu)建

webpack的基本使用

• 安裝：npm i -D webpack

• webpack的兩種使用方式：1 命令行 2 配置文件（webpack.config.js）

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

• 1 使用npm init -y 初始package.json，使用npm來(lái)管理項(xiàng)目中的包

• 2 新建index.html和index.js，實(shí)現(xiàn)隔行變色功能

• 3 運(yùn)行webpack src/js/index.js dist/bundle.js進(jìn)行打包構(gòu)建，語(yǔ)法是：webpack 入口文件 輸出文件

• 4 注意：需要在頁(yè)面中引入 輸出文件 的路徑（此步驟可通過(guò)配置webpack去掉）

/* ?src/js/index.js */ // 1 導(dǎo)入 jQuery import $ from 'jquery' // 2 獲取頁(yè)面中的li元素 const $lis = $('#ulList').find('li') // 3 隔行變色 // jQuery中的 filter() 方法用來(lái)過(guò)濾jquery對(duì)象 $lis.filter(':odd').css('background-color', '#def') $lis.filter(':even').css('background-color', 'skyblue') //命令行運(yùn)行 `webpack src/js/index.js ? dist/bundle.js ? 目錄生成在命令行運(yùn)行目錄 /* ?運(yùn)行流程： ?1、webpack 根據(jù)入口找到入口文件 ?2、分析js中的模塊化語(yǔ)法 ?3、將所有關(guān)聯(lián)文件 打包合并輸出到出口 */

webpack-dev-server 配置

一、package.json配置方式

• 安裝：npm i -D webpack-dev-server

• 作用：配合webpack，創(chuàng)建開(kāi)發(fā)環(huán)境（啟動(dòng)服務(wù)器、監(jiān)視文件變化、自動(dòng)編譯、刷新瀏覽器等），提高開(kāi)發(fā)效率

• 注意：無(wú)法直接在終端中執(zhí)行 webpack-dev-server，需要通過(guò) package.json 的 scripts 實(shí)現(xiàn)

• 使用方式：npm run dev

// 參數(shù)解釋 ?注意參數(shù)是無(wú)序的 有值的參數(shù)空格隔開(kāi) // --open 自動(dòng)打開(kāi)瀏覽器 // --contentBase ./ ?指定瀏覽器 默認(rèn)打開(kāi)的頁(yè)面路徑中的 index.html 文件 // --open 自動(dòng)打開(kāi)瀏覽器 // --port 8080 端口號(hào) // --hot 熱更新，只加載修改的文件(按需加載修改的內(nèi)容)，而非全部加載 "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: { ?// 服務(wù)器的根目錄 Tell the server where to serve content from ?// https://webpack.js.org/configuration/dev-server/#devserver-contentbase ?contentBase: path.join(__dirname, './'), ?// 自動(dòng)打開(kāi)瀏覽器 ?open: true, ?// 端口號(hào) ?port: 8888, ?// --------------- 1 熱更新 ----------------- ?hot: true }, plugins: [ ?// ---------------- 2 啟用熱更新插件 ---------------- ?new webpack.HotModuleReplacementPlugin() ]

• html-webpack-plugin 插件

• 安裝：npm i -D html-webpack-plugin

• 作用：根據(jù)模板，自動(dòng)生成html頁(yè)面

• 優(yōu)勢(shì)：頁(yè)面存儲(chǔ)在內(nèi)存中，自動(dòng)引入bundle.js、css等文件

/* webpack.config.js */ const htmlWebpackPlugin = require('html-webpack-plugin') plugins: [ ?new htmlWebpackPlugin({ ? ?// 模板頁(yè)面路徑 ? ?template: path.join(__dirname, './index.html'), ? ?// 在內(nèi)存中生成頁(yè)面路徑，默認(rèn)值為：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通過(guò)loaders處理非JavaScript靜態(tài)資源

1、 CSS打包

• 安裝：npm i -D style-loader css-loader

• 注意：use中模塊的順序不能顛倒，加載順序：從右向左加載

/* 在index.js ?導(dǎo)入 css 文件*/ import './css/app.css' /* webpack.config.js 配置各種資源文件的loader加載器*/ module: { ?// 配置匹配規(guī)則 ?rules: [ ? ?// test 用來(lái)配置匹配文件規(guī)則（正則） ? ?// use ?是一個(gè)數(shù)組，按照從后往前的順序執(zhí)行加載 ? ?{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 創(chuàng)建style標(biāo)簽 // "css-loader" ? ?：translates CSS into CommonJS 將css轉(zhuǎn)化為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：將圖片或字體轉(zhuǎn)化為base64編碼格式的字符串，嵌入到樣式文件中

/* webpack.config.js */ module: { ?rules:[ ? ?// 打包 圖片文件 ? ?{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' }, ? ?// 打包 字體文件 ? ?{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' } ?] }

圖片打包細(xì)節(jié)

• limit參數(shù)的作用：（單位為：字節(jié)(byte)）

• 當(dāng)圖片文件大小（字節(jié)）小于指定的limit時(shí)，圖片被轉(zhuǎn)化為base64編碼格式

• 當(dāng)圖片文件大?。ㄗ止?jié)）大于等于指定的limit時(shí)，圖片被重命名以u(píng)rl路徑形式加載（此時(shí)，需要file-loader來(lái)加載圖片）

• 圖片文件重命名，保證相同文件不會(huì)被加載多次。例如：一張圖片（a.jpg）拷貝一個(gè)副本（b.jpg），同時(shí)引入這兩張圖片，重命名后只會(huì)加載一次，因?yàn)檫@兩張圖片就是同一張

• 文件重命名以后，會(huì)通過(guò)MD5加密的方式，來(lái)計(jì)算這個(gè)文件的名稱

/* 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 ? ? ? ? ?} ? ? ? ?} ? ? ?] ? ?} ?] }

字體文件打包說(shuō)明

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

babel

• 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/} ?] }

• 第二步：在項(xiàng)目根目錄中新建.babelrc配置文件

/* 創(chuàng)建 .babelrc 文件*/ // 將來(lái)babel-loader運(yùn)行的時(shí)候，會(huì)檢查這個(gè)配置文件，并讀取相關(guān)的語(yǔ)法和插件配置 { ?"presets": ["env"] }

babel的說(shuō)明

babel的作用：

• 語(yǔ)法轉(zhuǎn)換：將新的ES語(yǔ)法轉(zhuǎn)化為瀏覽器能識(shí)別的語(yǔ)法（babel-preset-*）

• polyfill瀏覽器兼容：讓低版本瀏覽器兼容最新版ES的API

babel-preset-*

Babel通過(guò)語(yǔ)法轉(zhuǎn)換器，能夠支持最新版本的JavaScript語(yǔ)法 babel-preset-* 用來(lái)指定我們書寫的是什么版本的JS代碼

• 作用：將新的ES語(yǔ)法轉(zhuǎn)化為瀏覽器能識(shí)別的ES5代碼

• ES6語(yǔ)法提案的批準(zhǔn)流程

• ES2015 也就是 ES6, 下一個(gè)版本是ES7, 從 ES6 到 ES7之間經(jīng)歷了 5 個(gè)階段

• babel-preset-es2015 轉(zhuǎn)換es6的語(yǔ)法

• babel-preset-stage-0 轉(zhuǎn)換比es6更新的語(yǔ)法

Stage 0 - Strawman（展示階段） Stage 1 - Proposal（征求意見(jiàn)階段） 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

• 作用：實(shí)現(xiàn)瀏覽器對(duì)不支持API的兼容（兼容舊環(huán)境、填補(bǔ)）

• 在低版本瀏覽器中使用高級(jí)的ES6或ES7的方法或函數(shù)，比如：'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包中的代碼會(huì)被打包到你的代碼中（-S）

polyfill 所有兼容性問(wèn)題，都可以通過(guò)polyfill解決（包括：實(shí)例方法）、污染全局環(huán)境 runtime 除了實(shí)例方法以外，其他兼容新問(wèn)題都能解決、不污染全局環(huán)境

polyfill：如果想要支持全局對(duì)象（比如：Promise）、靜態(tài)方法（比如：Object.assign）或者實(shí)例方法（比如：String.prototype.padStart）等，那么就需要使用babel-polyfill

babel-runtime ：提供了兼容舊環(huán)境的函數(shù)，使用的時(shí)候，需要我們自己手動(dòng)引入，比如： const Promise = require('
babel-runtime/core-js/promise')，存在的問(wèn)題：

• 手動(dòng)引入太繁瑣 -多個(gè)文件引入同一個(gè)helper（定義），造成代碼重復(fù)，增加代碼體積

babel-plugin-transform-runtime：

• 自動(dòng)引入helper（比如，上面引入的 Promise）

• babel-runtime提供helper定義，引入這個(gè)helper即可使用，避免重復(fù)

• 依賴于 babel-runtime 插件

transform-runtime插件的使用：直接在 .bablerc 文件中，添加一個(gè) plugins 的配置項(xiàng)即可?。?！

"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'] }

總結(jié)

babel-core babel核心包

babel-loader 用來(lái)解析js文件

babel-preset-* 新ES語(yǔ)法的解析和轉(zhuǎn)換

transform-runtime / babel-polyfill 兼容舊瀏覽器，到達(dá)支持新API目的

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

vue單文件組件

• vue-loader

• single-file components(單文件組件)

• 后綴名：.vue，該文件需要被預(yù)編譯后才能在瀏覽器中使用

• 注意：?jiǎn)挝募M件依賴于兩個(gè)包 vue-loader / vue-template-compiler

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

<!-- App.vue 示例代碼： --> <template> ?<div> ? ?<h1>VUE 單文件組件示例 -- App.vue</h1> ? ?<p>這是 模板內(nèi)容</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' // 導(dǎo)入 App 組件 import App from './App.vue' const vm = new Vue({ ?el: '#app', ?// 通過(guò) render 方法，渲染App組件 ?render: c => c(App) })

單文件組件使用步驟

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

• 在 webpack.config.js 中配置 .vue 文件的loader

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

• 創(chuàng)建 App.vue 單文件組件，注意：App可以是任意名稱

• 在 main.js 入口文件中，導(dǎo)入 vue 和 App.vue組件，通過(guò) render 將組件與實(shí)例掛到一起

單文件組件+路由

• vue - Vue.use

• Vue.use 和 路由

import Vue from 'vue' import App from './App.vue' // ------------- vue路由配置 開(kāi)始 -------------- import Home from './components/home/Home.vue' import Login from './components/login/Login.vue' // 1 導(dǎo)入 路由模塊 import VueRouter from 'vue-router' // 2 ** 調(diào)用use方法使用插件 ** Vue.use(VueRouter) // 3 創(chuàng)建路由對(duì)象 const router = new VueRouter({ ?routes: [ ? ?{ path: '/home', component: Home }, ? ?{ path: '/login', component: Login } ?] }) // ------------- vue路由配置 結(jié)束 -------------- const vm = new Vue({ ?el: '#app', ?render: c => c(App), ?// 4 掛載到 vue 實(shí)例中 ?router })

Mint-UI

• 基于 Vue.js 的移動(dòng)端組件庫(kù)

• Mint-UI

快速開(kāi)始

• 安裝：npm i -S mint-ui

// 1 導(dǎo)入 mint-ui模塊 import MintUI from 'mint-ui' // 2 導(dǎo)入 樣式 import 'mint-ui/lib/style.css' // 3 注冊(cè)插件 Vue.use(MintUI)

MUI

• MUI

• MUI 也是移動(dòng)端的UI庫(kù)

• 使用：從github下載包，找到dist文件夾，只需要導(dǎo)入樣式即可

// 只需要導(dǎo)入 MUI的樣式 即可，根據(jù)MUI的例子，直接使用HTML結(jié)果即可 // 導(dǎo)入樣式 import './lib/mui/css/mui.min.css'

ElementUI

• 這是PC端的UI組件庫(kù)

• 安裝：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" ? ? ?} ? ?]] ?] }

推薦大家使用Fundebug，一款很好用的BUG監(jiān)控工具~

Webpack 發(fā)布項(xiàng)目

• webpack 打包的各種坑

• webpack 命令能夠生成dist目錄到磁盤中，最終，把打包后的代碼，部署服務(wù)器中去

• webpack-dev-server 僅是在內(nèi)存中生成的文件，并沒(méi)有寫到磁盤中，所以，只能在開(kāi)發(fā)期間使用

創(chuàng)建項(xiàng)目發(fā)布配置文件

• 開(kāi)發(fā)期間配置文件：webpack.config.js

• 項(xiàng)目發(fā)布配置文件：webpack.prod.js （文件名稱非固定 production 生產(chǎn)環(huán)境）

• 命令：webpack --config webpack.prod.js 指定配置文件名稱運(yùn)行webpack

• 參數(shù)：--display-error-details 用于顯示webpack打包的錯(cuò)誤信息

/* package.json */ "scripts": { ?"build": "webpack --config webpack.prod.js" } // 在項(xiàng)目根目錄中創(chuàng)建 webpack.prod.js 文件 // 在 package.json 中, 配置一個(gè) scripts // 在 終端中 通過(guò) npm run build 對(duì)項(xiàng)目進(jìn)行打包

打包處理過(guò)程

• 刪除掉 devServer 相關(guān)的配置項(xiàng)

• 將圖片和字體文件輸出到指定的文件夾中

• 自動(dòng)刪除dist目錄

• 分離第三方包（將使用的vue等第三方包抽離到 vender.js 中）

• 壓縮混淆JS 以及 指定生成環(huán)境

• 抽取和壓縮CSS文件

• 壓縮HTML頁(yè)面

• 配合vue的異步組件，實(shí)現(xiàn)按需加載功能

處理圖片路徑

• 注意：如果limit小于比圖片大，那么圖片將被轉(zhuǎn)化為base64編碼格式

• name參數(shù)介紹

/* 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），并且保持原來(lái)的圖片文件擴(kuò)展名 ? ? ?// name：指定文件輸出路徑和輸出文件命令規(guī)則 ? ? ?// [hash:7]：表示使用7位哈希值代表文件名稱 ? ? ?// [ext]：表示保持文件原有后綴名 ? ? ?// name: 'imgs/img-[hash:7].[ext]' ? ?} ?} },

自動(dòng)刪除dist目錄

• 安裝：npm i -D clean-webpack-plugin

• 作用: 每次打包之前, 刪除上一次打包的dist目錄

/* webpack.prod.js */ const cleanWebpackPlugin = require('clean-webpack-plugin') plugins: [ ?// 創(chuàng)建一個(gè)刪除文件夾的插件，刪除dist目錄 ?new cleanWebpackPlugin(['./dist']) ]

分離第三方包

目的：將公共的第三方包，抽離為一個(gè)單獨(dú)的包文件，這樣防止重復(fù)打包！

• 例如：main.js、router、vuex中都引入了vue，不分離的話，vue會(huì)被打包3次

• 抽離后, vue文件只會(huì)被打包一次, 用到的地方僅僅是引用

/* webpack.prod.js */ // 1 入口 -- 打包文件的入口 entry: { ?// 項(xiàng)目代碼入口 ?app: path.join(__dirname, './src/js/main.js'), ?// 第三方包入口 ?vendor: ['vue', 'vue-router', 'axios'] }, output: { ?// 2 修改輸出文件路徑和命名規(guī)則 ?filename: 'js/[name].[chunkhash].js', }, plugins: [ ?// 3 抽離第三方包 ?new webpack.optimize.CommonsChunkPlugin({ ? ?// 將 entry 中指定的 ['vue', 'vue-router', 'axios'] 打包到名為 vendor 的js文件中 ? ?// 第三方包入口名稱，對(duì)應(yīng) entry 中的 vendor 屬性 ? ?name: 'vendor', ?}), ]

壓縮混淆JS

• 注意：uglifyjs 無(wú)法壓縮ES6的代碼

plugins: [ ?// 優(yōu)化代碼 ?// https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6 ?new webpack.optimize.UglifyJsPlugin({ ? ?// 壓縮 ? ?compress: { ? ? ?// 移除警告 ? ? ?warnings: false ? ?} ?}), ?// 指定環(huán)境為生產(chǎn)環(huán)境：vue會(huì)根據(jù)這一項(xiàng)啟用壓縮后的vue文件 ?new webpack.DefinePlugin({ ? ?'process.env': { ? ? ?'NODE_ENV': JSON.stringify('production') ? ?} ?}) ]

抽取和壓縮CSS文件

• 安裝：抽離 npm i -D extract-text-webpack-plugin

• 安裝：壓縮 npm i -D optimize-css-assets-webpack-plugin

• webpack 抽離CSS文檔

• 壓縮抽離后的CSS

壓縮和抽離CSS報(bào)錯(cuò)的說(shuō)明： Error processing file: css/style.css postcss-svgo: Error in parsing SVG: Unquoted attribute value

原因：壓縮和抽離CSS的插件中只允許 SVG 使用雙引號(hào)

/* webpack.prod.js */ // 分離 css 到獨(dú)立的文件中 const ExtractTextPlugin = require("extract-text-webpack-plugin"); // 壓縮 css 資源文件 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // bug描述: 生成后面的css文件中圖片路徑錯(cuò)誤，打開(kāi)頁(yè)面找不到圖片 // 解決：google搜索 webpack css loader 樣式圖片路徑 output: { ?// ... ?// https://doc.webpack-china.org/configuration/output/#output-publicpath ?// 設(shè)置公共路徑 ?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: [ ?// 通過(guò)插件抽離 css (參數(shù)) ?new ExtractTextPlugin("css/style.css"), ?// 抽離css 的輔助壓縮插件 ?new OptimizeCssAssetsPlugin() ]

壓縮HTML頁(yè)面

• 詳細(xì)的配置可以參考html-minifier

new htmlWebpackPlugin({ ?// 模板頁(yè)面 ?template: path.join(__dirname, './index.html'), ?// 壓縮HTML ?minify: { ? ?// 移除空白 ? ?collapseWhitespace: true, ? ?// 移除注釋 ? ?removeComments: true, ? ?// 移除屬性中的雙引號(hào) ? ?removeAttributeQuotes: true ?} }),

vue配合webpack實(shí)現(xiàn)路由按需加載

• Vue 路由懶加載

• Vue 異步組件

• Vue 組件懶加載淺析

• Vue.js路由懶加載[譯]

步驟

• 1 修改組件的引用方式

// 方式一: require.ensure() const NewsList = r => require.ensure([], () => r(require('../components/news/newslist.vue')), 'news') // 方式二: import() -- 推薦 // 注意：/* webpackChunkName: "newsinfo" */ 是一個(gè)特殊的語(yǔ)法，表示生成js文件的名稱 const NewsInfo = () => import(/* webpackChunkName: "newsinfo" */ '../components/news/newsinfo.vue')

• 2 修改 webpack 配置文件的output

output: { ?// ------添加 chunkFilename, 指定輸出js文件的名稱------ ?chunkFilename: 'js/[name].[chunkhash].js', },

推薦大家使用Fundebug，一款很好用的BUG監(jiān)控工具~

資料厚胎私信666