預告：Javascript全棧開發的系列文章

自從一年前發佈了Vuejs小書的電子書，也有些日子沒有碰過它們了，如今由於項目的緣故，須要使用JavaScript全棧開發。因此，我得把這個全棧環境搭建起來。

提及來搭建JS全棧開發環境，設計到的東西真的很多。

大的選擇是這樣的：

1. 前端採用Vuejs
2. 後端採用Nodejs
3. 存儲使用Mongodb。

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

1. vue-router，前端路由管理
2. vuex,前端數據管理，專業一點的說法，就是狀態管理，這些數據，多是屬性，數組，對象等等，能夠跨組件訪問，而不像是data函數那樣提供的數據只能被本組件訪問，能夠想到，稍微大一點的前端工程都必須前端狀態管理的。
3. axios，前端HTTP訪問，以promise的形式，封裝了相似fetch，AJAX的能力
4. buefy，前端微型框架，可使用自定義標籤使用自定義組件，而且CSS框架爲Bulma
5. Bulma，儘管使用了微框架，只是讓對CSS framework的瞭解降到最低，可是不是說就不須要了解了。仍是得學習的。Bulma相對於老牌的Bootstrap，是不須要依賴於JS框架，也沒有任何JS代碼，所以能夠和任何一框架很好的結合，好比這裏的Vuejs。這就是我選擇它的緣由
6. webpack&babel。有了vue-cli，對webpack&babel的瞭解能夠降到最低，可是也不能不學，稍微須要一些定製的配置，也是離不開它的。起碼得知道如何啓動一個開發服務器，已經發布build，還有把前端服務通過proxyChain跳轉到後端服務去等等。
7. vue-cli，前端腳手架工具，它能夠把以上的組件整合起來到一個工程內，這是咱們的全棧開發的開始，所以這個工具也是須要學習的，儘管它並不難

一個最爲基礎的vue-cli工程腳手架的建立，如今得須要160M左右的空間佔用。在個人電腦和網絡狀況下，須要2分半的時間纔會完成，可見現在的前端開發已經變得愈來愈複雜了。

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

爲了便於理解，我會用一個最小的案例完成整個開發過程，就是案例在現實中並不存在，可是也是有用的，就是你能夠當它們是模板，直接拷貝代碼，而後填充你的內容。天下代碼一大抄嘛，沒有什麼不對的，畢竟這些寫代碼是最快的。這個案例的數據模型就是對一個{id，name}的對象進行CRD（建立刪除列表）。

因此，文章會包括這些：

1. 使用Vuejs腳手架，快速搭建一個{id，name}的對象進行CRD的界面。這裏會使用vuex管理狀態，使用vue-router管理路由
2. 使用Mongodb存儲和提供後端CRD服務 https://juejin.im/post/5b727a...
3. 使用Nodejs搭建{id，name}的對象的後端CRD服務
4. 使用Axios訪問後端CRD服務
5. 整合全棧服務

整個系列，是會採用個人一向風格，就是不疾不徐，娓娓道來，學習完畢，你能夠掌握我提到的全系列的知識，並把它用到你的項目中。

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