vue開發(fā)看這篇文章就夠了

vuex vue-router vue.js webpack javascript
Vue -漸進(jìn)式JavaScript框架
介紹
vue 中文網(wǎng)
vue github
Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架
庫和框架的區(qū)別
我們所說的前端框架與庫的區(qū)別？
Library
庫，本質(zhì)上是一些函數(shù)的集合。每次調(diào)用函數(shù)，實(shí)現(xiàn)一個特定的功能，接著把控制權(quán)交給使用者
代表：jQuery
jQuery這個庫的核心：DOM操作，即：封裝DOM操作，簡化DOM操作
Framework
框架，是一套完整的解決方案，使用框架的時(shí)候，需要把你的代碼放到框架合適的地方，框架會在合適的時(shí)機(jī)調(diào)用你的代碼
框架規(guī)定了自己的編程方式，是一套完整的解決方案
使用框架的時(shí)候，由框架控制一切，我們只需要按照規(guī)則寫代碼
主要區(qū)別
You call Library, Framework calls you
核心點(diǎn)：誰起到主導(dǎo)作用（控制反轉(zhuǎn)）

框架中控制整個流程的是框架
使用庫，由開發(fā)人員決定如何調(diào)用庫中提供的方法（輔助）
好萊塢原則：Don't call us, we'll call you.
框架的侵入性很高（從頭到尾）
MVVM的介紹
MVVM，一種更好的UI模式解決方案
從Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普
MVC
M: Model 數(shù)據(jù)模型（專門用來操作數(shù)據(jù)，數(shù)據(jù)的CRUD）
V：View 視圖（對于前端來說，就是頁面）
C：Controller 控制器（是視圖和數(shù)據(jù)模型溝通的橋梁，用于處理業(yè)務(wù)邏輯）
MVVM組成
MVVM ===> M / V / VM
M：model數(shù)據(jù)模型
V：view視圖
VM：ViewModel 視圖模型
優(yōu)勢對比
MVC模式，將應(yīng)用程序劃分為三大部分，實(shí)現(xiàn)了職責(zé)分離
在前端中經(jīng)常要通過 JS代碼 來進(jìn)行一些邏輯操作，最終還要把這些邏輯操作的結(jié)果現(xiàn)在頁面中。也就是需要頻繁的操作DOM
MVVM通過數(shù)據(jù)雙向綁定讓數(shù)據(jù)自動地雙向同步

V（修改數(shù)據(jù)） -> M
M（修改數(shù)據(jù)） -> V
數(shù)據(jù)是核心
Vue這種MVVM模式的框架，不推薦開發(fā)人員手動操作DOM
Vue中的MVVM
雖然沒有完全遵循 MVVM 模型，Vue 的設(shè)計(jì)無疑受到了它的啟發(fā)。因此在文檔中經(jīng)常會使用 vm (ViewModel 的簡稱) 這個變量名表示 Vue 實(shí)例
學(xué)習(xí)Vue要轉(zhuǎn)化思想
不要在想著怎么操作DOM，而是想著如何操作數(shù)據(jù)?。?！
起步 - Hello Vue
安裝：npm i -S vue
<!-- 指定vue管理內(nèi)容區(qū)域，需要通過vue展示的內(nèi)容都要放到找個元素中 通常我們也把它叫做邊界 數(shù)據(jù)只在邊界內(nèi)部解析-->
<div id="app">{{ msg }}</div>

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

<!-- 使用 vue -->
<script>
var vm = new Vue({
// el：提供一個在頁面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)
el: '#app',
// Vue 實(shí)例的數(shù)據(jù)對象，用于給 View 提供數(shù)據(jù)
data: {
msg: 'Hello Vue'
}
})
</script>
Vue實(shí)例
注意 1：先在data中聲明數(shù)據(jù)，再使用數(shù)據(jù)
注意 2：可以通過 vm.$data 訪問到data中的所有屬性，或者 vm.msg
var vm = new Vue({
data: {
msg: '大家好，...'
}
})

vm.$data.msg === vm.msg // true
數(shù)據(jù)綁定
最常用的方式：Mustache(插值語法)，也就是 {{}} 語法
解釋：{{}}從數(shù)據(jù)對象data中獲取數(shù)據(jù)
說明：數(shù)據(jù)對象的屬性值發(fā)生了改變，插值處的內(nèi)容都會更新
說明：{{}}中只能出現(xiàn)JavaScript表達(dá)式 而不能解析js語句
注意：Mustache 語法不能作用在 HTML 元素的屬性上
<h2>Hello, {{ msg }}.</h2>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>

<!-- ?。?！錯誤示范?。?！ -->
<h2 title="{{ err }}"></h2>
雙向數(shù)據(jù)綁定 Vue two way data binding
雙向數(shù)據(jù)綁定：將DOM與Vue實(shí)例的data數(shù)據(jù)綁定到一起，彼此之間相互影響

數(shù)據(jù)的改變會引起DOM的改變
DOM的改變也會引起數(shù)據(jù)的變化
原理：Object.defineProperty中的get和set方法

