教程vue3 · Vue.js

[TOC] # **Vue -漸進式JavaScript框架** ## **介紹** Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架 ## **學習Vue要轉化思想** 不要在想著怎么操作DOM，而是想著如何操作數據！！！ ## **起步 - Hello Vue** ~~~ 安裝：npm i -g @vue/cli ~~~ vue-cli是什么? Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統，提供： * 通過 @vue/cli 搭建交互式的項目腳手架。 * 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。一個運行時依賴 (@vue/cli-service)，該依賴：可升級；基于 webpack 構建，并帶有合理的默認配置；可以通過項目內的配置文件進行配置；可以通過插件進行擴展。一個豐富的官方插件集合，集成了前端生態中最好的工具。一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。如何使用? ~~~ //創建一個項目 vue create your-app ~~~ ~~~ <div id="app">{{ msg }}</div>  <script src="vue.js"></script>  <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); } } ~~~ ## **指令** * 解釋：指令 (Directives) 是帶有 v- 前綴的特殊屬性 * 作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM ## **v-text** * 解釋：更新DOM對象的 textContent ~~~ <h1 v-text="msg"></h1> ~~~ ## **v-html** * 解釋：更新DOM對象的 innerHTML ~~~ <h1 v-html="msg"></h1> ~~~ ## **v-bind** * 作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM * 語法：v-bind:title="msg" * 簡寫：:title="msg" ~~~ <a v-bind:href="url"></a>  <a :href="url"></a> ~~~ ## **v-on** * 作用：綁定事件 * 語法：v-on:click="say" or v-on:click="say('參數', $event)" * 簡寫：@click="say" * 說明：綁定的事件定義在methods ~~~ <a v-on:click="doSomething"></a>  <a @click="doSomething"></a> ~~~ ## **事件修飾符** * .stop 阻止冒泡，調用 event.stopPropagation() * .prevent 阻止默認行為，調用 event.preventDefault() * .capture 添加事件偵聽器時使用事件捕獲模式 * .self 只當事件在該元素本身（比如不是子元素）觸發時，才會觸發事件 * .once 事件只觸發一次 ## **v-model** * 作用：在表單元素上創建雙向數據綁定 * 說明：監聽用戶的輸入事件以更新數據 * 案例：計算器 ~~~ <input type="text" v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> ~~~ ## **v-for** * 作用：基于源數據多次渲染元素或模板塊 ~~~  <div v-for="item in items"> {{ item.text }} </div>  <p v-for="(item, index) in list">{{item}} -- {{index}}</p>  <p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p> <p v-for="item in 10">{{item}}</p> ~~~ ## **key屬性** * 推薦：使用 v-for 的時候提供 key 屬性，以獲得性能提升。 * 說明：使用 key，VUE會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。 * vue key * vue key屬性的說明 ~~~ <div v-for="item in items" :key="item.id">  </div> ~~~ ## **樣式處理 -class和style** * 使用方式：v-bind:class="expression" or :class="expression" * 表達式的類型：字符串、數組、對象（重點） * 語法： ~~~ <div v-bind:class="{ active: true }"></div> ===> 解析后 <div class="active"></div>  <div :class="['active', 'text-danger']"></div> ===>解析后 <div class="active text-danger"></div>  <div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后 <div class="active text-danger"></div> --- style ---  <div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>   <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 * 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 如果要瀏覽器正常解析則需要使用* ``` <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">  <hello v-bind:msg="info"></hello>  <hello my-msg="abc"></hello> </div>  <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 ```  <com-a></com-a>  <com-b></com-b> <script> // 中間組件 var bus = new Vue() // 通信組件 var vm = new Vue({ el: '#app', components: { comB: { template: '<p>組件A告訴我：{{msg}}</p>', data() { return { msg: '' } }, created() { // 給中間組件綁定自定義事件注意:如果用到this 需要用箭頭函數 bus.$on('tellComB', (msg) => { this.msg = msg }) } }, comA: { template: '<button @click="emitFn">告訴B</button>', methods: { emitFn() { // 觸發中間組件中的自定義事件 bus.$emit('tellComB', '土豆土豆我是南瓜') } } } } }) </script> ``` ## **內容分發** * 通過<slot></slot> 標簽指定內容展示區域 * 案例： ```<div id="app"> <hello>  <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>  <script> new Vue({ el : "#app", mounted() { this.$refs.dv //獲取到元素 this.$refs.my //獲取到組件 }, components : { my : { template: `<a>sss</a>` } } }) </script> ``` ## **SPA -單頁應用程序** * SPA：Single Page Application 單頁Web應用（single page application，SPA），就是只有一個Web頁面的應用，是加載單個HTML頁面，并在用戶與應用程序交互時動態更新該頁面的Web應用程序。 * 單頁面應用程序：只有第一次會加載頁面, 以后的每次請求, 僅僅是獲取必要的數據.然后, 由頁面中js解析獲取的數據, 展示在頁面中傳統多頁面應用程序：對于傳統的多頁面應用程序來說, 每次請求服務器返回的都是一個完整的頁面 * 優勢 1 減少了請求體積，加快頁面響應速度，降低了對服務器的壓力 2 更好的用戶體驗，讓用戶在web app感受native app的流暢 * 實現思路和技術點 1 ajax 2 錨點的使用（window.location.hash #） 3 hashchange 事件 window.addEventListener("hashchange",function () {}) 4 監聽錨點值變化的事件，根據不同的錨點值，請求相應的數據 5 原本用作頁面內部進行跳轉，定位并展示相應的內容 * 路由路由即：瀏覽器中的哈希值（# hash）與展示視圖內容（template）之間的對應規則 vue中的路由是：hash 和 component的對應關系在 Web app 中，通過一個頁面來展示和管理整個應用的功能。 SPA往往是功能復雜的應用，為了有效管理所有視圖內容，前端路由應運而生！簡單來說，路由就是一套映射規則（一對一的對應規則），由開發人員制定規則。當URL中的哈希值（# hash）發生改變后，路由會根據制定好的規則，展示對應的視圖內容 ## **基本使用** * 安裝：npm i -S vue-router ~~~ <div id="app">  <router-link to="/home">首頁</router-link> <router-link to="/login">登錄</router-link>  <router-view></router-view> </div>  <script src="./vue.js"></script>  <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>   ``` ## **嵌套路由 - 子路由** * 路由是可以嵌套的，即：路由中又包含子路由 * 規則：父組件中包含 router-view，在路由規則中使用 children 配置 ``` // 父組件： const User = Vue.component('user', { template: ` <div class="user"> <h2>User Center</h2> <router-link to="/user/profile">個人資料</router-link> <router-link to="/user/posts">崗位</router-link>  <router-view></router-view> </div> ` }) // 子組件[簡寫] const UserProfile = { template: '<h3>個人資料：張三</h3>' } const UserPosts = { template: '<h3>崗位：FE</h3>' } // 路由 var router =new Router({ routers : [ { path: '/user', component: User, // 子路由配置： children: [ { // 當 /user/profile 匹配成功， // UserProfile 會被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 當 /user/posts 匹配成功 // UserPosts 會被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ] }) ``` ## **前端模塊化** * 為什么需要模塊化 * 1 最開始的js就是為了實現客戶端驗證以及一些簡單的效果 * 2 后來，js得到重視，應用越來越廣泛，前端開發的復雜度越來越高 * 3 舊版本的js中沒有提供與模塊（module）相關的內容 ## **模塊的概念** * 在js中，一個模塊就是實現特定功能的文件（js文件） * 遵循模塊的機制，想要什么功能就加載什么模塊 * 模塊化開發需要遵循規范 ## **模塊化解決的問題** * 1 命名沖突 * 2 文件依賴（加載文件） * 3 模塊的復用 * 4 統一規范和開發方式 ## **JS實現模塊化的規范** * AMD 瀏覽器端 * requirejs * CommonJS nodejs * 加載模塊：require() * 導出模塊：module.exports = {} / exports = {} * ES6 中的 import / export * CMD 瀏覽器端 * 玉伯（阿里前端大神） -> seajs * UMD 通用模塊化規范，可以兼容 AMD、CommonJS、瀏覽器中沒有模塊化規范等這些語法 * AMD 的使用 * Asynchronous Module Definition：異步模塊定義，瀏覽器端模塊開發的規范代表：require.js 特點：模塊被異步加載，模塊加載不影響后面語句的運行 * 1、定義模塊 ```// 語法:define(name, dependencies?, factory); // name表示：當前模塊的名稱，是一個字符串可有可無 // dependencies表示：當前模塊的依賴項，是一個數組無論依賴一項還是多項無則不寫 // factory表示：當前模塊要完成的一些功能，是一個函數 // 定義對象模塊 define({}) // 定義方法模塊 define(function() { return {} }) // 定義帶有依賴項的模塊 define(['js/a'], function() {}) ``` * 2、加載模塊 ```// - 注意：require的第一個參數必須是數組 // 參數必須是數組表示模塊路徑以當前文件為基準,通過回調函數中的參數獲取加載模塊中的變量參數與模塊按照順序一一對應 require(['a', 'js/b'], function(a, b) { // 使用模塊a 和模塊b 中的代碼 }) ``` * 3、路徑查找配置 requirejs 默認使用 baseUrl+paths 的路徑解析方式可以使用以下方式避開此設置： 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 的頁面所在路徑為準查找 ``` <script src="js/require.js" data-main="js/main"></script> ``` ## **Webpack** * webpack 官網 * bundle [?b?ndl] 捆綁，收集，歸攏，把…塞入 *1 webpack 將帶有依賴項的各個模塊打包處理后，變成了獨立的瀏覽器能夠識別的文件 2 webpack 合并以及解析帶有依賴項的模塊* ## **概述** *webpack 是一個現代 JavaScript 應用程序的模塊打包器(特點 module、 bundler)* *webpack 是一個模塊化方案（預編譯）* *webpack獲取具有依賴關系的模塊，并生成表示這些模塊的靜態資源* * 四個核心概念：入口(entry)、輸出(output)、加載器loader、插件(plugins) *對比* *模塊化方案: webpack 和 requirejs（通過編寫代碼的方式將前端的功能，劃分成獨立的模塊）* *browserify 是與 webpack 相似的模塊化打包工具* *webpack 預編譯 (在開發階段通過webpack進行模塊化處理, 最終項目上線, 就不在依賴于 webpack)* *requirejs 線上的編譯( 代碼運行是需要依賴與 requirejs 的 )* ## **webpack起源** * webpack解決了現存模塊打包器的兩個痛點： 1 Code Spliting - 代碼分離按需加載 2 靜態資源的模塊化處理方案 * webpack與模塊 * 前端模塊系統的演進 * 在webpack看來：所有的靜態資源都是模塊 * webpack 模塊能夠識別以下等形式的模塊之間的依賴： * JS的模塊化規范： ES2015 import export CommonJS require() module.exports AMD define 和 require * 非JS等靜態資源： css/sass/less 文件中的 @import 圖片連接，比如：樣式 url(...) 或 HTML <img src=...> 字體等 ## **webpack文檔和資源** * webpack 中文網 * 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** * 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的作用： * 1 語法轉換：將新的ES語法轉化為瀏覽器能識別的語法（babel-preset-*） * 2 polyfill瀏覽器兼容：讓低版本瀏覽器兼容最新版ES的API ## **babel-preset-*** * Babel通過語法轉換器，能夠支持最新版本的JavaScript語法 * babel-preset-* 用來指定我們書寫的是什么版本的JS代碼 * 作用：將新的ES語法轉化為瀏覽器能識別的ES5代碼 * ES6語法提案的批準流程 * ES2015 也就是 ES6, 下一個版本是ES7, 從 ES6 到 ES7之間經歷了 5 個階段 * babel-preset-es2015 轉換es6的語法 * babel-preset-stage-0 轉換比es6更新的語法 ```Stage 0 - Strawman（展示階段） Stage 1 - Proposal（征求意見階段） Stage 2 - Draft（草案階段） Stage 3 - Candidate（候選人階段） Stage 4 - Finished（定案階段） Stage 0 is "i've got a crazy idea", stage 1 is "this idea might not be stupid", stage 2 is "let's use polyfills and transpilers to play with it", stage 3 is "let's let browsers implement it and see how it goes", stage 4 is "now it's javascript". ``` ## **babel-polyfill 和 transform-runtime** * 作用：實現瀏覽器對不支持API的兼容（兼容舊環境、填補） * 在低版本瀏覽器中使用高級的ES6或ES7的方法或函數，比如：'abc'.padStart(10) * 方式一 polyfill * 方式二 transform-runtime * 方式一：npm i -S babel-polyfill * 方式二：npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime * 注意：babel-runtime包中的代碼會被打包到你的代碼中（-S） ```區別： polyfill 所有兼容性問題，都可以通過polyfill解決（包括：實例方法）、污染全局環境 runtime 除了實例方法以外，其他兼容新問題都能解決、不污染全局環境 polyfill：如果想要支持全局對象（比如：`Promise`）、靜態方法（比如：`Object.assign`）或者**實例方法**（比如：`String.prototype.padStart`）等，那么就需要使用`babel-polyfill` babel-runtime ：提供了兼容舊環境的函數，使用的時候，需要我們自己手動引入比如：const Promise = require('babel-runtime/core-js/promise') 存在的問題： 1 手動引入太繁瑣 2 多個文件引入同一個helper（定義），造成代碼重復，增加代碼體積 babel-plugin-transform-runtime： 1 自動引入helper（比如，上面引入的 Promise） 2 babel-runtime提供helper定義，引入這個helper即可使用，避免重復 3 依賴于 babel-runtime 插件 transform-runtime插件的使用：直接在 .bablerc 文件中，添加一個 plugins 的配置項即可！！！ "plugins": [ "transform-runtime" ] /* babel-polyfill 的使用步驟： 1 main.js */ // 第一行引入 require("babel-polyfill") var s = 'abc'.padStart(4) console.log(s) // 2 webpack.config.js 配置 module.exports = { entry: ['babel-polyfill', './js/main.js'] } ``` ## **總結** ```babel-core babel核心包 babel-loader 用來解析js文件 babel-preset-* 新ES語法的解析和轉換 transform-runtime / babel-polyfill 兼容舊瀏覽器，到達支持新API目的 // 判斷瀏覽器是否兼容 padStart 這個 API if (!String.prototype.padStart) { // 如果不兼容, 就自己模擬 padStart的功能實現一份 String.prototype.padStart = function padStart(targetLength,padString) { } } ``` ## **vue單文件組件** * vue-loader * single-file components(單文件組件) * 后綴名：.vue，該文件需要被預編譯后才能在瀏覽器中使用 * 注意：單文件組件依賴于兩個包 vue-loader / vue-template-compiler * 安裝：npm i -D vue-loader vue-template-compiler ``` <template> <div> <h1>VUE 單文件組件示例 -- App.vue</h1> <p>這是模板內容</p> </div> </template> <script> // 組件中的邏輯代碼 export default {} </script> <style> /* 組件樣式 */ h1 { color: red; } </style> // webpack.config.js 配置： module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ] } ``` ## **使用單文件組件** ``` /* main.js */ import Vue from 'vue' // 導入 App 組件 import App from './App.vue' const vm = new Vue({ el: '#app', // 通過 render 方法，渲染App組件 render: c => c(App) }) ``` ## **單文件組件使用步驟** * 1 安裝：npm i -D vue-loader vue-template-compiler * 2 在 webpack.config.js 中配置 .vue 文件的loader * { test: /\.vue$/, use: 'vue-loader' } * 3 創建 App.vue 單文件組件，注意：App可以是任意名稱 * 4 在 main.js 入口文件中，導入 vue 和 App.vue組件，通過 render 將組件與實例掛到一起 ## **單文件組件+路由** * 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 的移動端組件庫 * Mint-UI ## **快速開始** * 安裝：npm i -S mint-ui ``` // 1 導入 mint-ui模塊 import MintUI from 'mint-ui' // 2 導入樣式 import 'mint-ui/lib/style.css' // 3 注冊插件 Vue.use(MintUI) ``` ## **MUI** * MUI * MUI 也是移動端的UI庫 * 使用：從github下載包，找到dist文件夾，只需要導入樣式即可 ``` // 只需要導入 MUI的樣式即可，根據MUI的例子，直接使用HTML結果即可 // 導入樣式 import './lib/mui/css/mui.min.css' ``` ## **ElementUI** * 這是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" } 1 在項目根目錄中創建 webpack.prod.js 文件 2 在 package.json 中, 配置一個 scripts 3 在終端中通過 npm run build 對項目進行打包 ``` ## **打包處理過程** ``` 1 刪除掉 devServer 相關的配置項 2 將圖片和字體文件輸出到指定的文件夾中 3 自動刪除dist目錄 4 分離第三方包（將使用的vue等第三方包抽離到 vender.js 中） 5 壓縮混淆JS 以及指定生成環境 6 抽取和壓縮CSS文件 7 壓縮HTML頁面 8 配合vue的異步組件，實現按需加載功能 ``` ## **處理圖片路徑** * 注意：如果limit小于比圖片大，那么圖片將被轉化為base64編碼格式 * name參數介紹 ``` /* webpack.prod.js */ // 處理URL路徑的loader { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: { loader: 'url-loader', options: { limit: 8192, name: 'images/[hash:7].[ext]' // 作用：將圖片輸出到images文件夾中，文件名采用7位的哈希值（MD5），并且保持原來的圖片文件擴展名 // name：指定文件輸出路徑和輸出文件命令規則 // [hash:7]：表示使用7位哈希值代表文件名稱 // [ext]：表示保持文件原有后綴名 // name: 'imgs/img-[hash:7].[ext]' } } }, ``` ## **自動刪除dist目錄** * 安裝：npm i -D clean-webpack-plugin * 作用: 每次打包之前, 刪除上一次打包的dist目錄 ``` /* webpack.prod.js */ const cleanWebpackPlugin = require('clean-webpack-plugin') plugins: [ // 創建一個刪除文件夾的插件，刪除dist目錄 new cleanWebpackPlugin(['./dist']) ] ``` ## **分離第三方包** * 目的：將公共的第三方包，抽離為一個單獨的包文件，這樣防止重復打包！ * 例如：main.js、router、vuex中都引入了vue，不分離的話，vue會被打包3次 * 抽離后, vue文件只會被打包一次, 用到的地方僅僅是引用 ``` /* webpack.prod.js */ // 1 入口 -- 打包文件的入口 entry: { // 項目代碼入口 app: path.join(__dirname, './src/js/main.js'), // 第三方包入口 vendor: ['vue', 'vue-router', 'axios'] }, output: { // 2 修改輸出文件路徑和命名規則 filename: 'js/[name].[chunkhash].js', }, plugins: [ // 3 抽離第三方包 new webpack.optimize.CommonsChunkPlugin({ // 將 entry 中指定的 ['vue', 'vue-router', 'axios'] 打包到名為 vendor 的js文件中 // 第三方包入口名稱，對應 entry 中的 vendor 屬性 name: 'vendor', }), ] ``` ## **壓縮混淆JS** * 注意：uglifyjs 無法壓縮ES6的代碼 ``` plugins: [ // 優化代碼 // https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6 new webpack.optimize.UglifyJsPlugin({ // 壓縮 compress: { // 移除警告 warnings: false } }), // 指定環境為生產環境：vue會根據這一項啟用壓縮后的vue文件 new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } }) ] ``` ## **抽取和壓縮CSS文件** * 安裝：抽離 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頁面** * 詳細的配置可以參考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路由懶加載[譯] #### 步驟 * 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', }, ```