這是一個(gè)基于 vue & axios & nodejs(express) & mongodb(mongoose) 的登錄／注冊(cè)demo腊脱，面向 vue 初學(xué)者，場(chǎng)景雖簡(jiǎn)單姑丑，但五臟俱全懈万。有前后臺(tái)，涵蓋非常多的 vue 及其相關(guān)技術(shù)的基本操作泻蚊。有詳細(xì)的注釋?zhuān)瑤椭蠹铱焖偕鲜?vue 躲舌。且我整理了一些在vue全棧開(kāi)發(fā)過(guò)程中，有可能會(huì)用到的技術(shù)文章性雄，希望大家能在這些前輩們身上有所收獲没卸。
當(dāng)然如果您覺(jué)得這篇文章 or 這個(gè)項(xiàng)目對(duì)您的學(xué)習(xí)有所幫助，請(qǐng)不吝點(diǎn)個(gè) star 鼓勵(lì)一下秒旋，當(dāng)然如果存在問(wèn)題约计，也非常希望您能提交 issues 或者在 我的博客任意文章下留言，我會(huì)及時(shí)處理回復(fù)迁筛，和大家一起進(jìn)步煤蚌。
項(xiàng)目Github地址
項(xiàng)目技術(shù)棧
- 前臺(tái)：vue & vue-router & vuex & vue-cli(webpack) & element-ui
- 后臺(tái)： nodejs (express)
- 前后臺(tái)交互： axios
- 單點(diǎn)登錄： jsonwebtoken
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# start server
node server.js
# start mongodb
mongod
項(xiàng)目開(kāi)發(fā)推薦閱讀
因?yàn)轫?xiàng)目難度并不是很高，且我也在代碼中寫(xiě)了較多注釋?zhuān)晕也粫?huì)細(xì)節(jié)到行去解釋代碼细卧，而是會(huì)搜集尉桩、分享一些前輩們書(shū)寫(xiě)的相關(guān)技術(shù)文章，相信大家踩在巨人的肩膀上贪庙，能學(xué)到更多蜘犁。
1. vue-cli 生成項(xiàng)目主體框架
使用 vue-cli 的優(yōu)點(diǎn)是方便快捷，能快速生成項(xiàng)目的主體結(jié)構(gòu)止邮。但不能一味依賴這種開(kāi)發(fā)方式这橙，還是要了解其中的技術(shù)細(xì)節(jié)。此處推薦幾篇文章：
- vue-cli官方文檔
- webpack2 中文文檔
- vue-cli#2.0 webpack 配置分析 - 掘金（強(qiáng)烈推薦）
2. vue 全家桶
顧名思義就是我們熟知的 vue + vue-router + vuex + … 导披，
雖然還有很多的組件屈扎，但是基礎(chǔ)都是 前三個(gè)。這塊兒首推官方文檔盛卡，我個(gè)人認(rèn)為 vue 的成功除開(kāi)自身素質(zhì)過(guò)硬外助隧，最大的優(yōu)勢(shì)就是文檔寫(xiě)的非常的淺顯易懂！所以學(xué) vue 一定要多讀官方文檔滑沧。此處放出連接：
當(dāng)然掘金上也有許多的詳解文章并村，也推薦大家去看看。
3. 后臺(tái)服務(wù)端
后臺(tái)主要作用是接收前臺(tái)請(qǐng)求滓技，處理完成后返回一個(gè)含有所需數(shù)據(jù)或狀態(tài)的api接口哩牍，供前臺(tái)去調(diào)用。這需要你了解熟悉 nodejs 或任意一種后端語(yǔ)言令漂，以 nodejs 為例膝昆，有以下文章推薦你去閱讀：
- 阮一峰老師的 js 教程（含node） （強(qiáng)烈建議把js部分也看看）
- Express 4.x API - 作業(yè)部落 Cmd Markdown 編輯閱讀器（express 4.x 的中文文檔）
- koa （最近常出現(xiàn)的一個(gè)node框架丸边，有興趣的可以去了解一下 ）
4. axios前后臺(tái)交互
vue 和 node 的交互還是主要采用 ajax 來(lái)進(jìn)行，此處就介紹一個(gè)主流交互工具 axios荚孵，當(dāng)然別的工具例如 vue-resource妹窖、jquery 都可以。但是 vue-resource 不維護(hù)了收叶，jquery如果只是為了 ajax 就引入又太龐大骄呼，所以我個(gè)人是比較推薦axios。此處久推薦這幾篇文章吧：
- axios全攻略 （我寫(xiě)的判没，羞射??蜓萄，但我個(gè)人覺(jué)得很值得閱讀）
- Vuex2和Axios的開(kāi)發(fā) | Hope’s Blog （也是掘金作者，讓理論照進(jìn)現(xiàn)實(shí)）
5. jsonwebtoken
此項(xiàng)目使用 jsonwebtoken 進(jìn)行用戶認(rèn)證澄峰，其實(shí) jsonwebtoken 也可以用來(lái)做權(quán)限控制或者向Web應(yīng)用傳遞信息嫉沽。關(guān)于 jsonwebtoken 除了它的官方文檔外，還有這幾篇文章可以看看：
6. 組件庫(kù)
隨著 vue 的不斷發(fā)展俏竞，社區(qū)越來(lái)越活躍绸硕，因此產(chǎn)生了許多組件庫(kù)，此處我就推薦一個(gè)我個(gè)人使用的最多的由餓了么團(tuán)隊(duì)開(kāi)發(fā)的組件庫(kù)element-ui魂毁。
7. demo
開(kāi)發(fā)其實(shí)除了冥思苦想外臣咖，很多時(shí)候要多讀別人的源碼，從中才能有所啟發(fā)漱牵。放出幾個(gè)demo：
- 一個(gè)使用 github api寫(xiě)的登錄程序 （掘金作者，我的這篇文章也是受他啟發(fā)）
- vue + koa + mysql 的 todos demo （想了解 koa + mysql 如何在vue中運(yùn)用可以看看）
后記
當(dāng)然紙上學(xué)來(lái)終覺(jué)淺疚漆，絕知此事要躬行酣胀。學(xué)完理論就需要去實(shí)踐，所以希望大家多多去看看別人的代碼娶聘，然后寫(xiě)寫(xiě)小demo闻镶。一定會(huì)事半功倍。希望和大家共同進(jìn)步丸升。
然后我無(wú)意發(fā)現(xiàn)有人未經(jīng)過(guò)我同意就轉(zhuǎn)發(fā)我的文章铆农。而且未出現(xiàn)任何我的相關(guān)信息。我的觀點(diǎn)是我寫(xiě)文章是為了方便大家狡耻，督促自己蹦误，所以轉(zhuǎn)就轉(zhuǎn)了沪袭，不需要我的同意，但是哪怕不出現(xiàn)我的名字，也請(qǐng)務(wù)必注一個(gè) 轉(zhuǎn) 字牵寺，不要把他當(dāng)作自己的文章來(lái)用。