getter和setter：訪問器
作用：指定讀取或設(shè)置對象屬性值的時(shí)候，執(zhí)行的操作
Vue - 深入響應(yīng)式原理
MDN - Object.defineProperty()
/ defineProperty語法 介紹 /
var obj = {}
Object.defineProperty(obj, 'msg', {
// 設(shè)置 obj.msg = "1" 時(shí)set方法會被系統(tǒng)調(diào)用 參數(shù)分別是設(shè)置后和設(shè)置前的值
set: function (newVal, oldVal) { },
// 讀取 obj.msg 時(shí)get方法會被系統(tǒng)調(diào)用
get: function ( newVal, oldVal ) {}
})
Vue雙向綁定的極簡實(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 = {}

// 給對象obj添加msg屬性，并設(shè)置setter訪問器
Object.defineProperty(obj, 'msg', {
// 設(shè)置 obj.msg 當(dāng)obj.msg反生改變時(shí)set方法將會被調(diào)用
set: function (newVal) {
// 當(dāng)obj.msg被賦值時(shí) 同時(shí)設(shè)置給 input/span
txt.value = newVal
sp.innerText = newVal
}
})

// 監(jiān)聽文本框的改變 當(dāng)文本框輸入內(nèi)容時(shí) 改變obj.msg
txt.addEventListener('keyup', function (event) {
obj.msg = event.target.value
})
</script>
動態(tài)添加數(shù)據(jù)的注意點(diǎn)
注意：只有data中的數(shù)據(jù)才是響應(yīng)式的，動態(tài)添加進(jìn)來的數(shù)據(jù)默認(rèn)為非響應(yīng)式
可以通過以下方式實(shí)現(xiàn)動態(tài)添加數(shù)據(jù)的響應(yīng)式

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 將參數(shù)中的所有對象屬性和值 合并到第一個參數(shù) 并返回合并后的對象/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })
異步DOM更新
說明：Vue 異步執(zhí)行 DOM 更新，監(jiān)視所有數(shù)據(jù)改變，一次性更新DOM
優(yōu)勢：可以去除重復(fù)數(shù)據(jù)，對于避免不必要的計(jì)算和 避免重復(fù) DOM 操作上，非常重要
如果需要那到更新后dom中的數(shù)據(jù) 則需要通過 Vue.nextTick(callback)：在DOM更新后，執(zhí)行某個操作（屬于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('直接打?。?, this.$el.children[0].innerText);
}
}
指令
解釋：指令 (Directives) 是帶有 v- 前綴的特殊屬性
作用：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM
v-text
解釋：更新DOM對象的 textContent
<h2 v-text="msg"></h2>
v-html
解釋：更新DOM對象的 innerHTML
<h2 v-html="msg"></h2>
v-bind
作用：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 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('參數(shù)', $event)"簡寫：@click="say"
br/>簡寫：@click="say"
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
事件修飾符
.stop 阻止冒泡，調(diào)用 event.stopPropagation()
.prevent 阻止默認(rèn)行為，調(diào)用 event.preventDefault()
.capture 添加事件偵聽器時(shí)使用事件捕獲模式
.self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)，才會觸發(fā)事件
.once 事件只觸發(fā)一次
v-model
作用：在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定
說明：監(jiān)聽用戶的輸入事件以更新數(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 屬性，以獲得性能提升。
說明：使用 key，VUE會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。
vue key
vue key屬性的說明
<div v-for="item in items" :key="item.id">
<!-- 內(nèi)容 -->
</div>
樣式處理 -class和style
使用方式：v-bind:class="expression" or :class="expression"
表達(dá)式的類型：字符串、數(shù)組、對象（重點(diǎn)）
語法：
<!-- 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 將多個 樣式對象 應(yīng)用到一個元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定義的對象 -->
<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">這個元素展示出來了嗎？？？</p>
<p v-if="isShow">這個元素，在HTML結(jié)構(gòu)中嗎？？？</p>
提升性能：v-pre
說明：vue會跳過這個元素和它的子元素的編譯過程?？梢杂脕盹@示原始 Mustache 標(biāo)簽。跳過大量沒有指令的節(jié)點(diǎn)會加快編譯。
<span v-pre>{{ this will not be compiled }}</span>
提升性能：v-once
說明：vue只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能。
<span v-once>This will never change: {{msg}}</span>
過濾器 filter
作用：文本數(shù)據(jù)格式化
過濾器可以用在兩個地方：{{}}和 v-bind 表達(dá)式
兩種過濾器：1 全局過濾器 2 局部過濾器
全局過濾器
說明：通過全局方式創(chuàng)建的過濾器，在任何一個vue實(shí)例中都可以使用
注意：使用全局過濾器的時(shí)候，需要先創(chuàng)建全局過濾器，再創(chuàng)建Vue實(shí)例
顯示的內(nèi)容由過濾器的返回值決定
Vue.filter('filterName', function (value) {
// value 表示要過濾的內(nèi)容
})
示例：
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>

<script>
Vue.filter('date', function(value, format) {
// value 要過濾的字符串內(nèi)容，比如：dateStr
// format 過濾器的參數(shù)，比如：'YYYY-MM-DD hh:mm:ss'
})
</script>
局部過濾器
說明：局部過濾器是在某一個vue實(shí)例的內(nèi)容創(chuàng)建的，只在當(dāng)前實(shí)例中起作用
{
data: {},
// 通過 filters 屬性創(chuàng)建局部過濾器
// 注意：此處為 filters
filters: {
filterName: function(value, format) {}
}
}
按鍵值修飾符
說明：在監(jiān)聽鍵盤事件時(shí)，Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加關(guān)鍵修飾符
鍵盤事件 - 鍵值修飾符
其他：修飾鍵（.ctrl等）、鼠標(biāo)按鍵修飾符（.left等）
// 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit()@keyup.13="submit"
br/>@keyup.13="submit"
@keyup.enter="add"

// 通過全局 config.keyCodes 對象自定義鍵值修飾符別名
Vue.config.keyCodes.f2 = 113
// 使用自定義鍵值修飾符@keyup.enter.f2="add"
br/>@keyup.enter.f2="add"
概述：watch是一個對象，鍵是需要觀察的表達(dá)式，值是對應(yīng)回調(diào)函數(shù)
作用：當(dāng)表達(dá)式的值發(fā)生變化后，會調(diào)用對應(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)聽對象屬性的變化
b: {
  handler: function (val, oldVal) { /* ... */ },
  // deep : true表示是否監(jiān)聽對象內(nèi)部屬性值的變化 
  deep: true
},

// 只監(jiān)視user對象中age屬性的變化
'user.age': function (val, oldVal) {
},

}
})
計(jì)算屬性
說明：計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，只有在它的依賴發(fā)生改變時(shí)才會重新求值
注意：Mustache語法（{{}}）中不要放入太多的邏輯，否則會讓模板過重、難以理解和維護(hù)
注意：computed中的屬性不能與data中的屬性同名，否則會報(bào)錯
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)對象即可 (一些根實(shí)例特有的選項(xiàng)除外)。
實(shí)例生命周期也叫做：組件生命周期
生命周期介紹
vue生命周期鉤子函數(shù)
簡單說：一個組件從開始到最后消亡所經(jīng)歷的各種狀態(tài)，就是一個組件的生命周期
生命周期鉤子函數(shù)的定義：從組件被創(chuàng)建，到組件掛載到頁面上運(yùn)行，再到頁面關(guān)閉組件被卸載，這三個階段總是伴隨著組件各種各樣的事件，這些事件，統(tǒng)稱為組件的生命周期函數(shù)！

