什么是Vue.js
- Vue.js是目前最火的一個(gè)前端框架玫坛，React是最流行的一個(gè)前端框架易迹，（React除了開發(fā)網(wǎng)站剔蹋，還可以開發(fā)手機(jī)App杆麸，Vue語法也是可以用于手機(jī)App開發(fā)的催烘，需要借助于Weex）
- Vue.js是前端的主流框架之一沥阱，和Angualr.js、React.js一起伊群，并稱為前端三大主流框架
- Vue.js是一套構(gòu)建用戶界面的框架考杉，**只關(guān)注視圖層++屁使，它不僅易上手，還便于與第三方庫或既有項(xiàng)目整合奔则。（Vue有配套的第三方類庫蛮寂，可以整合起來做大型項(xiàng)目的開發(fā)）
- 前端的主要工作？主要負(fù)責(zé)MVC中的V這一層易茬，蛀牙工作就是和界面打交道酬蹋。
為什么學(xué)習(xí)流行框架
- 企業(yè)為了提高開發(fā)效率，在企業(yè)中抽莱，時(shí)間就是效率范抓，效率就是金錢。
- 提高開發(fā)效率的發(fā)展歷程：原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js / Vue.js（能夠幫助我們減少不必要的DOM操作食铐；提高渲染效率匕垫；雙向數(shù)據(jù)綁定的概念【通過跨年提供的指令，前端程序員只需要關(guān)心數(shù)據(jù)的業(yè)務(wù)邏輯虐呻，不在關(guān)心DOM是如何渲染的】）
- 在Vue中象泵，一個(gè)核心的概念，就是讓用戶不再操作DOM元素斟叼，解放了用戶的雙手偶惠，讓程序員可以更多的時(shí)候去關(guān)注業(yè)務(wù)邏輯。
- 增強(qiáng)就業(yè)競(jìng)爭(zhēng)力
框架和庫的區(qū)別
- 框架：是一套完整的解決方案：對(duì)項(xiàng)目的侵入性較大朗涩，項(xiàng)目如果需要更換框架忽孽，則需要重新架構(gòu)整個(gè)項(xiàng)目
- 庫（插件）：提供某一個(gè)小功能，對(duì)項(xiàng)目的侵入性較小谢床。如果某個(gè)庫無法完成某些需求兄一，可以很容易切換到其他庫實(shí)現(xiàn)需求。
Node（后端）中的MVC與前端中的MVVM之間的區(qū)別
MVC是后端的分層開發(fā)概念识腿。M指Model出革，主要處理數(shù)據(jù)；V是視圖層覆履，（前端頁面）袁余；C是業(yè)務(wù)邏輯層（路由原在、用戶登錄注銷）
MVVM是前端視圖層的概念，主要關(guān)注于視圖層分離抄腔。也就是說：MVVM把前端的視圖層楞抡，分為了三部分Model伟众，View，VM ViewModel
為什么有了MVC還要有MVVM
Vue.js基本代碼和MVVM之間的對(duì)應(yīng)關(guān)系
Vue之 基本代碼結(jié)構(gòu) 和插值表達(dá)式召廷、v-cloak
Vue指令之v-tex和v-html
Vue指令之v-bind的三種用法
- 直接使用 指令
v-bind - 使用簡(jiǎn)化指令
: - 在綁定的時(shí)候凳厢，拼接綁定內(nèi)容：
:title="btnTitle + ',這是追加的內(nèi)容'"
Vue指令之v-on和跑馬燈效果
跑馬燈效果
-
HTML結(jié)構(gòu)：
<div id="app"> <input type="button" value="快樂" @click="run"> <input type="button" value="我不" @click="stop"> <h4>{{ msg }}</h4> </div>
2.Vue實(shí)例
//在vm實(shí)例中账胧，如果要獲取data里的數(shù)據(jù)或調(diào)用methods中的方法，
//必須通過 this.數(shù)據(jù)屬性名 或 this.方法名來進(jìn)行訪問先紫，this代表vm實(shí)例對(duì)象
var vm = new Vue({
el: '#app',
data: {
msg: '快樂的一只小青蛙~',
intervalId: null //在data上定義定時(shí)器的Id治泥，開一個(gè)定時(shí)器就重新定義一遍
},
methods: {
run() {
// 判斷定時(shí)器是否為null，是否在靜止?fàn)顟B(tài)點(diǎn)擊的“快樂”按鈕遮精，不是則返回居夹，是則執(zhí)行下列代碼
if(this.intervalId != null) return;
//es6語法，不需要先獲取this再重新賦值
//嵌套函數(shù)內(nèi)部的this與外部的this保持一致
this.intervalId = setInterval( () => {
// 獲取頭部的第一個(gè)字符
var start = this.msg.substring(0,1)
// 獲取到后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串本冲，并賦值給 this.msg
this.msg = end + start
//vm實(shí)例會(huì)監(jiān)聽自己內(nèi)部data中所有數(shù)據(jù)的改變准脂，只要數(shù)據(jù)已發(fā)生編發(fā)，就會(huì)自動(dòng)把最新的數(shù)據(jù)檬洞，
//從data上同步到頁面中去狸膏，因此程序員只要關(guān)心數(shù)據(jù)的變化，不需要關(guān)心重新渲染
}, 400)
},
stop() {
clearInterval(this.intervalId)
// 每當(dāng)清除了定時(shí)器之后添怔，需要把定時(shí)器重新賦值給null
this.intervalId = null
}
}
})
//分析
//1. 給“快樂”按鈕湾戳，綁定一個(gè)點(diǎn)擊事件
//2. 在按鈕的事件處理函數(shù)中，寫相關(guān)的業(yè)務(wù)邏輯：拿到msg字符串广料，然后低哦用字符串的
//substring來進(jìn)行字符串的截取操作院塞，把第一個(gè)字符截取出來放到最后一個(gè)位置即可
//3. 為了實(shí)現(xiàn)點(diǎn)擊下按鈕，自動(dòng)截取的功能性昭，需要把步驟2中國的代碼拦止，放到一個(gè)定時(shí)器中去。
Vue指令之v-on的縮寫和事件修飾符
事件修飾符：
- .stop 阻止冒泡
- .prevent 阻止默認(rèn)事件
- .capture 添加事件偵聽器時(shí)使用事件捕獲模式
- .self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)
- .once事件只觸發(fā)一次
Vue指令之v-model和雙向數(shù)據(jù)綁定
簡(jiǎn)易計(jì)算器案例
- HTML代碼結(jié)構(gòu)
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
-
vue實(shí)例
var vm = new Vue({ el: "#app", data: { n1: 0, n2: 0, result: 0, opt: '+' }, methods: { calc () { //1.算數(shù)方法 // switch(this.opt){ // case '+': // this.result = parseInt(this.n1) + parseInt(this.n2) // break; // case '-': // this.result = parseInt(this.n1) - parseInt(this.n2) // break; // case '*': // this.result = parseInt(this.n1) * parseInt(this.n2) // break; // case '/': // this.result = parseInt(this.n1) / parseInt(this.n2) // break; // } //2.投機(jī)取巧糜颠，正式開發(fā)中汹族，盡量少用 var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)' this.result = eval(codeStr) } } });
在Vue中 使用樣式
使用class樣式
1.數(shù)組
<h1 :class="['red','thin']">這是一個(gè)熟悉的H1</h1>
2.數(shù)組中使用三元表達(dá)式
<h1 :class="['red','thin',isactive?'active':'']">這是一個(gè)熟悉的H1</h1>
3.數(shù)組中嵌套對(duì)象
<h1 :class="['red','thin',{'active':isactive}]>這是一個(gè)熟悉的H1</h1>
4.直接使用對(duì)象
<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個(gè)熟悉的H1</h1>
使用內(nèi)聯(lián)樣式
1.直接在元素上通過 :style的形式，書寫樣式對(duì)象
<h1 :style="{color:'red', 'font-size': '40px'}">這是一個(gè)熟悉的H1</h1>
2.將樣式對(duì)象其兴，定義到data中顶瞒，并直接引用到:style中
- 在data上定義樣式：
data: {
h1StyleObj: {color: 'red', 'font-size': '40px', 'font-weight': '200'}
}
- 在元素中，通過屬性綁定的形式元旬，將樣式對(duì)象引用到元素中
<h1: style="h1StyleObj">這是一個(gè)熟悉的H1</h1>
3.在：style中通過數(shù)組榴徐，引用多個(gè)data上的樣式對(duì)象
- 在data上定義樣式：
data: {
h1StyleObj1: { color: 'red', 'font-size': '40px', 'font-wight': '200'},
h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中，通過屬性綁定的形式匀归，將楊思對(duì)象應(yīng)用到元素中:
<h1 :style="{h1StyleObj,h2StyleObj2}">這是一個(gè)熟悉的H1</h1>
Vue指令之v-for和key屬性
1.迭代數(shù)組
<ul>
<li v-for="{item,i} in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
</ul>
2.迭代對(duì)象中的屬性
<!-- 循環(huán)遍歷對(duì)象身上的屬性 -->
<div v-for="{val,key,i} in userInfo>{{val}} --- {{key}} --- {{i}}</div>
3.迭代數(shù)字
<p v-for="i in 10">這是第 {{i}} 個(gè)p標(biāo)簽</p>
2.2.0+版本里坑资，當(dāng)在組件中使用 v-for 時(shí)，key現(xiàn)在是必須的穆端。
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)袱贮，它默認(rèn)用 “就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變体啰，Vue將不是移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的順序攒巍，而是簡(jiǎn)單復(fù)用此處每個(gè)元素嗽仪，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。
為了給Vue 一個(gè)提示柒莉，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份闻坚，從而復(fù)用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性兢孝。
Vue指令之v-if和v-show
一般來說鲤氢，v-if有更高的切換消耗而v-show有更高的初始渲染消耗，因此西潘，如果需要頻繁切換v-show較好卷玉，如果在運(yùn)行時(shí)條件不大可能改變v-if較好
Vue.js-Day2
品牌管理案例
添加新品牌
刪除品牌
根據(jù)條件篩選品牌
- 1.x版本中的filterBy指令，在2.x中已經(jīng)被廢除：
[filterBy - 指令]
<tr v-for="item in list:filterBy searchName in "name">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime))</td>
<td>
<a href="#" @click.prevent="del{item.id}">刪除</a>
</td>
</tr>
- 在2.x版本中：
Vue調(diào)試工具vue-devtools的安裝步驟和使用
https://chrome.google.com/webstore/search/devtools?hl=zh-CN
過濾器
概念：Vue.js允許自定義過濾器喷市，可被用作一些常見的文本格式化相种。過濾器可以用在兩個(gè)地方：sustache 插值和 v-bind 表達(dá)式。過濾器應(yīng)該被添加在JavaScript表達(dá)式的尾部品姓，由“管道”符指示寝并；
私有過濾器
- HTML元素
<td>{{item.ctime | dataforms('yyyy-mmm-dd')}}</td>
-
私有
filters定義方式：//定義一個(gè)私有的過濾器 var vm2 = new Vue({ el: '#app2', data: { dt: new Date() }, methods: { }, //帶 s ，對(duì)象腹备， 定義私有過濾器衬潦， 過濾器有兩個(gè)條件: [過濾器名稱 和 處理函數(shù)] //過濾器調(diào)用的時(shí)候，采用的是就近原則植酥，如果私有過濾器和全局過濾器的名稱一樣镀岛，則優(yōu)先調(diào)用私有的 filters: { dataFormat: function(dateStr, pattern = '') { //根據(jù)給定的時(shí)間字符串，得到特定的時(shí)間 var dt = new Date(dateStr) // yyyy - mm - dd var y = dt.getFullYear() //padStart（maxLength, fillString=''）字符填充方法友驮，最大長(zhǎng)度為2漂羊，不夠則在前面填充0 //padEnd(maxLength, fillString='')同理，不同的是在后面添加 var m = (dt.getMonth() + 1 ).toString().padStart(2,'0') var d = dt.getDate().toString().padStart(2,'0') //先轉(zhuǎn)成小寫 if(pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-$wmomiau` }else { var hh = dt.getHours().toString().padStart(2,'0') var mm = dt.getMinutes().toString().padStart(2,'0') var ss = dt.getSeconds().toString().padStart(2,'0') return `${y}-${m}-$wg2o2ks ${hh}:${mm}:${ss}~~~~` } } } })
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillSting='')來填充字符串卸留；
全局過濾器
//定義一個(gè)全局的過濾器, 進(jìn)行時(shí)間格式化走越，被所有的vm實(shí)例共用
Vue.filter('dataFormat',function (dateStr, pattern="") {
//根據(jù)給定的時(shí)間字符串，得到特定的時(shí)間
var dt = new Date(dateStr)
// yyyy - mm - dd, 獲取年月日
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
// return y + '-' + m +'-' +d //用以下形式代替：
//return `${y}-${m}-$wkkusmq`
//先轉(zhuǎn)成小寫
//如果 傳遞進(jìn)來的字符串類型 耻瑟，轉(zhuǎn)為小寫后旨指，等于yyyy-mm-dd，那么就返回 年-月-日
//否則喳整，就返回 年-月-日 時(shí)：分：秒
if(pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$k2aakcc`
}else {
//獲取時(shí)分秒
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-$ac2iukg ${hh}:${mm}:${ss}`
}
})
注意：當(dāng)有局部和全局兩個(gè)名稱相同的過濾器的時(shí)候谆构，會(huì)以就近原則進(jìn)行調(diào)用，即：局部過濾器優(yōu)先于全局過濾器被調(diào)用算柳！
鍵盤修飾符以及自定義鍵盤修飾符
1. 1.x中自定義鍵盤修飾符【了解即可】
Vue.directive('on').keyCodes.f2 = 113;
2.x自定義鍵盤修飾符 https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81
1.1 通過Vue.config.keyCodes.名稱 = 按鍵值來自定義按鍵修飾符的別名：
`Vue.config.keyCodes.f2 = 113;`
1.2 使用自定義的按鍵修飾符
`<input type="text" v-model="name" @keyup.f2="add">`
2.可以直接調(diào)用按鍵值(f2的按鍵值為113)
`<input type="text" v-model="name" @keyup.113="add">`
3.使用系統(tǒng)內(nèi)置的按鍵可以不用定義
`<input type="text" v-model="name" @keyup.enter="add">`
自定義指令 https://cn.vuejs.org/v2/guide/custom-directive.html
- 自定義全局和局部的 自定義指令：
全局
// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
- 鉤子函數(shù)
https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0
// 使用 Vue.derective() 自定義全局指令
// 其中：參數(shù)1：指令的名稱低淡，注意，在定義的時(shí)候瞬项，指令的名稱前面蔗蹋，不需要加 v- 前綴，
// 但是： 在調(diào)用的時(shí)候囱淋，必須在指令名稱前加上 v- 前綴來進(jìn)行調(diào)用
//參數(shù)2：是一個(gè)對(duì)象猪杭，這個(gè)對(duì)象身上，有一些指令相關(guān)的函數(shù)妥衣，這些函數(shù)可以在特定的階段皂吮，執(zhí)行相關(guān)的操作
Vue.directive('focus',{
bind:function(el) {//每當(dāng)指令綁定到元素上的時(shí)候，就立即執(zhí)行 bind 函數(shù)税手，只執(zhí)行一次
/// 注意： 在每個(gè)函數(shù)中蜂筹，第一個(gè)參數(shù)永遠(yuǎn)是 el ，表示被綁定了指令的元素芦倒，這個(gè) el 參數(shù)艺挪，是一個(gè)原生的JS對(duì)象
// 在元素剛綁定了指令的時(shí)候，還沒有插入到 DOM 中去兵扬，這時(shí)候麻裳，調(diào)用 focus 方法沒有作用
// 因?yàn)椋粋€(gè)元素器钟，只有插入DOM之后津坑，才能獲取焦點(diǎn)
//el.focus()
},
inserted: function(el) {// inserted 表示元素插入到 DOM 中的時(shí)候，會(huì)執(zhí)行 inserted 函數(shù)傲霸，只執(zhí)行一次
el.focus()
// 和 JS 行為有關(guān)的操作疆瑰，最好在 inserted 中去執(zhí)行，防止 JS 行為不生效
},
updated: function() {// 當(dāng) VNode 更新的時(shí)候昙啄，會(huì)執(zhí)行 updated 函數(shù)乃摹，可能被觸發(fā)多次
}
})
- 鉤子函數(shù)的參數(shù)
- el：指令所綁定的元素
- binding
- name：指令的名字，不包含
v-前綴 - value：指令的綁定值：例如：
v-my-directive="1 + 1"中跟衅，綁定值為2孵睬。 - expression：字符串形式的表達(dá)式，例如
v-my-directive="1 + 1"中伶跷，表達(dá)式為"1 + 1"掰读。
html：
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'blue'">
自定義指令：
//自定義設(shè)置字體顏色的指令
Vue.directive('color',{
// 樣式只要通過指令綁定給了元素，不管這個(gè)元素有沒有被插入到頁面中去叭莫，這個(gè)元素肯定有一個(gè)內(nèi)聯(lián)樣式
// 將來元素肯定會(huì)顯示到頁面上蹈集，這時(shí)候?yàn)g覽器的渲染引擎必然會(huì)解析樣式，應(yīng)用給這個(gè)元素
bind:function(el,binding) {
// el.style.color = 'red'
// 和 樣式 相關(guān)的操作雇初，一般都可以在 bind 中定義
el.style.color = binding.value
}
})
- 簡(jiǎn)寫函數(shù)：在 bind 和 update 時(shí)觸發(fā)相同行為拢肆，而不關(guān)心其它的鉤子函數(shù)
下面的例子是自定義私有指令和簡(jiǎn)寫函數(shù)
directives: { // 自定義私有指令
'fontweight': { // 設(shè)置字體粗細(xì)
bind: function (el,binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function(el,binding) { //簡(jiǎn)寫函數(shù)，注意：這個(gè) function 等同于把代碼寫到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
Vue實(shí)例的生命周期
- 什么是生命周期：從Vue實(shí)例創(chuàng)建、運(yùn)行郭怪、到銷毀期間支示，總是伴隨著各種各樣的事件，這些事件鄙才，統(tǒng)稱為生命周期颂鸿。
- 生命周期鉤子：就是生命周期事件的別名而已；
- 生命周期鉤子 = 生命周期函數(shù) = 生命周期事件
- 主要的生命周期函數(shù)分類：
- 創(chuàng)建期間的生命周期函數(shù)：
- beforeCreate：實(shí)例剛在內(nèi)存中被創(chuàng)建出來攒庵，此時(shí)嘴纺，還沒有初始化好 data 和 methods 屬性
- created: 實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建完成；此時(shí) data 和 methods 已經(jīng)創(chuàng)建完成浓冒，此時(shí)還沒有開始編譯模板
- beforeMount：此時(shí)已經(jīng)完成了模板的編譯栽渴，但是還沒有掛載到頁面中
- mounted：此時(shí)，已經(jīng)將編譯好的模板稳懒，掛載到了頁面指定的容器中顯示
- 運(yùn)行期間的生命周期函數(shù)：
- beforeUpdate：狀態(tài)更新之前執(zhí)行此函數(shù)闲擦，此時(shí) data 中的狀態(tài) 值是最新的，但是界面上顯示的數(shù)據(jù)還是舊的僚祷。因?yàn)榇藭r(shí)還沒有開始重新渲染 DOM 節(jié)點(diǎn)
- updated：實(shí)例更新完畢之后調(diào)用此函數(shù)佛致，此時(shí) data 中的狀態(tài)值 和 界面上顯示的數(shù)據(jù)，都已經(jīng)完成了更新辙谜，界面已經(jīng)被重新渲染好了
- 銷毀期間的生命周期函數(shù)：
- beforeDestroy：實(shí)例銷毀之前調(diào)用俺榆。在這一步，實(shí)例仍然完全可用
- destroyed：Vue 實(shí)例銷毀后調(diào)用装哆。調(diào)用后罐脊，Vue 實(shí)例指示的所有東西都會(huì)解除綁定，所有的事件監(jiān)聽器會(huì)被移除蜕琴，所有的子實(shí)例也會(huì)被銷毀萍桌。
vue-resource實(shí)現(xiàn)get，post凌简，jsonp請(qǐng)求
除了 vue-resource 之外上炎，還可以使用 axios的第三方包實(shí)現(xiàn)數(shù)據(jù)的請(qǐng)求
- 之前的學(xué)習(xí)中，如何發(fā)起數(shù)據(jù)請(qǐng)求雏搂？
- 常見的數(shù)據(jù)請(qǐng)求類型藕施？get，post凸郑，jsonp
- 測(cè)試的URL請(qǐng)求資源地址
- get請(qǐng)求地址：http://vue.studyit.io/api/getlunbo
- post請(qǐng)求地址：http://vue.studyit.io/api/post
- jsonp請(qǐng)求地址：http://vue.studyit.io/api/jsonp
- JSONP的實(shí)現(xiàn)原理
- 由于瀏覽器的安全性限制裳食，不允許AJAX訪問協(xié)議不同、域名不同芙沥、端口號(hào)不同的數(shù)據(jù)接口诲祸，瀏覽器認(rèn)為這種訪問不安全浊吏；
- 可以通過動(dòng)態(tài)創(chuàng)建script標(biāo)簽的形式，把script標(biāo)簽的src屬性救氯，指向數(shù)據(jù)接口的地址找田，因?yàn)閟cript標(biāo)簽不存在跨域限制，這種 數(shù)據(jù)獲取方式径密，稱作為JSONP（注意：根據(jù)JSON的實(shí)現(xiàn)原理午阵，知曉躺孝，JSONP只支持GET請(qǐng)求）享扔；
- 具體實(shí)現(xiàn)過程;
- 先在客戶端定義一個(gè)回調(diào)方法，預(yù)定義對(duì)數(shù)據(jù)的操作植袍；
- 再把這個(gè)回調(diào)方法的名稱惧眠，通過URL傳參的形式，提交都服務(wù)器的數(shù)據(jù)接口
- 服務(wù)器數(shù)據(jù)接口組織好要發(fā)送給 客戶端的數(shù)據(jù)于个，再拿著客戶端傳遞過來的回調(diào)方法名稱氛魁，拼接出一個(gè)調(diào)用這個(gè)方法的字符串，發(fā)送給客戶端去解析執(zhí)行厅篓；
- 客戶端拿到服務(wù)器返回的字符串之后秀存，當(dāng)作script腳本去解析執(zhí)行，這樣就能夠拿到JSONP的數(shù)據(jù)了羽氮；
配置本地?cái)?shù)據(jù)庫和數(shù)據(jù)接口API
- 先解壓安裝
PHPStudy或链； - 解壓安裝
Navicat這個(gè)數(shù)據(jù)庫可視化工具，并激活档押； - 打開
Navicat工具澳盐，新建空白數(shù)據(jù)庫，名為dtcmsdb4令宿； - 雙擊新建的數(shù)據(jù)庫叼耙，連接上這個(gè)空白數(shù)據(jù)庫，在新建的數(shù)據(jù)庫上
右鍵->運(yùn)行SQL文件粒没，選擇并執(zhí)行dtcmsdb4.sql這個(gè)數(shù)據(jù)庫腳本文件筛婉；如果執(zhí)行不報(bào)錯(cuò)，則數(shù)據(jù)庫導(dǎo)入完成癞松； - 進(jìn)入文件夾
vuecms3_nodejsapi內(nèi)部爽撒，執(zhí)行npm i安裝所有的依賴項(xiàng)； - 先確保本機(jī)安裝 了
nodemon拦惋，沒有安裝則運(yùn)行npm i nodemon -g進(jìn)行全局安裝匆浙，安裝完畢后，進(jìn)入到vuecms_nodejsapi目錄 ->src目錄 -> 雙擊運(yùn)行start.bat - 如果API啟動(dòng)失敗厕妖，請(qǐng)檢查 PHPStudy 中默認(rèn)的用戶名是 root首尼，默認(rèn)的密碼也是 root
品牌管理改造
展示品牌列表
添加品牌數(shù)據(jù)
刪除品牌數(shù)據(jù)
Vue中的動(dòng)畫
為什么要有動(dòng)畫：動(dòng)畫能夠提高用戶的體驗(yàn)，幫助用戶更好的理解頁面中的功能
使用過渡類名
-
HTML結(jié)構(gòu)
<div id="app> <input type="button" value="動(dòng)起來" @click="myAnimate"> <!-- 使用 transition 將需要過渡的元素包裹起來 --> <transition name="false"> <div v-show="isshow">動(dòng)畫</div> </transition> </div> -
VM實(shí)例
// 創(chuàng)建 Vue實(shí)例，得到 ViewModel var vm = new Vue({ el:'#app', data:{ isshow: false }, methods:{ myAnimate:{ this.isshow = !this.isshow; } } })
Vue.js-Day3
定義Vue組件
什么是組件： 組件的出現(xiàn)软能，就是為了拆分Vue實(shí)例的代碼量的迎捺，能夠讓我們以不同的組件，來劃分不同的功能模塊查排，將來我們需要什么樣的功能凳枝，就可以去調(diào)用對(duì)應(yīng)的組件即可；
組件化和模塊化的不同：
- 模塊化：是從代碼邏輯的角度進(jìn)行劃分的跋核；方便后臺(tái)代碼的分層開發(fā)岖瑰，保證每一個(gè)功能模塊的職能單一；
- 組件化：是從UI界面進(jìn)行劃分的砂代；方便UI組件的復(fù)用蹋订；
全局組件定義的三種方式
-
使用 Vue.extend 配合 Vue.component 方法；
var login = Vue.extend({ template: '<h1>登錄</h1>' }); Vue.component('login',login); -
直接使用 Vue.component 方法:
Vue.component('register',{ template: '<h1>注冊(cè)</h1>' }); -
將模板字符串刻伊，定義到script標(biāo)簽中：
<script id="tmpl" type="x-template"> <div><a href="#">登錄</a> | <a href="#">注冊(cè)</a></div> </script>
同時(shí)露戒，需要使用 Vue.component 來定義組件：
Vue.component('account',{
template:'#tmpl'
});
注意：組件中的DOM結(jié)構(gòu)，有且只能有唯一的根元素(Root Element)來進(jìn)行包裹
組件中展示數(shù)據(jù)和響應(yīng)事件
- 在組件中 捶箱，
data需要被定義為一個(gè)方法智什。例如：
Vue.js - Day4
父組件向子組件傳值
- 組件實(shí)例定義方式，注意：一定要使用
props屬性要定義父組件傳遞過來的數(shù)據(jù)
<script>
// 創(chuàng)建 Vue 實(shí)例丁屎，得到 ViewModel
var vm = new Vue({
el:'#app',
data: {
msg:'這是父組件的消息'
},
components: {
son: {
template: '<h1>這是子組件 --- {{finfo}}</h1>',
props: [finfo]
}
}
});
</script>
-
使用
v-bind或簡(jiǎn)化指令荠锭，將數(shù)據(jù)傳遞到子組件中：<div id="app"> <son :finfo="msg"></son> </div>
子組件向父組件傳值
- 原理：父組件將方法的引用，傳遞到子組件內(nèi)部悦屏，子組件在內(nèi)部調(diào)用父組件傳遞過來的方法节沦，同時(shí)把要發(fā)送給父組件的數(shù)據(jù)，在調(diào)用方法的時(shí)候當(dāng)作參數(shù)傳遞進(jìn)去础爬；
- 父組件將方法的引用傳遞給子組件甫贯，其中，
getMsg是父組件中methods中定義的方法名稱看蚜，funo是子組件調(diào)用傳遞過來方法時(shí)候的方法名稱
<son @funo="getMsg"></son>
- 子組件內(nèi)部通過
this.$emit(‘方法名',要傳遞的數(shù)據(jù))方式叫搁，來調(diào)用父組件中的方法，同時(shí)把數(shù)據(jù)傳遞給父組件使用
<div id="app">
<!-- 引用父組件 -->
<son @funo="getMsg"></son>
<!-- 組件模板定義 -->
<script type="x-template" id="son">
<div>
<input type="button" value="向父組件傳值" @click="sendMsg" />
</div>
</script>
</div>
<script>
// 子組件的定義方式
Vue.component('son',{
template: '#son',//組件模板Id
methods: {
sendMsg() { // 按鈕的點(diǎn)擊事件
this.$emit('funo,'OK'); // 調(diào)用父組件傳遞過來的方法供炎，同時(shí)把數(shù)據(jù)傳遞出去
}
}
});
//創(chuàng)建 Vue 實(shí)例渴逻，得到 ViewModel
var vm = new Vue({
el: "#app",
data: {},
methods: {
getMsg(val){ //子組件中，通過 this.$emit() 實(shí)際調(diào)用的方法音诫，在此進(jìn)行定義
alert(val);
}
}
});
</script>
評(píng)論列表案例
目標(biāo)：主要練習(xí)父子組件之間傳值
使用this.$refs來獲取元素和組件
<div id="app">
<div>
<input type="button" value="獲取元素內(nèi)容" @click="getElemrnt" />
<!-- 使用 ref 獲取元素 -->
<h1 ref="myh1">這是一個(gè)大大的H1</h1>
<hr>
<!-- 使用 ref 獲取子組件 -->
<my-com ref="mycom"></my-com>
</div>
</div>
<script>
Vue.component('my-com',{
template: '<h5>這是一個(gè)子組件<h5>',
data() {
return {
name: '子組件'
}
}
});
//創(chuàng)建Vue實(shí)例惨奕，得到ViewModel
var vm = new Vuew({
el: "#app",
data: {},
methods: {
getElement() {
// 通過 this.$refs 來獲取元素
console.log(this.$refs.myh1.innerText);
// 通過 this.$refs 來獲取組件
console.log(this.$refs.mycom.name);
}
}
});
</script>
什么是路由
后端路由：對(duì)于普通的網(wǎng)站，所有的超鏈接都是URL地址竭钝，所有的URL地址都對(duì)應(yīng)服務(wù)器上對(duì)應(yīng)的資源梨撞；
前端路由：對(duì)于單頁面應(yīng)用程序來說雹洗，主要通過URL中的hash（#號(hào)），來實(shí)現(xiàn)不同頁面之間的切換卧波，同時(shí)时肿，hash有一個(gè)特點(diǎn)：HTTP請(qǐng)求中不會(huì)包含hash相關(guān)內(nèi)容；所以港粱，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實(shí)現(xiàn)螃成；
在單頁面應(yīng)用程序中，這種通過hash改變來切換頁面的方式查坪，稱作前端路由（區(qū)別于后端路由）寸宏；
在 vue 中使用 vue-router
-
導(dǎo)入 vue-router 組件類庫：
<!-- 1. 導(dǎo)入 vue-router 組件類庫 --> <script src="./lib/vue-router-2.7.0.js></script> -
使用 router-linx 組件來導(dǎo)航
<!-- 2. 使用 router-link 組件來導(dǎo)航 --> <router-link to="/login">登錄<、router-link> <router-link to="/register">注冊(cè)<咪惠、router-link> -
使用 touter-view 組件來顯示匹配到的組件
<!-- 3. 使用 touter-view 組件來顯示匹配到的組件 --> <router-view></router-view> -
創(chuàng)建使用
Vue.extend創(chuàng)建組件// 4.1 使用`Vue.extend`來創(chuàng)建登錄組件 var login = Vue.extend({ template:'<h1>登錄組件</h1>' }); // 4.2 使用`Vue.extend`來創(chuàng)建注冊(cè)組件 var register = Vue.extend({ template:'<h1>注冊(cè)組件</h1>' }) -
創(chuàng)建一個(gè)路由 router 實(shí)例击吱，通過 router 屬性來定義路由匹配規(guī)則
// 5. 創(chuàng)建一個(gè)路由 router 實(shí)例淋淀，通過 router 屬性來定義路由匹配規(guī)則 var router = new VueRouter({ router: { { path: '/login',component: login }, { path: '/register',component: register } } }); -
使用 router 屬性來使用路由規(guī)則
// 6. 創(chuàng)建vue實(shí)例遥昧，得到ViewModel var vm = new Vue({ el:'#app', router: router // 使用router屬性來使用路由規(guī)則 }）；
使用tag屬性指定router-link渲染的標(biāo)簽類型
<!-- router-link 默認(rèn)渲染為一個(gè) a 標(biāo)簽 -->
<!-- tag 屬性指定 router-link 渲染為 什么元素 -->
<!-- 不管渲染為什么元素朵纷，都是可點(diǎn)擊的元素 -->
<router-link to="/login" tag="span">登錄</router-link>
<router-link to="/register">注冊(cè)</router-link>
設(shè)置路由重定向
// 2. 創(chuàng)建一個(gè)路由對(duì)象炭臭，當(dāng)導(dǎo)入 vue-router 包之后，在 winodow 全局對(duì)象中袍辞，就有了一個(gè) 路由的構(gòu)造函數(shù)：VueRouter
// 在 new 路由對(duì)象的時(shí)候鞋仍，可以為構(gòu)造函數(shù)，傳遞一個(gè)配置對(duì)象
var routerObj = new VueRouter({
// route //這個(gè)配置對(duì)象中的 route 表示 【路由匹配規(guī)則】 的意思
routes: [ // 路由匹配規(guī)則
//每個(gè)路由規(guī)則搅吁，都是一個(gè)對(duì)象威创，這個(gè)規(guī)則對(duì)象身上，有兩個(gè)必須的屬性：
// 屬性1 是 path谎懦，表示監(jiān)聽哪個(gè)路由鏈接地址
// 屬性2 是 component肚豺，表示如果路由前面匹配到的 path，則展示 component 屬性對(duì)應(yīng)的那個(gè)組件
// 注意：component 的屬性值界拦，必須是一個(gè) 組件模板對(duì)象吸申，不能是 組件的引用名稱（'login'）
{ path: '/', redirect: '/login'}, //如果請(qǐng)求的是默認(rèn)路徑，則重定向到 login 組件中
{ path: '/login', component: login},
{ path: '/register', component: register}
],
linkActiveClass: 'myactive' // 為路由高亮指定類名,高亮?xí)r使用 .myactive 樣式享甸，不會(huì)使用默認(rèn)的 .router-link-active 樣式
})
設(shè)置路由高亮
方式一：使用vue提供的.router-link-active 進(jìn)行定義
/* 實(shí)現(xiàn)路由高亮 */
.router-link-active {
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
}
方式二：為路由對(duì)象linkActiveClass重新設(shè)置一個(gè)自定義類名截碴，這個(gè)類名可以是bootstrap的類名也可以是自定義的
linkActiveClass: 'myactive'
.myactive {
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: brown;
設(shè)置路由切換動(dòng)效
<!-- 這是 vue-router 提供的元素，專門用來當(dāng)做占位符的蛉威，將來日丹，路由規(guī)則匹配到的組件，就會(huì)展示到這個(gè) router-view 中去 -->
<transition mode="out-in"> <!-- 添加動(dòng)畫效果 -->
<router-view></router-view>
</transitio
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
在路由規(guī)則中定義參數(shù)
方式一：
-
在規(guī)則中定義參數(shù)：
{ path: 'register/:id/:name', component: register } -
在路由中傳遞參數(shù)：（12蚯嫌、zhangsan 分別對(duì)應(yīng)規(guī)則中的id哲虾、name）
<router-link to="/login/12/zhangsan">注冊(cè)</router-link> -
通過
this.$router.params來獲取路由中的參數(shù)：（this可省略）var register = Vue.extend({ template: '<h1>注冊(cè)組件 --- {{ this.$router.params.id --- {{ this.$router.params.name }}</h1>' });
方式二：
-
直接在路由中傳遞參數(shù)
<!-- 如果在路由中割坠，使用 查詢字符串，給路由傳參妒牙，則不需要修改路由規(guī)則的 path 屬性 --> <router-link to="/login?id=10&name=zhangsan">登錄</router-link> -
通過
this.$router.query來獲取路由中的參數(shù)：var login = { template: '<h1>登錄 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>', data() { return { msg: '123' } }, created() { // 組件的生命周期鉤子函數(shù) console.log(this.$route) console.log(this.$route.query.id) } }
使用children屬性實(shí)現(xiàn)路由嵌套
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<script>
// 父路由中的組件
const account = Vue.extend({
template: `<div>
這是account組件
<router-link to="/account/login">login</router-link> |
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>`
})
// 子路由中的 login 組件
const login = Vue.extend({
template: `<div>登錄組件</div>`
})
// 子路由中的 register 組件
const register = Vue.extend({
template: `<div>注冊(cè)組件</div>`
})
// 路由實(shí)例
var router = new VueRouter({
routes:[
{ path: '/',redirect:'/account/login'},// 使用 redirect 實(shí)現(xiàn)路由重定向
{
path: '/account',
component: account,
children: [
// 通過 children 數(shù)組屬性彼哼，來實(shí)現(xiàn)路由的嵌套
{ path: 'login', component: login },//注意，子路由的開頭位置湘今，不需要加 / 路徑符
{ path: 'register', component: register }
]
}
]
});
var vm = new Vue({
el : '#app',
data : { },
methods : { },
components: {
account
},
router: router
});
</script>
命名視圖實(shí)現(xiàn)經(jīng)典布局
-
標(biāo)簽代碼結(jié)構(gòu)：
<div id="app"> <router-view></router-view> <div class="container"> <!-- name 屬性指定要放的組件 --> <router-view name="left"></router-view> <router-view name="main"></router-view> </div> </div> -
JS代碼
<script> var header = { template: '<h1 class="header">Header頭部</h1>' } var leftBox = { template: '<h1 class="left">Left側(cè)邊欄區(qū)域</h1>' } var mainBox = { template: '<h1 class="main">mainBox主體區(qū)域</h1>' } // 創(chuàng)建路由對(duì)象 var router = new VueRouter({ routes: [ // { path: '/', component: header }, // { path: '/left', component: leftBox }, // { path: '/main', component: mainBox }, { path: '/', components: { 'default': header, 'left': leftBox, 'main': mainBox } }, ] }) var vm = new Vue({ el : '#app', data : { }, methods : { }, router }); </script> -
CSS代碼：
<style> html,body { margin: 0; padding: 0; } .header { height: 80px; background-color: orange; } h1 { margin: 0; padding: 0; font-size: 16px; } .container { display: flex; height: 600px; } .left { background-color: lightgreen; flex: 2; } .main { background-color: lightpink; flex: 8; } </style>
watch屬性的使用
html結(jié)構(gòu)
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</div>
JS代碼
<script>
var vm = new Vue({
el : '#app',
data : {
firstname: '',
lastname: '',
fullname: ''
},
methods : { },
watch: {
// 使用這個(gè)屬性可以監(jiān)視 data 中指定數(shù)據(jù)的變化敢朱，然后觸發(fā) watch 中對(duì)應(yīng)的 function 處理函數(shù)
// 監(jiān)視 firstname 的變化，改變了則調(diào)用 function 函數(shù),如果first-name（帶橫線）摩瞎，需要加上引號(hào)
'firstname': function(newVal, oldVal) {
// console.log('監(jiān)視到了 firstname 的變化')
// this.fullname = this.firstname + '-' + this.lastname
// console.log(newVal + '---' + oldVal)
this.fullname = newVal + '-' + this.lastname
},
'lastname': function(newVal) {
this.fullname = this.firstname + '-' + newVal
}
}
});
</script>
使用watch監(jiān)視路由地址的改變
html結(jié)構(gòu)
<div id="app">
<!-- 6.鏈接 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊(cè)</router-link>
<!-- 5.容器 -->
<router-view></router-view>
</div>
JS代碼
<script>
// 2.創(chuàng)建子組件
var login = {
template: '<h1>登錄組件</h1>'
}
var register = {
template: '<h1>注冊(cè)組件</h1>'
}
// 3.創(chuàng)建一個(gè)路由對(duì)象
var router = new VueRouter({
routes: [ //路由規(guī)則數(shù)組
{ path: '/', redirect: '/login' },// 默認(rèn)路徑重定向
{ path: '/login', component: login},
{ path: '/register', component: register}
],
linkActiveClass: 'myactive' // 激活相關(guān)的類
})
var vm = new Vue({
el : '#app',
data : { },
methods : { },
// 4. 掛載路由
router,
watch: {
// this.$route.path 獲取路由
'$route.path': function(newVal,oldVal) {
console.log( newVal + '---' + oldVal )
if ( newVal === '/login') {
console.log('歡迎進(jìn)入登錄頁面')
} else if ( newVal === '/register') {
console.log('歡迎進(jìn)入注冊(cè)頁面')
}
}
}
});
</script>
computed計(jì)算屬性的使用
html結(jié)構(gòu)
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
</div>
JS代碼
<script>
var vm = new Vue({
el : '#app',
data : {
firstname: '',
lastname: ''
},
methods : { },
computed: {
// 在 computed 中拴签，可以定義一些屬性，這些屬性叫做【計(jì)算屬性】旗们，
//本質(zhì)就是一個(gè)方法蚓哩，只不過在使用這些計(jì)算屬性的時(shí)候，
//是把他們的 名稱直接當(dāng)做 屬性來使用上渴，并不會(huì)把計(jì)算屬性當(dāng)做方法去調(diào)用岸梨。
// 1.注意：計(jì)算屬性，在引用的時(shí)候稠氮，一定不要加（）調(diào)用 曹阔，直接把它當(dāng)做普通屬性去使用
// 2.注意：只要計(jì)算屬性這個(gè) function 內(nèi)部所用到的 data 中的數(shù)據(jù)發(fā)生了變化，就會(huì)立即重新計(jì)算這個(gè)計(jì)算屬性的值
// 意思是 fullname 永遠(yuǎn)跟隨 firstname 和 lastname 的變化而變化
// 3.注意：計(jì)算屬性的求值結(jié)果隔披，會(huì)被緩存起來赃份，方便下次調(diào)用，如果 計(jì)算屬性方法中奢米，所有的數(shù)據(jù)都沒有發(fā)生變化抓韩，就不會(huì)重新對(duì)計(jì)算屬性求值
// 'fullname': function() {
// console.log('ok')
// return this.firstname + '-' + this.lastname
// }
fullname: {
get:function() {
console.log('ok')
return this.firstname + '-' + this.lastname
},
set:function() {}
}
}
});
</script>
watch鹿鳖、computed亦鳞、methods之間的對(duì)比
-
computed屬性的結(jié)果會(huì)被緩存腿箩，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算饮醇，主要當(dāng)作屬性來使用杂抽； -
methods方法表示一個(gè)具體的操作廓八，主要書寫業(yè)務(wù)邏輯寂呛； -
watch一個(gè)對(duì)象坯汤，鍵是需要觀察的表達(dá)式怠蹂，值是對(duì)應(yīng)回調(diào)函數(shù)善延，主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作城侧，可以看作是computed和methods的結(jié)合體易遣；
nrm的安裝使用
作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時(shí)候的服務(wù)器地址嫌佑；
什么是鏡像：原來包剛一開始是只存在于國外的NPM服務(wù)器豆茫，但是由于網(wǎng)絡(luò)原因侨歉，經(jīng)常訪問不到，這時(shí)候揩魂，我們可以在國內(nèi)幽邓，創(chuàng)建一個(gè)和官網(wǎng)完全一樣的NPM服務(wù)器，只不過火脉，數(shù)據(jù)都是從人家那里拿過來的牵舵，除此之外，使用方式完全一樣倦挂。
- 運(yùn)行
npm i nrm -g全局安裝nrm包畸颅； - 使用
nrm ls查看當(dāng)前所有可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址； - 使用
nrm use npm或nrm use taobao切換不同的鏡像源地址方援；
注意：nrm只是單純提供了幾個(gè)常用的下載包的URL地址没炒，并能夠讓我們?cè)谶@幾個(gè)地址之間，很方便的進(jìn)行切換犯戏，但是送火，我們每次裝包的時(shí)候，使用的裝包工具都是
npm
相關(guān)文件
Vue.js - Day5 - Webpack
在網(wǎng)頁中會(huì)引用哪些常見的靜態(tài)資源笛丙？
- JS
- .js .jsx .coffee .ts(TypeScript 類C#語言)
- CSS
- .css .less .sass .scss
- Images
- .jpg .png .gif .bmp .svg
- 字體文件（Fonts）
- .svg .ttf .eot .woff .woff2
- 模板文件
- .ejs .jade .vue[這是在webpack中定義組件的方式漾脂，推薦]
網(wǎng)頁中引入的靜態(tài)資源多了以后有什么問題？
- 網(wǎng)頁加載速度慢胚鸯，因?yàn)槲覀円l(fā)起很多的二次請(qǐng)求；
- 要處理錯(cuò)綜復(fù)雜的依賴關(guān)系
如何解決上述兩個(gè)問題
- 合并笨鸡、壓縮姜钳、精靈圖、小圖片的Base64編碼
- 可以使用requireJS形耗。也可以使用webpack哥桥，可以解決各個(gè)包之間的復(fù)雜依賴關(guān)系
什么是webpack
webpack 是前端的一個(gè)項(xiàng)目構(gòu)建工具，它是基于node.js開發(fā)出來的一個(gè)前端工具激涤，因此要使用webpack必須先安裝node
如何完美實(shí)現(xiàn)上述的2種解決方案
- 使用Gulp拟糕，是基于task任務(wù)的；
- 使用Webpack倦踢，是基于整個(gè)項(xiàng)目進(jìn)行構(gòu)建的送滞；
- 借助于webpack這個(gè)前端自動(dòng)化構(gòu)建工具，可以完美實(shí)現(xiàn)資源的合并辱挥、打包犁嗅、壓縮、混淆等諸多功能晤碘。
- 根據(jù)官網(wǎng)的圖片介紹webpack打包過程
- webpack官網(wǎng)
webpack 安裝的兩種方式
- 運(yùn)行
npm i webpack -g全局安裝webpack褂微，這樣就能在全局使用webpack的命令 - 在項(xiàng)目根目錄中運(yùn)行
npm i webpack --save-dev安裝到項(xiàng)目依賴中
初步使用webpack打包構(gòu)建列表隔行變色案例
- 運(yùn)行
npm init初始化項(xiàng)目功蜓，使用npm管理項(xiàng)目中的依賴包
VScode快捷鍵ctrl + · 打開終端，注意那個(gè)點(diǎn)是鍵盤上 esc 下面的那個(gè)宠蚂；運(yùn)行npm init -y初始化式撼，初始化完成后可以想見項(xiàng)目目錄多了package.json文件
E:\Vue_Project\vue-study\day5\webpack-study> npm init -y
Wrote to E:\Vue_Project\vue-study\day5\webpack-study\package.json:
{
"name": "webpack-study",
"version": "1.0.
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 創(chuàng)建項(xiàng)目基本的目錄結(jié)構(gòu)
- 使用
cnpm i jquery --save安裝jquery類庫
運(yùn)行npm i jquery -S安裝jquery
E:\Vue_Project\vue-study\day5\webpack-study> npm i jquery -S
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN webpack-study@1.0.0 No description
npm WARN webpack-study@1.0.0 No repository field.
+ jquery@3.4.1
added 1 package from 1 contributor and audited 1 package in 2.161s
found 0 vulnerabilities
-
創(chuàng)建
main.js并書寫各行變色的代碼邏輯：// 導(dǎo)入jquery類庫 import $ from 'jquery' // 設(shè)置偶數(shù)行背景色，索引從0開始求厕，0是偶數(shù) $('#list li:even').css('backgroundColor','lightblue'); // 設(shè)置奇數(shù)行背景色 $('#list li:odd').css('backgroundColor','pink'); 直接在頁面上引用
main.js會(huì)報(bào)錯(cuò)端衰，因?yàn)闉g覽器不認(rèn)識(shí)import這種高級(jí)的JS語法。需要使用webpack進(jìn)行處理甘改，webpack默認(rèn)會(huì)把這種高級(jí)的語法轉(zhuǎn)換為低級(jí)的瀏覽器能識(shí)別的語法旅东；
運(yùn)行webpack 入口文件路徑 輸出文件路徑對(duì)main.js進(jìn)行處理：
webpack src/js/main.js dist/bundle.js
注意：如果webpack版本過高，上述語句會(huì)報(bào)錯(cuò)十艾，需要用
webpack .\src\main.js -o .\dist\bundle.js來打包抵代，詳情webpack 打包報(bào)錯(cuò)：Can't resolve '.\dist\bundle.js' in 'E:\vivian....'
- 由于每次修改main.js文件都需要重新使用
webpack src/js/main.js dist/bundle.js進(jìn)行打包，累贅且麻煩忘嫉，因此在項(xiàng)目根目錄引入配置文件webpack.config.js荤牍，聲明要打包的文件路徑和導(dǎo)出的文件路徑，下次項(xiàng)目更改需要重新打包時(shí)庆冕，運(yùn)行webpack即可康吵。
webpack.config.js配置文件內(nèi)容：
const path = require('path')
// 這個(gè)配置文件，其實(shí)就是一個(gè) JS 文件访递，通過 node 中的模塊操作晦嵌，向外暴露了一個(gè) 配置對(duì)象
module.exports = {
mode: 'development',
entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用 webpack 打包那一個(gè)文件
output: {
//輸出文件相關(guān)配置
path: path.join(__dirname, './dist'),//指定 打包好的文件拷姿，輸出到哪個(gè)目錄中去
filename: 'bundle.js' // 指定 輸出文件的名稱
}
}
// 當(dāng)我們?cè)诳刂婆_(tái)惭载，直接輸入 webpack 命令執(zhí)行的時(shí)候，webpack做了以下幾步：
// 1. 首先响巢，webpack發(fā)現(xiàn)我們并沒有通過命令的形式描滔，給它指定出口和入口
// 2. webpack 就會(huì)去 項(xiàng)目的根目錄 中，查找一個(gè)叫做'webpack.config.js'的配置文件
// 3. 當(dāng)找到配置文件后踪古，webpack 會(huì)去解析執(zhí)行這個(gè) 配置文件含长，當(dāng)解析執(zhí)行完配置文件后，就得到了配置文件中導(dǎo)出的 配置對(duì)象
// 4. 當(dāng) webpack 拿到配置對(duì)象后伏穆，就拿到了配置對(duì)象中拘泞，指定的 入口 和出口，然后進(jìn)行打包構(gòu)建
再由于每次代碼更改都需要手動(dòng)重新打包編譯蜈出，使用
webpack-dev-server這個(gè)工具進(jìn)行偷懶田弥。運(yùn)行npm i webpack-dev-server -D,把這個(gè)工具安裝到項(xiàng)目的本地開發(fā)依賴。webpack-dev-server要求webpack安裝在本地項(xiàng)目下铡原，運(yùn)行npm i webpack -D安裝偷厦。webpack要求webpack-cli安裝在本地項(xiàng)目下商叹，運(yùn)行npm i webpack-cli -D安裝。-
在
package.json內(nèi)只泼，添加dev剖笙，{ "name": "webpack-study", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" //添加webpack-dev-server }, 運(yùn)行
npm run dev使用webpack-dev-server工具。i ?wds?: Project is running at http://localhost:8080/可在終端查看到服務(wù)器端口http://localhost:8080/
i ?wds?: webpack output is served from /可在終端查看到打包的bundle.js的路徑是根目錄下的絕對(duì)路徑请唱，可以通過http://localhost:8080/bundle.js訪問到bundle.js弥咪。此時(shí)引入bundl.js只需寫根目錄的路徑即可<script src="/bundle.js"></script>此時(shí)修改代碼只需保存，webpack-dev-server就會(huì)實(shí)時(shí)監(jiān)聽代碼的改變和刷新瀏覽器十绑，不需要再手動(dòng)打包聚至，甚至不用刷新瀏覽器即可看到效果。
webpack-dev-server 幫我們打包生成的 bundle.js 文件本橙，并沒有存放到實(shí)際的物理磁盤中扳躬，而是直接托管到了電腦的內(nèi)存中，所以甚亭，我們?cè)陧?xiàng)目的根目錄中贷币，找不到打包好的bundle.js。 可以認(rèn)為亏狰，webpack-dev-server 把打包好的文件役纹，以一種虛擬的形式，托管到了項(xiàng)目的根目錄中暇唾，雖然我們看不見促脉，但是可以認(rèn)為，和 dist src node_modules平級(jí)信不，有一個(gè)看不見的bundle.js文件嘲叔。正是這種虛擬的托管方式，大大提高了加載效率抽活。
此時(shí)需要手動(dòng)打開瀏覽器并且是固定端口"8080"，且進(jìn)入的頁面是項(xiàng)目根目錄锰什，十分不爽下硕，因此修改
package.json代碼："dev": "webpack-dev-server --open --port 3000 --contentBase src"，open意思是自動(dòng)打開瀏覽器并運(yùn)行項(xiàng)目汁胆，port 3000意思是在3000端口下運(yùn)行梭姓，contentBase src的意思是打開時(shí)默認(rèn)打開src目錄下的頁面。繼續(xù)修改
package.json代碼："dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"嫩码。hot是熱更新的意思誉尖，意思是將修改的那一部分代碼作為補(bǔ)丁打在打包生成的bundle.js上，實(shí)現(xiàn)局部更新铸题，加快加載進(jìn)度铡恕。以上步驟完成后琢感，運(yùn)行項(xiàng)目只需在項(xiàng)目根目錄下運(yùn)行
npm run dev命令，webpack-dev-server就會(huì)幫我們自動(dòng)打開瀏覽器并在我們指定的端口下運(yùn)行我們指定的頁面探熔，修改代碼后僅需保存webpack-dev-server就會(huì)幫助我們自動(dòng)刷新瀏覽器驹针。
配置 dev-server 的第二種形式
在webpack.config.js下添加
// 啟用熱更新的第二步
const webpack = require('webpack')
devServer: { // 這是配置 dev-server 命令參數(shù)的第二種形式，相對(duì)來說诀艰，這種方式麻煩一些
// --open --port 3000 --contentBase src --hot
open: true, // 自動(dòng)打開瀏覽器
port: 3000, // 設(shè)置啟動(dòng)時(shí)的運(yùn)行端口
contentBase: 'src', // 指定托管的根目錄
hot: true // 啟動(dòng)熱更新的第一步
}
plugins: [ // 配置插件的節(jié)點(diǎn)
new webpack.HotModuleReplacementPlugin() // new 一個(gè)熱更新的模塊的對(duì)象柬甥，啟用熱更新的第3步
]
在 package.json 中 只需聲明"dev": "webpack-dev-server"
使用help-webpack-plugin插件配置啟動(dòng)頁面
由于使用--contentBase指令的過程比較繁瑣，需要綁定啟動(dòng)的目錄其垄，同時(shí)還需要修改index.html中script標(biāo)簽的src屬性苛蒲，所以推薦大家使用html-webpack-plugin插件配置啟動(dòng)頁面。
這個(gè)插件的兩個(gè)作用：1. 自動(dòng)在內(nèi)存中根據(jù)指定頁面生成一個(gè)內(nèi)存中的頁面绿满。2. 自動(dòng)把打包好的 bundle.js 追加到頁面中去
運(yùn)行
cnpm i html-webpack-plugin --save-dev安裝到開發(fā)依賴-
修改
webpack.config.js配置文件如下：// 導(dǎo)入處理路徑的模塊 var path = require('path'); // 導(dǎo)入自動(dòng)生成HTML文件的插件 var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: path.resolve(_dirname, 'src/js/main.js'), // 項(xiàng)目入口文件 output: { // 配置輸出選項(xiàng) path: path.resolve(_dirname, 'dist'), // 配置輸出的路徑 filename: 'bundle.js' // 配置輸出的文件名 }, plugins: [ // 添加plugins節(jié)點(diǎn)配置插件 new htmlWebpackPlugin({ template:path.resolve(_dirname,'src/index.html'), // 模塊路徑 filename: 'index.html' // 自動(dòng)生成的HTML文件的名稱 }) ] } 修改
package.json中script節(jié)點(diǎn)中的dev指令如下：
"dev": "webpack-dev-server"將index.html中script標(biāo)簽注釋掉臂外，因?yàn)?code>html-webpack-plugin插件會(huì)自動(dòng)把bundle.js注入到index.html頁面中。此時(shí)查看頁面源代碼可以看到底部已經(jīng)自動(dòng)引用了
bundle.js
使用webpack打包c(diǎn)ss文件
運(yùn)行
cnpm i style-loader css-loader --save-dev-
修改
webpack.config.js文件module: { // 用來配置第三方loader模塊的 rules: [ // 文件的匹配規(guī)則 { test: /\.css$/,use: ['style-loader', 'css-loader']} // 處理css文件的規(guī)則 ] } 注意：
css表示使用哪些模塊來處理test所匹配到的文件棒口；use中相關(guān)loader模塊的調(diào)用順序是從后向前調(diào)用的寄月；
使用webpack打包less文件
- 運(yùn)行
cnpm i less-loader less -D - 修改
webpack.config.js這個(gè)配置文件：
{ test: /\.less$/,use: ['style-loader', 'css-loader','less-loader']},
使用webpack打包scss文件
運(yùn)行
npm i sass-loader -D，終端提示需要安裝node-sass依賴運(yùn)行
cnpm i node-sass -D(注意：只有極少數(shù)情況才能使用npm成功安裝node-sass无牵，所以這里推薦使用cnpm安裝)修改
webpack.config.js這個(gè)配置文件：
{ test: /\.scss$/,use: ['style-loader', 'css-loader','sass-loader']},本人在運(yùn)行
npm run dev命令后報(bào)錯(cuò)ERROR in ./src/css/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js!./src/css/index.scss)漾肮，百度了一下問題解決方法webpack打包node-sass編譯報(bào)錯(cuò)，可行茎毁，運(yùn)行成功克懊。
// 注意： webpack 處理第三方文件類型的過程：
// 1. 發(fā)現(xiàn)這個(gè)要處理的文件不是 JS 文件，然后就去配置文件中查找有沒有對(duì)應(yīng)第三方 loader 規(guī)則
// 2. 如果能找到對(duì)應(yīng)的規(guī)則七蜘，就會(huì)調(diào)用對(duì)應(yīng)的 loader 處理這種文件類型谭溉；
// 3. 在調(diào)用 loader 的時(shí)候，是從后往前調(diào)用的
// 4. 當(dāng)最后的一個(gè) loader 調(diào)用完畢橡卤，會(huì)把處理的結(jié)果交給 webpack 打包合并扮念，最終輸出到 bundle.js 中去
使用webpack識(shí)別url地址
運(yùn)行
npm i url-loader file-loader -D命令，安裝url-loader第三方模塊碧库，同時(shí)該模塊依賴file-loader柜与，因此一起安裝了。修改
webpack.config.js這個(gè)配置文件：{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader'}-
可以通過傳參來指定多大的圖片才轉(zhuǎn)碼嵌灰。比如有一張圖片是40062字節(jié)的弄匕，此時(shí)修改
{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader?limit=40063'}，limit 給定的值是圖片的大小沽瞭，單位是 byte迁匠，如果圖片大于給定的 limit 值，則不會(huì)被轉(zhuǎn)為 base64 格式的字符串，如果圖片小于或等于給定的 limit城丧，則會(huì)被轉(zhuǎn)為 base64 字符串圖片大小40062 = limit值40062 轉(zhuǎn) 圖片大小40062 > limit值40061 不轉(zhuǎn) 圖片大小40062 < limit值40063 轉(zhuǎn) 可以通過傳參來指定不轉(zhuǎn)碼時(shí)圖片的名稱延曙。修改
{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader?limit=40061&name=[name].[ext]'}，[name]指圖片原來的名字叫什么就是什么芙贫，不會(huì)被改變搂鲫，[ext]指圖片原來的格式不會(huì)被改變。經(jīng)過上一步磺平，圖片不轉(zhuǎn)碼時(shí)名稱不會(huì)被改變魂仍，但是當(dāng)引用了兩張一樣名字的圖片時(shí)，先引用的圖片會(huì)被后引用的覆蓋拣挪，此時(shí)修改
{ test: /\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader?limit=40061&name=[hash:8]-[name].[ext]'}擦酌，[hash:8]-表示圖片前面添加8位的哈希值，最高可添加32位菠劝。這樣就能避免同名圖片被覆蓋赊舶。
webpack使用url-loader處理字體文件
- 運(yùn)行
cnpm i bootstrap -S安裝bootatrap。 - 在webpack.config.js內(nèi)添加
{ test: /\.(ttf|eot|svg|wpff|woff2)$/,use: 'url-loader' },在index.js添加import 'bootstrap/dist/css/bootstrap.css'
組件中的css作用域問題
抽離路由器為單獨(dú)的模塊
使用 餓了么的MintUI組件
完整引入
- 導(dǎo)入所有的MintUI組件
import MintUI from 'mint-ui'
- 導(dǎo)入樣式表：
import 'mint-ui/lib/style.css'
- 將Mint-UI注冊(cè)到 Vue 身上
Vue.use(MintUI)
- vue 中使用 MintUI 中的 Button 按鈕赶诊，使用例子：
<mt-button type="primary" size="large">primary</mt-button>
完整引入之后笼平，使用css組件只需導(dǎo)入標(biāo)簽即可
<mt-button type="default">default</mt-button>
vue中使用 Mint-UI的js組件
導(dǎo)入 js 組件（以 Toast彈框提示 為例）
import { Toast } from 'mint-ui';-
暴露接口
export default { data() { return {} }, methods: { show() { Toast("提示信息"); } } } 在 html 中添加點(diǎn)擊事件
<mt-button type="default" @click="show">default</mt-button>
Mint-UI中按需導(dǎo)入的配置方式
- 安裝 babel-plugin-component：
npm install babel-plugin-component -D
-
修改.babelrc
{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryName": "mint-ui", "style": true } ]]] } 按需導(dǎo)入 Mint-UI組件
import { Button } from 'mint-ui'
- 使用 Vue.compoent 注冊(cè) 按鈕組件
Vue.component('mybtn',Button)
或
Vue.component(Button.name,Button)
- 在相對(duì)應(yīng)的vue文件中添加標(biāo)簽
<mybtn></mybtn>或直接引用<mt-button type="default" @click="show">default</mt-button>
使用 MUI 代碼片段
注意：MUI不同于 Mint-UI，MUI 只是開發(fā)出來的一套好用的代碼片段舔痪，里面提供了配套的樣式寓调，配套的HTML代碼段，類似于 Bootstrap锄码；而Mint-UI夺英，是真正的組件套，是使用 Vue 技術(shù)封裝出來的 成套的組件滋捶，可以無縫的和 VUE 項(xiàng)目進(jìn)行集成開發(fā)痛悯；
因此，從體驗(yàn)上來說重窟，Mint-UI體驗(yàn)更好载萌，因?yàn)檫@是別人幫我們開發(fā)好的現(xiàn)成的Vue組件；
從體驗(yàn)上來說巡扇，MUI 和 Bootstrap 類似炒考；
理論上，任何項(xiàng)目都可以使用 MUI 或 Bootstrap霎迫，但是，Mint-UI只適用于 Vue 項(xiàng)目帘靡；
- 導(dǎo)入 MUI 的樣式表：
import '../lib/mui/css/mui.min.css'
- 在
webpack.config.js中添加新的 loader 規(guī)則：
{ test:/\.{png|jpg|gif|ttf}$/,use:'url-loader'}
- 根據(jù)官方提供的文檔和example知给，嘗試使用相關(guān)的組件
將項(xiàng)目源碼托管到oschina中
點(diǎn)擊頭像 -> 修改資料 -> SSH公鑰 如何生成SSH公鑰
創(chuàng)建自己的空倉庫，使用
git config --global user.name "用戶名"和git config --global user.email **@**.com來全局配置提交時(shí)用戶的名稱和郵箱使用
git init在本地初始化項(xiàng)目使用
touch README.md和touch .gitignore來創(chuàng)建項(xiàng)目的說明文件和忽略文件；使用
git add .將所有文件托管到git中使用
git commit -m "init project"將項(xiàng)目進(jìn)行本地提交
新建項(xiàng)目步驟
新建項(xiàng)目文件夾-用vscode打開
初始化項(xiàng)目：在終端運(yùn)行“npm init”涩赢，生成“package.json”
在項(xiàng)目根目錄下新建文件夾“src”戈次，和“dist”，在“src”目錄下新建“main.js"和”index.html"
安裝“webpack-dev-server”筒扒，在終端輸入“npm i webpack-wdev-server"
webpack-dev-server要求webpack安裝在本地項(xiàng)目下,在終端執(zhí)行命令"npm i webpack"怯邪，webpack要求webpack-cli安裝在本地項(xiàng)目下，執(zhí)行命令"npm i webpack-cli"
-
在根目錄下新建“webpack.config.js"花墩，配置webpack悬秉。
module.exports = { mode: 'development', entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用 webpack 打包那一個(gè)文件 output: { //輸出文件相關(guān)配置 path: path.join(__dirname, './dist'),//指定 打包好的文件冰蘑，輸出到哪個(gè)目錄中去 filename: 'bundle.js' // 指定 輸出文件的名稱 } } -
在“package.json”文件下添加webpack-dev-server工具
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
運(yùn)行"npm i html-webpack-plugin -D"安裝插件自動(dòng)生成bundle.js
-
在配置文件webpack.config.js中添加
var htmlWebpackPlugin = require('html-webpack-plugin')
-
在配置文件webpack.config.js中添加配置節(jié)點(diǎn)
//所有webpack插件的配置愛節(jié)點(diǎn) plugins: [ new htmlWebpackPlugin({ template:path.resolve(__dirname,'src/index.html'), // 模塊路徑 filename: 'index.html' // 自動(dòng)生成的HTML文件的名稱 }) ] 運(yùn)行"npm run dev"不再報(bào)錯(cuò)和泌。
配置css文件步驟
-
運(yùn)行"npm i style-lloader css-loader"安裝插件，在webpack.config.js文件下添加配置節(jié)點(diǎn)
module: { // 用來配置第三方loader模塊的 rules: [ // 文件的匹配規(guī)則 { test: /\.css$/,use: ['style-loader', 'css-loader']} // 處理css文件的規(guī)則 ] } 在main.js中引入css文件：
import './css/index.css'
Vue.js - day6
注意：
有時(shí)候使用npm i node-sass -D裝不上祠肥，這時(shí)候武氓，就必須使用cnpm i node-sass -D
在普通頁面中使用render函數(shù)渲染組件
在webpack中配置.vue組件頁面的解析
- 運(yùn)行
cnpm i vue -S將Vue安裝為運(yùn)行依賴； - 運(yùn)行
cnpm i vue-loader vue-template-compiler -D將解析轉(zhuǎn)換vue的包安裝為開發(fā)依賴仇箱； - 運(yùn)行
cnpm i style-loader css-loader -D將解析轉(zhuǎn)換css的包安裝為開發(fā)依賴县恕，因?yàn)?vue文件中會(huì)寫css樣式； - 在
webpack.config.js中剂桥，添加module規(guī)則：
{ test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ },
在使用webpack構(gòu)建的Vue項(xiàng)目中使用模板對(duì)象
- 在
webpack.config.js中添加resolve屬性：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
- 在 main.js文件下導(dǎo)入模板對(duì)象
import Vue from 'vue'
使用第三方loader處理高級(jí)語法
// 在 webpack 中忠烛，默認(rèn)只能處理一部分 ES6 的新語法，一些更高級(jí)的 ES6 語法或者 ES7 語法渊额，
// webpack 是處理不了的况木，這時(shí)候，就需要借助于第三方的 loader旬迹，來幫助 webpack 處理這些高級(jí)的語法
// 當(dāng)?shù)谌?loader 把高級(jí)的語法轉(zhuǎn)為低級(jí)的語法之后火惊，會(huì)把結(jié)果交給 webpack 去打包到 bundle.js 中
通過 babel，可以幫我們將高級(jí)的語法轉(zhuǎn)為 低級(jí)的語法
- 在 webpack中奔垦，可以運(yùn)行如下命令屹耐，安裝兩套包，去安裝 babel 相關(guān)的 loader功能：
- 1.1 第一套包： npm i babel-core babel-loader babel-plugin-transform-runtime -D
- 1.2 第二套包： npm i babel-preset-env babel-preset-stage-0 -D
- 打開 webp 的配置文件椿猎，在 module 節(jié)點(diǎn)下的 rules 數(shù)組中惶岭，添加一個(gè) 新的匹配規(guī)則：
- 2.1 { test:/.js$/, use: 'babel-loader', exclude:/node_modules/ }
- 2.2 注意： 在配置 babel 的 loader 規(guī)則的時(shí)候，必須把 node_modules 目錄犯眠，通過 exclude選項(xiàng)排除掉按灶，原因如下：
- 2.2.1 如果不排除 node_modules，則 babel 會(huì)把 node_modules 中所有的第三方 js 文件都打包編譯筐咧，消耗cpu鸯旁，打包速度變慢
- 2.2.2 如果 babel 把 node_modules 中的js轉(zhuǎn)換完畢噪矛，項(xiàng)目也無法正常運(yùn)行
- 在項(xiàng)目的根目錄中，新建一個(gè) .babelrc 的babel 配置文件铺罢，這個(gè)配置文件艇挨，屬于 JSON 格式，所以必須符合 JSON 的語法規(guī)范
-
3.1 在 babelrc 中 寫如下的配置：
{ "presets": ["env","stage-0"],//語法 "plugins": ["transform-runtime"] //插件 }
- 目前安裝的 babel-preset-env 是比較新的es語法插件
webpack 中如何使用 vue
- 安裝 vue的包：
cnpm i vue -S - 由于在 webpack 中韭赘，推薦使用 .vue 這個(gè)組件模板文件定義組件缩滨，所以，需要安裝能解析這種文件的 loader：
cnpm i vue-loader vue-template-complier -D - 在 main.js 中泉瞻，導(dǎo)入 vue 模板 :
import Vue from 'vue' - 定義一個(gè) .vue 結(jié)尾的組件脉漏，其中，組件由三部分組成：
templatescriptstyle - 使用
import login from './login.vue'導(dǎo)入這個(gè)組件 - 創(chuàng)建 vm 實(shí)例瓦灶，
var vm = new Vue({ el: 'app',render: c => c(login) }) - 在頁面中創(chuàng)建一個(gè) id 為 app 的 div 元素鸠删，作為我們 vm 實(shí)例要控制的區(qū)域
8.注意：. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的。所以贼陶，需要在 webpack.config.js 中 引入const VueLoaderPlugin = require('vue-loader/lib/plugin');在 plugin 中加入new VueLoaderPlugin()
結(jié)合webpack使用vue-router
- 在項(xiàng)目入口文件main.js中
導(dǎo)入 vue-router 包
import VueRouter from 'vue-router'
手動(dòng)安裝 VueRouter
Vue.use(VueRouter)
- 導(dǎo)入自定義的路由模塊
import router from './router.js'
-
將路由對(duì)象掛載到 vm 實(shí)例上
var vm = new Vue({ el:'#app', render: c => c(app),// render 會(huì)把 el 指定的容器中所有內(nèi)容都清空覆蓋刃泡，所以不能把路由的 router-view 和 router-link 寫在里面 // 4. 將路由對(duì)象掛載到 vm 上 router }) -
自定義路由模塊文件router.js示例
import VueRouter from 'vue-router' // 導(dǎo)入 Account 組件 import account from './main/Account.vue' // 導(dǎo)入 GoodsList 組件 import goodslist from './main/GoodsList.vue' //導(dǎo)入Account的兩個(gè)子組件 import login from './subcom/login.vue' import register from './subcom/register.vue' //3. 創(chuàng)建路由對(duì)象 var router = new VueRouter({ routes: [ // acount goodslist { path: '/account',component: account, children: [ { path: 'login', component: login }, { path: 'register', component: register } ] }, { path: '/goodslist',component: goodslist }, ] }) // 把路由對(duì)象暴露出去 export default router -
在對(duì)應(yīng)的 vue 文件中添加容器示例
<router-link to="/account/login">登錄</router-link> <router-link to="/account/register">注冊(cè)</router-link> <router-view></router-view>
