摘要：管理后臺，日常就是提交各種表單了，這部分現(xiàn)有的方案，比如表單提交或者收集信息提交。，可以用于前端開發(fā)的工程構(gòu)建。帶了人的前端團(tuán)隊(duì)，你的精力開始在配合公司其他部門做用戶數(shù)據(jù)增長了。開始考慮使用的。

? ? ? ?hi,大家伙，我是佛系大大，很高興與你們一起溝通，學(xué)習(xí)，進(jìn)步。

? ? ? ?很久不更新博客了，現(xiàn)在回來再寫博客，盡然是有些懷念的感覺，幸福的感覺。因?yàn)閷懖┛?，?nèi)心會很寧靜，沉浸在自己的世界中，是很幸福的一件事。當(dāng)然，并非逃離現(xiàn)實(shí)（雞毛蒜皮，工作糟心的凡事），佛系大大還是很上進(jìn)的，讓我們一起努力。

? ? ? ?廢話不多說了，我們開始吧！

? ? ? ?首先介紹下，我是如何學(xué)習(xí)vue的，我學(xué)習(xí)vue之前，做過哪些思考？

? ? ? ?1.vue技術(shù)剛出來的時(shí)候，我第一眼會問，vue是什么？這個(gè)框架要干嘛？

? ? ? ?2.沒有vue這個(gè)框架，我們之前是怎么做的，我們遇到了哪些糟心的問題？

? ? ? ?3.怎么學(xué)習(xí)更有效呢，怎么快速掌握它，然后用它來干活？

? ? ? ?當(dāng)有了如上思考后，我們學(xué)習(xí)來就有的放矢，效率倍增了，比迷迷糊糊的學(xué)習(xí)要好至少10倍。大家先跟著我的思路走，最后可以自己總結(jié)，歸納，輸出。

? ? ? ?第一個(gè)問題：vue是什么？能做什么？

　　官網(wǎng)介紹vue是一個(gè)漸進(jìn)式框架。怎么理解這個(gè)漸進(jìn)式框架呢，經(jīng)過自己理解和在網(wǎng)上查閱資料，個(gè)人簡單理解是，一，你可以把他作為一個(gè)js庫使用，就和我們引入jquery一樣，用里面的一些功能；二 你可以在構(gòu)建新的項(xiàng)目時(shí)全部都是用這個(gè)框架提供的功能來構(gòu)建。用場景說明更好理解

? ? ? ?場景1：
如果你的技術(shù)團(tuán)隊(duì)技術(shù)選型比較保守，沒有新技術(shù)的使用場景，比如讓你去維護(hù)一個(gè)管理后臺。管理后臺，日常就是提交各種表單了，這部分現(xiàn)有的方案，比如form表單提交或者jquery收集信息ajax提交。這時(shí)候你可以把vue 當(dāng)成一個(gè)js庫來使用，就用來收集form表單，和表單驗(yàn)證。

? ? ?場景2：
在場景1中，你嘗到了甜頭。心中暗爽，還可以這么玩嘞。獨(dú)樂樂不如眾樂樂和大家分享之后，團(tuán)隊(duì)開始接受使用vue，小規(guī)模推廣起來。打怪升級該遇小boss啦，領(lǐng)導(dǎo)說，小伙后臺做的越來越有效率了，來承擔(dān)些常規(guī)業(yè)務(wù)開發(fā)，來正規(guī)軍編制和其他小伙伴一起做新聞列表和新聞詳情頁吧。
在這個(gè)項(xiàng)目中，你跟大膽一點(diǎn)把 整個(gè)頁面的dom 用Vue 來管理，你發(fā)現(xiàn)jquery 沒什么用了，列表用v-for來循環(huán)，把評論抽成小組件了。 評論交互比較復(fù)雜，但是你的關(guān)注點(diǎn)把原來jquery dom操作變成了關(guān)注數(shù)據(jù)的變化，用數(shù)據(jù)驅(qū)動DOM的變化。

? ? ?場景3:
經(jīng)歷了場景1 場景2，越來越受大家信賴，領(lǐng)導(dǎo)又找你了。你看新聞項(xiàng)目你做的不錯(cuò)，移動站也得重構(gòu)了，你做個(gè)移動端m站吧，正好微信和App分享出去用到。這時(shí)候，你需要在做移動端webapp了。 于是你由去了解 webpack vue-router，你發(fā)現(xiàn)前端 可以控制路由了。webpack，可以用于前端開發(fā)的工程構(gòu)建。

? ? 場景4:
場景3之后你在技術(shù)團(tuán)隊(duì)大放異彩，公司越來越器重你。年末領(lǐng)導(dǎo)又來找你了，小伙砸，想不想拿年終獎(jiǎng)啊，想的話給我做個(gè)新聞直播間吧。需求特別簡單：就是滾動播報(bào)新聞，用戶實(shí)時(shí)參與評論。有了場景3和之前的經(jīng)驗(yàn)，發(fā)現(xiàn)稍微有點(diǎn)力不從心了，你和后端的接口溝通上越來越頻繁，新聞直播間需要大量的數(shù)據(jù)在組件中共享數(shù)據(jù)，后來你發(fā)現(xiàn)了，vuex 處理數(shù)據(jù)在組件之間的流動得心應(yīng)手。

? ? 場景5:
年終獎(jiǎng)，拿到手了，過年回來升職加薪。帶了20人的前端團(tuán)隊(duì)，你的精力開始在配合公司其他部門做用戶數(shù)據(jù)增長了。發(fā)現(xiàn)場景2中你犯了個(gè)錯(cuò)誤，雖然整個(gè)頁面用Vue 管理 開發(fā)起來很方便，但是頁面白屏?xí)r間長，而且類似這樣的底層頁對seo都不好。開始考慮使用 vue2.0的SSR。為了保障團(tuán)隊(duì)高質(zhì)量的輸出，你開始研究如何給 vm寫單測...

場景1-5 從最初的只因多看你一眼而用了前端js庫，一直到最后的大型項(xiàng)目解決方案。

?第二個(gè)問題：沒有vue的時(shí)候，我們單頁面兩種方式 1.使用iframe加載頁面片段 2.使用ajax請求頁面片段。兩者共同問題是 里面的js邏輯不好處理，id名字重復(fù)，代碼寫的不規(guī)范。vue 則沒有這種問題

?第三個(gè)問題：1.邊理解，邊寫代碼，邊看效果，在繼續(xù)理解，然后寫筆記，輸出自己的理解。

? ? ?vue 大多數(shù)情況下是用來開發(fā)單頁面應(yīng)用程序，并不是說只能開發(fā)單頁面應(yīng)用程序。

? ? ?如果公司沒有seo需求，都是可以使用vue進(jìn)行系統(tǒng)構(gòu)建。移動站點(diǎn)，后臺管理系統(tǒng)特別適合用vue來開發(fā)。

?

?

?

? ? ??

?