注意：Vue在執(zhí)行過程中會自動調(diào)用生命周期鉤子函數(shù)，我們只需要提供這些鉤子函數(shù)即可
注意：鉤子函數(shù)的名稱都是Vue中規(guī)定好的！
鉤子函數(shù) - beforeCreate()
說明：在實(shí)例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用
注意：此時(shí)，無法獲取 data中的數(shù)據(jù)、methods中的方法
鉤子函數(shù) - created()
注意：這是一個常用的生命周期，可以調(diào)用methods中的方法、改變data中的數(shù)據(jù)
vue實(shí)例生命周期 參考1
vue實(shí)例生命周期 參考2
使用場景：發(fā)送請求獲取數(shù)據(jù)
鉤子函數(shù) - beforeMounted()
說明：在掛載開始之前被調(diào)用
鉤子函數(shù) - mounted()
說明：此時(shí)，vue實(shí)例已經(jīng)掛載到頁面中，可以獲取到el中的DOM元素，進(jìn)行DOM操作
鉤子函數(shù) - beforeUpdated()
說明：數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。你可以在這個鉤子中進(jìn)一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程。
注意：此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁面中的DOM元素是更新之前的
鉤子函數(shù) - updated()
說明：組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。
鉤子函數(shù) - beforeDestroy()
說明：實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
使用場景：實(shí)例銷毀之前，執(zhí)行清理任務(wù)，比如：清除定時(shí)器等
鉤子函數(shù) - destroyed()
說明：Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀。
axios
Promise based HTTP client for the browser and node.js

以Promise為基礎(chǔ)的HTTP客戶端，適用于：瀏覽器和node.js
封裝ajax，用來發(fā)送請求，異步獲取數(shù)據(jù)
安裝：npm i -S axios
axios
// 在瀏覽器中使用，直接引入js文件使用下面的GET/POST請求方式即可
// 1 引入 axios.js
// 2 直接調(diào)用axios提供的API發(fā)送請求
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參數(shù)
axios.get('/user?id=89')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

// url和參數(shù)分離，使用對象
axios.get('/user', {
params: {
id: 12345
}
})
Post 請求
不同環(huán)境中處理 POST請求
默認(rèn)情況下，axios 會將JS對象序列化為JSON對象。為了使用 application/x-www-form-urlencoded 格式發(fā)送請求，我們可以這樣：
// 使用 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=點(diǎn)個贊不過份')

