摘要：自從一年前發(fā)布了小書的電子書，也有些日子沒有碰過(guò)它們了，現(xiàn)在因?yàn)轫?xiàng)目的緣故，需要使用全棧開發(fā)。說(shuō)起來(lái)搭建全棧開發(fā)環(huán)境，設(shè)計(jì)到的東西真的不少。這個(gè)案例的數(shù)據(jù)模型就是對(duì)一個(gè)，的對(duì)象進(jìn)行創(chuàng)建刪除列表。

自從一年前發(fā)布了Vuejs小書的電子書，也有些日子沒有碰過(guò)它們了，現(xiàn)在因?yàn)轫?xiàng)目的緣故，需要使用JavaScript全棧開發(fā)。所以，我得把這個(gè)全棧環(huán)境搭建起來(lái)。

說(shuō)起來(lái)搭建JS全棧開發(fā)環(huán)境，設(shè)計(jì)到的東西真的不少。

大的選擇是這樣的：

前端采用Vuejs

后端采用Nodejs

存儲(chǔ)使用Mongodb。

大的定了，小的也就跟著來(lái)，前端配套的話需要：

vue-router，前端路由管理

vuex,前端數(shù)據(jù)管理，專業(yè)一點(diǎn)的說(shuō)法，就是狀態(tài)管理，這些數(shù)據(jù)，可能是屬性，數(shù)組，對(duì)象等等，可以跨組件訪問(wèn)，而不像是data函數(shù)那樣提供的數(shù)據(jù)只能被本組件訪問(wèn)，可以想到，稍微大一點(diǎn)的前端工程都必須前端狀態(tài)管理的。

axios，前端HTTP訪問(wèn)，以promise的形式，封裝了類似fetch，AJAX的能力

buefy，前端微型框架，可以使用自定義標(biāo)簽使用自定義組件，并且CSS框架為Bulma

Bulma，盡管使用了微框架，只是讓對(duì)CSS framework的了解降到最低，但是不是說(shuō)就不需要了解了。還是得學(xué)習(xí)的。Bulma相對(duì)于老牌的Bootstrap，是不需要依賴于JS框架，也沒有任何JS代碼，因此可以和任何一框架很好的結(jié)合，比如這里的Vuejs。這就是我選擇它的原因

webpack&babel。有了vue-cli，對(duì)webpack&babel的了解可以降到最低，但是也不能不學(xué)，稍微需要一些定制的配置，也是離不開它的。起碼得知道如何啟動(dòng)一個(gè)開發(fā)服務(wù)器，已經(jīng)發(fā)布build，還有把前端服務(wù)經(jīng)過(guò)proxyChain跳轉(zhuǎn)到后端服務(wù)去等等。

vue-cli，前端腳手架工具，它可以把以上的組件整合起來(lái)到一個(gè)工程內(nèi)，這是我們的全棧開發(fā)的開始，因此這個(gè)工具也是需要學(xué)習(xí)的，盡管它并不難

一個(gè)最為基礎(chǔ)的vue-cli工程腳手架的創(chuàng)建，現(xiàn)在得需要160M左右的空間占用。在我的電腦和網(wǎng)絡(luò)情況下，需要2分半的時(shí)間才會(huì)完成，可見如今的前端開發(fā)已經(jīng)變得越來(lái)越復(fù)雜了。

接下來(lái)看后端，一般習(xí)慣就是使用Nodejs+Express.js的搭配。這個(gè)沒有多少說(shuō)的，都是老東西了。為了訪問(wèn)Mongodb,也需要一套框架，基于Callback的，或者基于Promise+Await+Async的，也是需要選擇的。

為了便于理解，我會(huì)用一個(gè)最小的案例完成整個(gè)開發(fā)過(guò)程，就是案例在現(xiàn)實(shí)中并不存在，但是也是有用的，就是你可以當(dāng)它們是模板，直接拷貝代碼，然后填充你的內(nèi)容。天下代碼一大抄嘛，沒有什么不對(duì)的，畢竟這些寫代碼是最快的。這個(gè)案例的數(shù)據(jù)模型就是對(duì)一個(gè){id，name}的對(duì)象進(jìn)行CRD（創(chuàng)建刪除列表）。

所以，文章會(huì)包括這些：

使用Vuejs腳手架，快速搭建一個(gè){id，name}的對(duì)象進(jìn)行CRD的界面。這里會(huì)使用vuex管理狀態(tài)，使用vue-router管理路由

使用Mongodb存儲(chǔ)和提供后端CRD服務(wù) https://juejin.im/post/5b727a...

使用Nodejs搭建{id，name}的對(duì)象的后端CRD服務(wù)

使用Axios訪問(wèn)后端CRD服務(wù)

整合全棧服務(wù)

整個(gè)系列，是會(huì)采用我的一貫風(fēng)格，就是不疾不徐，娓娓道來(lái)，學(xué)習(xí)完畢，你可以掌握我提到的全系列的知識(shí)，并把它用到你的項(xiàng)目中。

前端說(shuō)就是一些腳本和標(biāo)簽，其實(shí)復(fù)雜度真的不低，這篇文章的圖，可以窺視到前端復(fù)雜的一角了。Modern Frontend Developer in 2018