問題導(dǎo)航
1. 修改vue項目運行端口號
使用webpack創(chuàng)建的vue項目，端口號默認(rèn)是8080，可是不想用8080做項目的端口號怎么辦信姓？？
- 找到項目對應(yīng)的
config文件夾里的index.js,此時可以看到項目配置了port:8080
2. 調(diào)試插件
在vue調(diào)試方面绸罗，可以選擇安裝Chrome插件vue Devtools意推。打開vue項目，在console控制臺選擇vue面板珊蟀。在Devtools工具中菊值，可以選擇組件，查看對應(yīng)組件內(nèi)的數(shù)據(jù)信息育灸。也可以選擇Vuex選項腻窒，查看該項目內(nèi)Vuex的狀態(tài)變量信息。
下載下來之后打開Google瀏覽器磅崭，輸入地址chrome://extensions/ 儿子，點擊加載已解壓的擴(kuò)展程序
進(jìn)入到Chrome文件夾下，點擊確定：
我這里是把整個Vue-Devtools適配所有的瀏覽器源文件都安裝了砸喻，而你只需要要chrome瀏覽器的源碼就行柔逼，所以直接用我GitHub上的Chrome文件夾就行，點擊確定
確定完了之后就會發(fā)現(xiàn)鏈接欄的右邊有個V的標(biāo)志割岛，證明已經(jīng)成功愉适，但是此時會有很多人F12之后依然在調(diào)試界面看不到Vue，有可能是因為你寫的程序引用的vue文件是一個vue.min.js文件癣漆，是個壓縮文件维咸，這個壓縮文件是默認(rèn)不支持調(diào)試的，具體怎么調(diào)支持調(diào)試就請自行baidu吧！這里只需要把你引入的文件的源碼癌蓖，變成Vue.js的就行瞬哼，不要壓縮版的。如果還不行费坊，可以嘗試下關(guān)閉瀏覽器再打開倒槐。
參考鏈接：https://blog.csdn.net/weixin_38654336/article/details/80790698
3. UI組件庫
在vue組件庫方面，個人不推薦使用UI組件庫附井，畢竟自己造輪子的過程還是很有成就感的讨越。當(dāng)然，如果更重視開發(fā)效率永毅，并且選擇了vue2.0作為前端框架把跨，那么餓了么推出的Element組件就是一個很不錯的選擇。其github項目（https://github.com/ElemeFE/element）更新比較頻繁沼死，雖然項目會有些不穩(wěn)定着逐，但是目前為止element就是最好的支持vue2.0的UI組件。就像它的口號一樣意蛀，“快速成型耸别，就為讓你少加班”。
4. vue县钥、React秀姐、Angular1對比
4.1 性能 對比
在Angular1中，在scope作用域中每一次數(shù)據(jù)變化若贮，會觸發(fā)watcher的重新計算省有，angular對常用的dom事件，xhr事件等做了封裝谴麦， 在里面觸發(fā)進(jìn)入angular的digest流程蠢沿。在digest流程里面，會從rootscope開始遍歷匾效， 檢查所有的watcher舷蟀。并且，如果一些 watcher 觸發(fā)另一個更新面哼，臟檢查循環(huán)（digest cycle）可能要運行多次雪侥。
Vue則沒有這個問題，因為它使用基于依賴追蹤的觀察系統(tǒng)并且異步隊列更新精绎，數(shù)據(jù)的變化都是獨立觸發(fā)的，除非數(shù)據(jù)之間有明確的依賴關(guān)系锌妻。
vue官方宣稱vue的渲染性能優(yōu)于react代乃。為了有理有據(jù)讓人信服，vue開發(fā)團(tuán)隊建立了一個簡單的對比性能的項目（https://github.com/chrisvfritz/vue-render-performance-comparisons），它負(fù)責(zé)渲染10000個列表項100次搁吓。Vue官方將每一個參照項目都分別運行 20 次并取最好的結(jié)果結(jié)果如下圖：
由此可見原茅，Vue的性能是遠(yuǎn)好于Angular1，并且稍微優(yōu)于React的堕仔。
4.2 社區(qū)拓展對比
Angular1的背后是Google擂橘，所以社區(qū)基礎(chǔ)是不需要擔(dān)心的，從Tutorial到StackOverflow的問題數(shù)量都可以反映出生態(tài)系統(tǒng)很完整摩骨。Angular1之后的2.0版本幾乎是一個推翻重做的框架通贞，對于使用了1.X版本的項目，想要平滑的升級過渡到2.0版本應(yīng)該是非常困難的∧瘴澹現(xiàn)在Angular2的線上應(yīng)用數(shù)量還不算太多昌罩，主流編碼還是以1.X版本居多。這個版本化巨大的差異也間接影響到了開發(fā)者對于angular的信心灾馒。
Vue和React都有強大的社區(qū)支持茎用。React有狀態(tài)管理庫Flux、ReduxVue睬罗，相應(yīng)的轨功，Vue有vuex。Vue 和 React都提供了強大的路由庫來應(yīng)對大型應(yīng)用容达。然而Vue的路由庫和狀態(tài)管理庫都是由官方維護(hù)支持的古涧。React則是選擇把這些問題交給社區(qū)維護(hù)，因此創(chuàng)建了一個更分散的生態(tài)系統(tǒng)董饰。但相對的蒿褂，React 的生態(tài)系統(tǒng)相比 Vue 更加繁榮。此外卒暂，Vue 提供了Vue-cli腳手架啄栓，包括了Webpack，Browserify也祠，甚至路由庫昙楚，能讓你非常容易地構(gòu)建項目。
4.3 學(xué)習(xí)陡峭度對比
在指令與組件方面诈嘿，Vue中將指令和組件分得更清晰堪旧。指令只封裝 DOM 操作，而組件代表一個自給自足的獨立單元奖亚，有自己的視圖和數(shù)據(jù)邏輯婴谱。在 Angular1 中兩者有不少相混的地方。在API與框架設(shè)計方面玩般，angular1都比vue要復(fù)雜的多松邪。就個人感覺而言首繁，angular1和React的學(xué)習(xí)曲線會相對陡峭一些，而vue的編碼方式會更趨近于前端開發(fā)者的編程習(xí)慣陨囊。
因為vue的作者是中國人弦疮，vue的官方網(wǎng)站、教程和api肯定是最完善蜘醋、最易懂的胁塞。此外，每次大版本的發(fā)布压语，都會伴隨著詳盡的遷移說明文檔啸罢，包含了很多詳盡的闡述以及許多遷移的例子，甚至還有遷移工具无蜂。Angular的開發(fā)團(tuán)隊你們就不覺得臉紅么…
Vue的使用非常的簡單伺糠，創(chuàng)建一個本地的.html文件，然后通過如下方式引入 Vue：
這樣就生成了vue的hello world應(yīng)用斥季。
4.4 渲染能力對比
ReactNative能使你用相同的組件模型編寫有本地渲染能力的 APP（iOS 和 Android）训桶。能同時跨多平臺開發(fā)，對開發(fā)者是非常棒的酣倾。為了彌補這方面的不足舵揭，在2016年9月舉辦的JSConf2016期間，vue.js的作者尤雨溪宣布加盟Weex團(tuán)隊擔(dān)任技術(shù)顧問躁锡，雙方將進(jìn)行更緊密的合作午绳，共建開發(fā)生態(tài)圈。Weex是阿里的跨平臺用戶界面開發(fā)框架映之，Weex 的 JavaScript 框架運行時用的就是 Vue拦焚。在此之后，在 Weex 的幫助下杠输，使用 Vue 語法開發(fā)的組件不僅僅可以運行在瀏覽器端赎败，還能被用于開發(fā)iOS和 Android 上的原生應(yīng)用。
Vue.js 的作者尤雨溪表示：“Weex選擇Vue作為其JavaScript運行時框架是讓我非常高興的一件事蠢甲。Vue的組件開發(fā)模式已經(jīng)被web開發(fā)者社區(qū)廣泛 認(rèn)可僵刮，而把Vue的開發(fā)體驗拓展到原生平臺則是我一直想做但沒有余力去做的事情。一想到Weex將能讓開發(fā)者們用Vue的語法去寫跨 Web/Android/iOS三端的通用組件鹦牛，就讓我很興奮搞糕。”
4.5 vue的缺點
Vue就這么好曼追，難道沒有缺點嗎窍仰？當(dāng)然有，vue雖然在16年非忱袷猓火爆辈赋，但是相比于angular和react鲫忍，不論是成熟度還是社區(qū)活躍度都還不是對手。此外钥屈，Vue明確聲明了自己放棄了對IE8的支持。再看看現(xiàn)在的招聘網(wǎng)站上坝辫，有多少寫了需要有angular經(jīng)驗篷就，而又有多少寫了需要vue經(jīng)驗，就可見vue的影響力相比于angular和react還差的很遠(yuǎn)近忙。
5. vue全家桶及項目架構(gòu)
Vue有著名的全家桶系列竭业，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）及舍，vue-resource（https://github.com/pagekit/vue-resource）未辆。再加上構(gòu)建工具vue-cli，就是一個完整的vue項目的核心構(gòu)成锯玛。
vue-router路由
推薦使用npm工具來安裝vue-router
npm install vue-router
通過import導(dǎo)入并定義Vue模塊咐柜、vue-router模塊和需要使用的組件，在本例中攘残，分別是Goods拙友、Ratings和Seller組件。最后歼郭，如果在一個模塊化工程中使用它遗契，必須要通過 Vue.use()明確地安裝路由功能。
import Vue from 'vue'
import Router from 'vue-router'
import Goods from '@/components/goods/goods';
import Ratings from '@/components/ratings/ratings';
import Seller from '@/components/seller/seller';
Vue.use(Router); // 需要import Vue和Router病曾，不然會報錯undefined
通過const router= new VueRouter()來定義一個路由牍蜂，并傳入對應(yīng)的配置，包括路徑path和組件components泰涂。
最后鲫竞，在使用new Vue來創(chuàng)建和掛載vue根實例的時候，記得要通過 router配置參數(shù)注入路由负敏，即在router中export出來的路由對象贡茅，從而讓整個應(yīng)用都有路由功能。
6. vuex狀態(tài)管理
Vuex 是一個專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式其做。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)顶考，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。如前面所提到的妖泄，Vuex 已經(jīng)集成到 Vue 的官方調(diào)試工具vue Devtools驹沿，可以輕松的查看項目中的Vuex狀態(tài)變化情況。
假設(shè)有這樣一個場景：我們的項目規(guī)模比較大蹈胡，有多個父組件渊季，每個父組件同時又包含多個子組件朋蔫。如何保持對所有事件的追蹤將變得很困難。到底哪個事件是哪個組件派發(fā)的却汉，哪個組件該監(jiān)聽哪個事件驯妄？父組件將變得和子組件耦合越來越嚴(yán)重，因為它需要明確的派發(fā)和監(jiān)聽子組件的某些事件合砂。項目邏輯分散在各個組件當(dāng)中青扔，很容易導(dǎo)致邏輯的混亂，不利于我們項目的維護(hù)翩伪。
這就是 Vuex 用來解決的問題微猖。 Vuex 的四個核心概念分別是：
The state tree：Vuex 使用單一狀態(tài)樹，用一個對象就包含了全部的應(yīng)用層級狀態(tài)缘屹。至此它便作為一個『唯一數(shù)據(jù)源(SSOT)』而存在凛剥。這也意味著，每個應(yīng)用將僅僅包含一個 store 實例轻姿。單狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段犁珠，在調(diào)試的過程中也能輕易地取得整個當(dāng)前應(yīng)用狀態(tài)的快照。
Getters：用來從 store 獲取 Vue 組件數(shù)據(jù)踢代。
Mutators：事件處理器用來驅(qū)動狀態(tài)的變化盲憎。
Actions：可以給組件使用的函數(shù)，以此用來驅(qū)動事件處理器 mutations
Vuex和簡單的全局對象是不同的胳挎，當(dāng)Vuex從store中讀取狀態(tài)值的時候饼疙，若狀態(tài)發(fā)生了變化，那么相應(yīng)的組件也會高效的更新慕爬。并且窑眯，改變store中狀態(tài)的唯一途徑就是提交commit mutations。這樣便于我們跟蹤每一次狀態(tài)的變化医窿。只要發(fā)生了狀態(tài)的變化磅甩，一定伴隨著mutation的提交。
讓我們來看一個最簡單的vuex例子：
安裝 Vuex 之后姥卢，讓我們來創(chuàng)建一個 store卷要。創(chuàng)建過程直截了當(dāng)——僅需要提供一個初始 state 對象和一些 mutations：
現(xiàn)在，你可以通過 store.state 來獲取狀態(tài)對象独榴，以及通過 store.commit 方法觸發(fā)狀態(tài)變更僧叉。
7. vue-resource介紹
Vue-resource有體積小，支持IE9以上的瀏覽器棺榔，支持promise特性的特點瓶堕。同樣推薦使用npm來安裝Vue-resource。
$ npm install vue-resource
在安裝并引入vue-resource后症歇，可以基于全局的Vue對象使用http郎笆，也可以基于某個Vue實例使用http谭梗。
在發(fā)送請求后，使用then方法來處理響應(yīng)結(jié)果宛蚓，then方法有兩個參數(shù)激捏，第一個參數(shù)是響應(yīng)成功時的回調(diào)函數(shù)，第二個參數(shù)是響應(yīng)失敗時的回調(diào)函數(shù)凄吏。
vue-resource的請求API是按照REST風(fēng)格設(shè)計的缩幸，它提供了7種請求API：
get(url,[options])
head(url,[options])
delete(url,[options])
jsonp(url,[options])
post(url,[body], [options])
put(url, [body],[options])
patch(url,[body], [options])
8. vue工程目錄結(jié)構(gòu)
下圖是一個簡單的vue項目的大概結(jié)構(gòu)，下面簡要介紹一下每個文件夾中一般都會存放哪些內(nèi)容竞思。
components/文件夾用來存放Vue組件。個人建議钞护，把每一個組件中使用到的image圖片放置到對應(yīng)的組件子文件目錄下盖喷，便于統(tǒng)一的管理Node_modules安裝的該項目的依賴庫vuex/文件夾存放的是和Vuex store相關(guān)的東西（state對象，actions难咕，mutations)router/文件夾存放的是跟vue-router相關(guān)的路由配置項build/文件是webpack的打包編譯配置文件static/文件夾存放一些靜態(tài)的课梳、較少變動的image或者css文件config/文件夾存放的是一些配置項，比如服務(wù)器訪問的端口配置等dist/該文件夾一開始是不存在余佃，在我們的項目經(jīng)過build之后才會產(chǎn)出App.vue根組件暮刃，所有的子組件都將在這里被引用index.html整個項目的入口文件，將會引用我們的根組件App.vuemain.js入口文件的js邏輯爆土，在webpack打包之后將被注入到index.html中vue中less的應(yīng)用
在vue項目中一樣可以使用less預(yù)編譯椭懊，只是需要使用npm安裝less-loader插件。安裝完成后步势，在vue中的css模塊進(jìn)行簡單的配置氧猬，這樣就可以直接使用less來編寫樣式表了。在打包編譯的時候坏瘩，會自動生成對應(yīng)的css樣式盅抚。
9. vue實例講解Vue核心功能
Vue的功能有很多，很難一一進(jìn)行詳細(xì)的解釋倔矾。下面根據(jù)在工作中的項目實例妄均，結(jié)合代碼解釋一下vue的幾大核心功能。
計算屬性
假設(shè)有如下的購物車結(jié)算場景哪自，用戶選中商品的總金額是根據(jù)商品數(shù)量丰包、選中商品種類數(shù)
和商品單價來變化的。然而提陶，數(shù)量烫沙、選中種類數(shù)量和單價這幾個對象都是根據(jù)用戶選擇而動態(tài)變化的，如果在前端模版中為了計算最終商品總額隙笆，放入這幾個動態(tài)變化的變量（商品數(shù)量锌蓄、商品單價升筏、選中商品種類），會讓這個邏輯變得復(fù)雜難以維護(hù)瘸爽。在這種情況下您访，模版便不再簡潔清晰。Vue給出了此種場景的解決方案剪决，在任何復(fù)雜的邏輯灵汪，vue都推薦使用計算屬性。
如上圖所示柑潦，在html中享言，我們只需要使用{{totalPrice}}這個計算屬性就可以來表示最終的商品總額。我們不需要關(guān)注這個變量的數(shù)值變化渗鬼，totalPrice這個變量的邏輯寫在對應(yīng)的computed計算屬性中览露。
也許會有疑問，這個計算屬性和定義一個method方法不是差不多么譬胎？這兩者最大的區(qū)別是計算屬性是基于它的依賴進(jìn)行緩存的差牛。計算屬性只有在它的相關(guān)依賴發(fā)生變化時才會重新計算求值。在本例中堰乔，只有當(dāng)選擇商品的價格price和數(shù)量count發(fā)生變化時偏化，這個計算屬性totalPrice才會重新計算新的值。這就意味著镐侯，只要totalPrice這個值沒有發(fā)生變化侦讨，多次訪問該計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行計算析孽。
模版語法
Vue.js 使用了基于HTML 的模版語法搭伤，允許開發(fā)者聲明式地將 DOM 綁定至底層Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML 袜瞬，所以能被遵循規(guī)范的瀏覽器和HTML解析器解析怜俐。Vue的模版語法包括了使用雙大括號插入文本、使用v-html插入純HTML內(nèi)容邓尤、使用v-bind插入對象拍鲤、類似angular的v-if、v-show汞扎、v-for指令季稳、以及過濾器等等。
組件化
組件（Component）是 Vue.js 最強大的功能澈魄。組件可以封裝可重用的代碼景鼠，通過傳入對象的不同，實現(xiàn)組件的復(fù)用。
舉一個簡單的組建例子铛漓，我們首先編寫一個star組件溯香，它就是一個普通的star.vue文件。它的作用就是簡單實現(xiàn)了一個五角星浓恶。
如何在其他的vue文件中使用這個star組件呢玫坛？如下圖所示，首先通過import引入star組件對象包晰，并在想使用star組件的vue文件中聲明注冊star組件∈疲現(xiàn)在就可以愉快的通過標(biāo)簽來在該vue文件中任意地方使用star組件了。在你想展示一個五角星的地方伐憾，使用一個star標(biāo)簽勉痴，就可以輕松完成這個功能。
組件實例的作用域是孤立的树肃。這意味著不能在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)蚀腿。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的props選項扫外。如本例所示，子組件star要顯式的使用props選項聲明它期待獲得的數(shù)據(jù)廓脆。在這里就是指的“size”和“score”兩個變量筛谚。我們可以通過父級給子組件star傳入大小和數(shù)值這兩個對象，來實現(xiàn)對子組件的定制化停忿。
過渡效果
Vue 在插入驾讲、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果席赂，可以用簡單的幾行代碼實現(xiàn)酷炫的過渡效果吮铭。Vue 提供了 transition 的封裝組件，在使用v-if颅停、v-show等方法使得transition內(nèi)部dom元素發(fā)生變化時谓晌，可以給任何元素和組件添加 entering/leaving 過渡。
當(dāng)v-show中內(nèi)容發(fā)生變化時癞揉，transition組件中的元素會發(fā)生狀態(tài)的改變纸肉，在應(yīng)用了transition封裝后，Vue會自動識別目標(biāo)元素是否應(yīng)用了CSS過渡效果動畫喊熟，如果有柏肪，會在合適的時機(jī)添加 entering/leaving的class來實現(xiàn)該過渡效果。
下圖所示是一個簡單的過渡效果的例子芥牌，需要將想實現(xiàn)過渡效果的元素放在transition標(biāo)簽中包裹烦味，通過name=“slide-fade”來聲明過渡效果名稱，并在對應(yīng)的vue文件中添加過渡效果的css樣式壁拉，這樣就可以簡單的完成該元素的過渡效果谬俄。
總結(jié)
根據(jù)不完全統(tǒng)計柏靶，包括餓了么、稀土掘金凤瘦、蘇寧易購宿礁、美團(tuán)、天貓蔬芥、荔枝FM梆靖、房多多、Laravel笔诵、htmlBurger等國內(nèi)外知名大公司都在使用vue進(jìn)行新項目的開發(fā)和舊項目的前端重構(gòu)工作返吻。
此外，vue + vuex+ vue-resource + vue-router + webpack + es6 + less的項目架構(gòu)成為了越來越多大公司的第一選擇乎婿。