axios.post('/user', qs.stringify({
firstName: 'Fred',
lastName: 'Flintstone'
}))
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
全局配置
// 設(shè)置請求公共路徑：
axios.defaults.baseURL = 'http://vue.studyit.io'
攔截器
攔截器會攔截發(fā)送的每一個請求，請求發(fā)送之前執(zhí)行request中的函數(shù)，請求發(fā)送完成之后執(zhí)行response中的函數(shù)
// 請求攔截器
axios.interceptors.request.use(function (config) {
// 所有請求之前都要執(zhí)行的操作

return config;

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

return Promise.reject(error);

});

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

return response;

}, function (error) {
// 錯誤處理
return Promise.reject(error);
});
自定義指令
作用：進(jìn)行DOM操作
使用場景：對純 DOM 元素進(jìn)行底層操作，比如：文本框獲得焦點(diǎn)
vue 自定義指令用法實(shí)例
兩種指令：1 全局指令 2 局部指令
全局自定義指令
// 第一個參數(shù)：指令名稱
// 第二個參數(shù)：配置對象，指定指令的鉤子函數(shù)
Vue.directive('directiveName', {
// bind中只能對元素自身進(jìn)行DOM操作，而無法對父級元素操作
// 只調(diào)用一次 指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
bind( el，binding, vnode ) {
// 參數(shù)詳解
// el：指令所綁定的元素，可以用來直接操作 DOM 。
// binding：一個對象，包含以下屬性：
// name：指令名，不包括 v- 前綴。
// value：指令的綁定值，等號后面的值 。
// oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
// expression：字符串形式的指令表達(dá)式 等號后面的字符串 形式
// arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
// modifiers：指令修飾符。例如：v-directive.foo.bar中，修飾符對象為 { foo: true, bar: true }。
// vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。。
// oldVnode：上一個虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
},
// inserted這個鉤子函數(shù)調(diào)用的時(shí)候，當(dāng)前元素已經(jīng)插入頁面中了，也就是說可以獲取到父級節(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 ) {
// 指令所在的元素在頁面中消失，觸發(fā)
}
})
// 簡寫 如果你想在 bind 和 update 時(shí)觸發(fā)相同行為，而不關(guān)心其它的鉤子:
Vue.directive('自定義指令名', function( el, binding ) {})
// 例：
Vue.directive('color', function(el, binding) {
el.style.color = binging.value
})
// 使用 注意直接些會被i成data中的數(shù)據(jù)“red” 需要字符串則嵌套引號"'red'"
<p v-color="'red'"></p>
局部自定義指令
var vm = new Vue({
el : "#app",
directives: {
directiveName: { }
}
})
vue 剖析Vue原理&實(shí)現(xiàn)雙向綁定MVVM
組件
組件系統(tǒng)是 Vue 的另一個重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。仔細(xì)想想，幾乎任意類型的應(yīng)用界面都可以抽象為一個組件樹
創(chuàng)建組件的兩種方式：1 全局組件 2 局部組件
全局組件
說明：全局組件在所有的vue實(shí)例中都可以使用
注意：先注冊組件，再初始化根實(shí)例
// 1 注冊全局組件
Vue.component('my-component', {
// template 只能有一個根元素
template: '<p>A custom component!</p>',
// 組件中的 data 必須是函數(shù) 并且函數(shù)的返回值必須是對象
data() {
return {
msg: '注意：組件的data必須是一個函數(shù)?。?！'
}
}
})

// 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)建一個“子類”。參數(shù)是一個包含組件選項(xiàng)的對象。
  // 注冊組件，傳入一個擴(kuò)展過的構(gòu)造器
  Vue.component('my-component', Vue.extend({ / ... / }))

// 注冊組件，傳入一個選項(xiàng)對象 (自動調(diào)用 Vue.extend)
Vue.component('my-component', { / ... / })

var Home = Vue.extend({
template: '',
data() {}
})
Vue.component('home', Home)
局部組件
說明：局部組件，是在某一個具體的vue實(shí)例中定義的，只能在這個vue實(shí)例中使用
var Child = {
template: '<div>A custom component!</div>'
}

new Vue({
// 注意：此處為 components
components: {
// <my-component> 將只在當(dāng)前vue實(shí)例中使用
// my-component 為組件名 值為配置對象
'my-component': {
template: ``,
data () { return { } },
props : []
}
}
})
is特性
在某些特定的標(biāo)簽中只能存在指定表恰 如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>內(nèi)容</li>
}
}
})
</script>
組件通訊
父組件到子組件
方式：通過子組件props屬性來傳遞數(shù)據(jù) props是一個數(shù)組
注意：屬性的值必須在組件中通過props屬性顯示指定，否則，不會生效
說明：傳遞過來的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及其傳遞過來的屬性
props: ['msg', 'myMsg'],
template: '<h2>這是 hello 組件，這是消息：{{msg}} --- {{myMsg}}</h2>'
}
}
})
</script>
子組件到父組件
方式：父組件給子組件傳遞一個函數(shù)，由子組件調(diào)用這個函數(shù)

說明：借助vue中的自定義事件（v-on:cunstomFn="fn"）
步驟:

