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

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

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

大的選擇是這樣的：

前端采用Vuejs

后端采用Nodejs

存儲使用Mongodb。

大的定了，小的也就跟著來，前端配套的話需要：

vue-router，前端路由管理

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

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

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

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

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

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

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

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

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

所以，文章會包括這些：

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

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

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

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

整合全棧服務(wù)

整個系列，是會采用我的一貫風格，就是不疾不徐，娓娓道來，學習完畢，你可以掌握我提到的全系列的知識，并把它用到你的項目中。

前端說就是一些腳本和標簽，其實復雜度真的不低，這篇文章的圖，可以窺視到前端復雜的一角了。Modern Frontend Developer in 2018