1、在父組件中定義方法 parentFn
2、在子組件 組件引入標(biāo)簽 中綁定自定義事件 v-on:自定義事件名="父組件中的方法" ==> @pfn="parentFn"
3、子組件中通過$emit()觸發(fā)自定義事件事件 this.$emit(pfn,參數(shù)列表。。。)
<hello @pfn="parentFn"></hello>

<script>
Vue.component('hello', {
template: '<button @click="fn">按鈕</button>',
methods: {
// 子組件：通過$emit調(diào)用
fn() {
this.$emit('pfn', '這是子組件傳遞給父組件的數(shù)據(jù)')
}
}
})
new Vue({
methods: {
// 父組件：提供方法
parentFn(data) {
console.log('父組件：', data)
}
}
})
</script>
非父子組件通訊
在簡單的場景下，可以使用一個空的 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ā)
通過<slot></slot> 標(biāo)簽指定內(nèi)容展示區(qū)域
案例：

<!-- html代碼 -->
<div id="app">
<hello>
<!-- 如果只有一個slot插槽 那么不需要指定名稱 -->
<p slot="插槽名稱">我是額外的內(nèi)容</p>
</hello>
</div>
// js代碼
new vue({
el : "#app",
components : {
hello : {
template : <br/>&lt;div&gt;<br/>&lt;p&gt;我是子組件中的內(nèi)容&lt;/p&gt;<br/>&lt;slot name="名稱"&gt;&lt;/slot&gt;<br/>&lt;/div&gt;<br/>
}
}
})
獲取組件（或元素） - 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 -單頁應(yīng)用程序
SPA： Single Page Application
單頁Web應(yīng)用（single page application，SPA），就是只有一個Web頁面的應(yīng)用，
是加載單個HTML頁面，并在用戶與應(yīng)用程序交互時(shí)動態(tài)更新該頁面的Web應(yīng)用程序。
單頁面應(yīng)用程序：

只有第一次會加載頁面, 以后的每次請求, 僅僅是獲取必要的數(shù)據(jù).然后, 由頁面中js解析獲取的數(shù)據(jù), 展示在頁面中
傳統(tǒng)多頁面應(yīng)用程序：

對于傳統(tǒng)的多頁面應(yīng)用程序來說, 每次請求服務(wù)器返回的都是一個完整的頁面
優(yōu)勢

1 減少了請求體積，加快頁面響應(yīng)速度，降低了對服務(wù)器的壓力
2 更好的用戶體驗(yàn)，讓用戶在web app感受native app的流暢
實(shí)現(xiàn)思路和技術(shù)點(diǎn)

1 ajax
2 錨點(diǎn)的使用（window.location.hash #）
3 hashchange 事件 window.addEventListener("hashchange",function () {})
4 監(jiān)聽錨點(diǎn)值變化的事件，根據(jù)不同的錨點(diǎn)值，請求相應(yīng)的數(shù)據(jù)
5 原本用作頁面內(nèi)部進(jìn)行跳轉(zhuǎn)，定位并展示相應(yīng)的內(nèi)容
路由
路由即：瀏覽器中的哈希值（# hash）與展示視圖內(nèi)容（template）之間的對應(yīng)規(guī)則
vue中的路由是：hash 和 component的對應(yīng)關(guān)系
在 Web app 中，通過一個頁面來展示和管理整個應(yīng)用的功能。
SPA往往是功能復(fù)雜的應(yīng)用，為了有效管理所有視圖內(nèi)容，前端路由 應(yīng)運(yùn)而生！
簡單來說，路由就是一套映射規(guī)則（一對一的對應(yīng)規(guī)則），由開發(fā)人員制定規(guī)則。
當(dāng)URL中的哈希值（# hash）發(fā)生改變后，路由會根據(jù)制定好的規(guī)則，展示對應(yīng)的視圖內(nèi)容

基本使用
安裝：npm i -S vue-router
<div id="app">
<!-- 5 路由入口 指定跳轉(zhuǎn)到只定入口 -->
<router-link to="/home">首頁</router-link>
<router-link to="/login">登錄</router-link>

  <!-- 7 路由出口：用來展示匹配路由視圖內(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)建兩個組件
  const Home = Vue.component('home', {
    template: '<h2>這是 Home 組件</h2>'
  })
  const Login = Vue.component('login', {
    template: '<h2>這是 Login 組件</h2>'
  })

  // 4 創(chuàng)建路由對象
  const router = new VueRouter({
    routes: [
      // 路徑和組件一一對應(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)航高亮

說明：當(dāng)前匹配的導(dǎo)航鏈接，會自動添加router-link-exact-active router-link-active類
配置：linkActiveClass
匹配路由模式

配置：mode
new Router({
routers:[],
mode: "hash", //默認(rèn)hash | history 可以達(dá)到隱藏地址欄hash值 | abstract，如果發(fā)現(xiàn)沒有瀏覽器的 API 則強(qiáng)制進(jìn)入
linkActiveClass : "now" //當(dāng)前匹配的導(dǎo)航鏈接將被自動添加now類
})
路由參數(shù)
說明：我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同一個組件，此時(shí)，可以通過路由參數(shù)來處理
語法：/user/:id
使用：當(dāng)匹配到一個路由時(shí)，參數(shù)值會被設(shè)置到 this.$route.params
其他：可以通過 $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/ 都不能被匹配
    // 將來通過$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ù)對象 -->
<!--  {{$router.query}} 獲取路由中的查詢字符串 返回對象 -->

嵌套路由 - 子路由
路由是可以嵌套的，即：路由中又包含子路由
規(guī)則：父組件中包含 router-view，在路由規(guī)則中使用 children 配置
// 父組件：
const User = Vue.component('user', {
template: <br/>&lt;div class="user"&gt;<br/>&lt;h3&gt;User Center&lt;/h3&gt;<br/>&lt;router-link to="/user/profile"&gt;個人資料&lt;/router-link&gt;<br/>&lt;router-link to="/user/posts"&gt;崗位&lt;/router-link&gt;<br/>&lt;!-- 子路由展示在此處 --&gt;<br/>&lt;router-view&gt;&lt;/router-view&gt;<br/>&lt;/div&gt;<br/>
})

// 子組件[簡寫]
const UserProfile = {
  template: '<h4>個人資料：張三</h4>'
}
const UserPosts = {
  template: '<h4>崗位：FE</h4>'
}

// 路由
var router =new Router({
  routers : [

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

前端模塊化
為什么需要模塊化
1 最開始的js就是為了實(shí)現(xiàn)客戶端驗(yàn)證以及一些簡單的效果
2 后來，js得到重視，應(yīng)用越來越廣泛，前端開發(fā)的復(fù)雜度越來越高
3 舊版本的js中沒有提供與模塊（module）相關(guān)的內(nèi)容
模塊的概念
在js中，一個模塊就是實(shí)現(xiàn)特定功能的文件（js文件）
遵循模塊的機(jī)制，想要什么功能就加載什么模塊
模塊化開發(fā)需要遵循規(guī)范
模塊化解決的問題
1 命名沖突
2 文件依賴（加載文件）
3 模塊的復(fù)用
4 統(tǒng)一規(guī)范和開發(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、瀏覽器中沒有模塊化規(guī)范 等這些語法
AMD 的使用

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

// 語法:define(name, dependencies?, factory);
// name表示：當(dāng)前模塊的名稱，是一個字符串 可有可無
// dependencies表示：當(dāng)前模塊的依賴項(xiàng)，是一個數(shù)組無論依賴一項(xiàng)還是多項(xiàng) 無則不寫
// factory表示：當(dāng)前模塊要完成的一些功能，是一個函數(shù)

// 定義對象模塊
define({})
// 定義方法模塊
define(function() {
  return {}
})
// 定義帶有依賴項(xiàng)的模塊
define(['js/a'], function() {})

2、加載模塊

// - 注意：require的第一個參數(shù)必須是數(shù)組

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

3、路徑查找配置

requirejs 默認(rèn)使用 baseUrl+paths 的路徑解析方式
可以使用以下方式避開此設(shè)置：

1 以.js結(jié)尾
2 以 / 開始
3 包含協(xié)議：https:// 或 http://
// 配置示例
// 注意配置應(yīng)當(dāng)在使用之前
require.config({
baseUrl: './js' // 配置基礎(chǔ)路徑為：當(dāng)前目錄下的js目錄
})
require(['a']) // 查找 基礎(chǔ)路徑下的 ./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、非模塊化和依賴項(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í)候，指定了模塊名稱，需要使用該名稱來引用模塊
// 定義 這個模塊名稱與paths中的名稱相同
define('moduleA', function() {})
// 導(dǎo)入
require.config({
paths: {
// 此處的模塊名：moduleA
moduleA: 'assets/demo/moduleA'
}
})
5、路徑加載規(guī)則

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

1 通過 config 配置規(guī)則查找
2 通過 data-main 指定的路徑查找
3 以引入 requirejs 的頁面所在路徑為準(zhǔn)查找
<!--
設(shè)置data-main屬性
1 data-main屬性指定的文件也會同時(shí)被加載
2 用于指定查找其他模塊的基礎(chǔ)路徑
-->
<script src="js/require.js" data-main="js/main"></script>
Webpack
webpack 官網(wǎng)
bundle [?b?ndl] 捆綁，收集，歸攏，把…塞入
1 webpack 將帶有依賴項(xiàng)的各個模塊打包處理后，變成了獨(dú)立的瀏覽器能夠識別的文件
2 webpack 合并以及解析帶有依賴項(xiàng)的模塊
概述
webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(特點(diǎn) module、 bundler)
webpack 是一個模塊化方案（預(yù)編譯）
webpack獲取具有依賴關(guān)系的模塊，并生成表示這些模塊的靜態(tài)資源
四個核心概念：入口(entry)、輸出(output)、加載器loader、插件(plugins)
對比
模塊化方案: webpack 和 requirejs（通過編寫代碼的方式將前端的功能，劃分成獨(dú)立的模塊）

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

webpack 預(yù)編譯 (在開發(fā)階段通過webpack進(jìn)行模塊化處理, 最終項(xiàng)目上線, 就不在依賴于 webpack)
requirejs 線上的編譯( 代碼運(yùn)行是需要依賴與 requirejs 的 )
webpack起源
webpack解決了現(xiàn)存模塊打包器的兩個痛點(diǎn)：

1 Code Spliting - 代碼分離 按需加載
2 靜態(tài)資源的模塊化處理方案
webpack與模塊
前端模塊系統(tǒng)的演進(jìn)
在webpack看來：所有的靜態(tài)資源都是模塊
webpack 模塊能夠識別以下等形式的模塊之間的依賴：
JS的模塊化規(guī)范：

ES2015 import export
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

目的：在任何目錄中通過CLI使用 webpack 這個命令
項(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來管理項(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)建，語法是：webpack 入口文件 輸出文件
4 注意：需要在頁面中引入 輸出文件 的路徑（此步驟可通過配置webpack去掉）
/
src/js/index.js
/

// 1 導(dǎo)入 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')

//命令行運(yùn)行 `webpack src/js/index.js dist/bundle.js 目錄生成在命令行運(yùn)行目錄
/
運(yùn)行流程：
1、webpack 根據(jù)入口找到入口文件
2、分析js中的模塊化語法
3、將所有關(guān)聯(lián)文件 打包合并輸出到出口
/
webpack-dev-server 配置
一、package.json配置方式
安裝：npm i -D webpack-dev-server
作用：配合webpack，創(chuàng)建開發(fā)環(huán)境（啟動服務(wù)器、監(jiān)視文件變化、自動編譯、刷新瀏覽器等），提高開發(fā)效率
注意：無法直接在終端中執(zhí)行 webpack-dev-server，需要通過 package.json 的 scripts 實(shí)現(xiàn)
使用方式：npm run dev
// 參數(shù)解釋 注意參數(shù)是無序的 有值的參數(shù)空格隔開
// --open 自動打開瀏覽器
// --contentBase ./ 指定瀏覽器 默認(rèn)打開的頁面路徑中的 index.html 文件
// --open 自動打開瀏覽器
// --port 8080 端口號
// --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, './'),
// 自動打開瀏覽器
open: true,
// 端口號
port: 8888,

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

plugins: [
// ---------------- 2 啟用熱更新插件 ----------------
new webpack.HotModuleReplacementPlugin()
]
html-webpack-plugin 插件

安裝：npm i -D html-webpack-plugin
作用：根據(jù)模板，自動生成html頁面
優(yōu)勢：頁面存儲在內(nèi)存中，自動引入bundle.js、css等文件
/ webpack.config.js /
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new htmlWebpackPlugin({
// 模板頁面路徑
template: path.join(__dirname, './index.html'),
// 在內(nèi)存中生成頁面路徑，默認(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通過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 用來配置匹配文件規(guī)則（正則）
// use 是一個數(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í)，圖片被重命名以url路徑形式加載（此時(shí)，需要file-loader來加載圖片）
圖片文件重命名，保證相同文件不會被加載多次。例如：一張圖片（a.jpg）拷貝一個副本（b.jpg），同時(shí)引入這兩張圖片，重命名后只會加載一次，因?yàn)檫@兩張圖片就是同一張
文件重命名以后，會通過MD5加密的方式，來計(jì)算這個文件的名稱
/ 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
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 文件/
// 將來babel-loader運(yùn)行的時(shí)候，會檢查這個配置文件，并讀取相關(guān)的語法和插件配置
{
"presets": ["env"]
}
babel的說明
babel的作用：

1 語法轉(zhuǎn)換：將新的ES語法轉(zhuǎn)化為瀏覽器能識別的語法（babel-preset-）
2 polyfill瀏覽器兼容：讓低版本瀏覽器兼容最新版ES的API
babel-preset-
Babel通過語法轉(zhuǎn)換器，能夠支持最新版本的JavaScript語法
babel-preset-* 用來指定我們書寫的是什么版本的JS代碼
作用：將新的ES語法轉(zhuǎn)化為瀏覽器能識別的ES5代碼
ES6語法提案的批準(zhǔn)流程

ES2015 也就是 ES6, 下一個版本是ES7, 從 ES6 到 ES7之間經(jīng)歷了 5 個階段
babel-preset-es2015 轉(zhuǎn)換es6的語法
babel-preset-stage-0 轉(zhuǎn)換比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
作用：實(shí)現(xiàn)瀏覽器對不支持API的兼容（兼容舊環(huán)境、填補(bǔ)）

在低版本瀏覽器中使用高級的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包中的代碼會被打包到你的代碼中（-S）
區(qū)別：
polyfill 所有兼容性問題，都可以通過polyfill解決（包括：實(shí)例方法）、污染全局環(huán)境
runtime 除了實(shí)例方法以外，其他兼容新問題都能解決、不污染全局環(huán)境

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

babel-runtime ：提供了兼容舊環(huán)境的函數(shù)，使用的時(shí)候，需要我們自己手動引入
比如： const Promise = require('babel-runtime/core-js/promise')
存在的問題：
1 手動引入太繁瑣
2 多個文件引入同一個helper（定義），造成代碼重復(fù)，增加代碼體積
babel-plugin-transform-runtime：
1 自動引入helper（比如，上面引入的 Promise）
2 babel-runtime提供helper定義，引入這個helper即可使用，避免重復(fù)
3 依賴于 babel-runtime 插件

transform-runtime插件的使用：
直接在 .bablerc 文件中，添加一個 plugins 的配置項(xiàng)即可?。。?br/>"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 用來解析js文件

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

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

// 判斷瀏覽器是否兼容 padStart 這個 API
if (!String.prototype.padStart) {
// 如果不兼容, 就自己模擬 padStart的功能實(shí)現(xiàn)一份
String.prototype.padStart = function padStart(targetLength,padString) {
}
}
vue單文件組件
vue-loader
single-file components(單文件組件)
后綴名：.vue，該文件需要被預(yù)編譯后才能在瀏覽器中使用
注意：單文件組件依賴于兩個包 vue-loader / vue-template-compiler
安裝：npm i -D vue-loader vue-template-compiler
<!-- App.vue 示例代碼： -->
<template>
<div>
<h2>VUE 單文件組件示例 -- App.vue</h2>
<p>這是 模板內(nèi)容</p>
</div>
</template>

<script>
// 組件中的邏輯代碼
export default {}
</script>

<style>
/ 組件樣式 /
h2 {
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',
// 通過 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 創(chuàng)建 App.vue 單文件組件，注意：App可以是任意名稱
4 在 main.js 入口文件中，導(dǎo)入 vue 和 App.vue組件，通過 render 將組件與實(shí)例掛到一起
單文件組件+路由
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 導(dǎo)入 路由模塊
import VueRouter from 'vue-router'
// 2 調(diào)用use方法使用插件
Vue.use(VueRouter)
// 3 創(chuàng)建路由對象
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 的移動端組件庫
Mint-UI
快速開始
安裝：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 注冊插件
Vue.use(MintUI)
MUI
MUI
MUI 也是移動端的UI庫
使用：從github下載包，找到dist文件夾，只需要導(dǎo)入樣式即可
// 只需要導(dǎo)入 MUI的樣式 即可，根據(jù)MUI的例子，直接使用HTML結(jié)果即可
// 導(dǎo)入樣式
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 發(fā)布項(xiàng)目
webpack 打包的各種坑
webpack 命令能夠生成dist目錄到磁盤中，最終，把打包后的代碼，部署服務(wù)器中去
webpack-dev-server 僅是在內(nèi)存中生成的文件，并沒有寫到磁盤中，所以，只能在開發(fā)期間使用
創(chuàng)建項(xiàng)目發(fā)布配置文件
開發(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打包的錯誤信息
/ package.json /

"scripts": {
"build": "webpack --config webpack.prod.js"
}
1 在項(xiàng)目根目錄中創(chuàng)建 webpack.prod.js 文件
2 在 package.json 中, 配置一個 scripts
3 在 終端中 通過 npm run build 對項(xiàng)目進(jìn)行打包
打包處理過程
1 刪除掉 devServer 相關(guān)的配置項(xiàng)
2 將圖片和字體文件輸出到指定的文件夾中
3 自動刪除dist目錄
4 分離第三方包（將使用的vue等第三方包抽離到 vender.js 中）
5 壓縮混淆JS 以及 指定生成環(huán)境
6 抽取和壓縮CSS文件
7 壓縮HTML頁面
8 配合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），并且保持原來的圖片文件擴(kuò)展名

  // name：指定文件輸出路徑和輸出文件命令規(guī)則
  // [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: [
// 創(chuàng)建一個刪除文件夾的插件，刪除dist目錄
new cleanWebpackPlugin(['./dist'])
]
分離第三方包
目的：將公共的第三方包，抽離為一個單獨(dú)的包文件，這樣防止重復(fù)打包！

例如：main.js、router、vuex中都引入了vue，不分離的話，vue會被打包3次
抽離后, vue文件只會被打包一次, 用到的地方僅僅是引用
/ 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文件中
// 第三方包入口名稱，對應(yīng) entry 中的 vendor 屬性
name: 'vendor',
}),
]
壓縮混淆JS
注意：uglifyjs 無法壓縮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會根據(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)錯的說明：
Error processing file: css/style.css
postcss-svgo: Error in parsing SVG: Unquoted attribute value

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

// 分離 css 到獨(dú)立的文件中
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
// 設(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: [
// 通過插件抽離 css (參數(shù))
new ExtractTextPlugin("css/style.css"),
// 抽離css 的輔助壓縮插件
new OptimizeCssAssetsPlugin()
]
壓縮HTML頁面
詳細(xì)的配置可以參考html-minifier
new htmlWebpackPlugin({
// 模板頁面
template: path.join(__dirname, './index.html'),

// 壓縮HTML
minify: {
// 移除空白
collapseWhitespace: true,
// 移除注釋
removeComments: true,
// 移除屬性中的雙引號
removeAttributeQuotes: true
}
}),
vue配合webpack實(shí)現(xiàn)路由按需加載
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',
},