我是一個後臺程式設計師，搞後臺程式碼和資料庫多點，但是專案逼我做全棧程式設計師

專案其他工程用的前端最先進也就mvc了，感覺和現在的前端主流脫節很大

先前也就在mvc裡引用了vue.js開發了一個微信企業號，那個專案也是把我搞得好累

這次繼續挑戰自己，玩一次純的前後臺分離

前端技術棧基本是空白，感覺又要把自己玩死了

坑爹的專案經理讓我同時做2個時間衝突的專案，真是24小時當2天在用

再看一眼ant design pro文件裡介紹的技術棧 ES2015+、React、UmiJS、dva、g2 和 antd，全都要學一遍。。。。

準備工作

預先要在電腦上裝好git和nodejs

git是程式碼版本的管理工具

nodejs是一套讓js當程式執行的環境，我感覺就像是python一樣，解析了指令碼語句來執行，說錯了請大神指點

後期需要用到nodejs自帶的包管理工具npm

還有基於node開發出來的webpack打包工具

開始吧

在本機上建立好一個準備存放專案的資料夾

從Github上獲取Ant Desigin Pro的專案

我喜歡用git bash來執行，因為git安裝完後右鍵選單自帶了git bash here

不需要自己再去跳轉路徑，指哪兒打哪兒

先把專案克隆下來

$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
 

然後初始化整個專案的npm包的依賴，如果是國內網路使用者可以修改下npm的包管理地址成阿里的映象地址

不改的話國內下載會很慢的

我這裡是國外網路就不用修改了，直接初始化

$ npm install

這一步挺費時間的，下一大堆包，估摸著有幾百兆，要等好一會兒了

感覺好像npm的初始化包依賴每個專案它都要重新給你下一遍，不會存一份公共的

聽說yarn對包的管理更科學，改天可以用用

蹲個坑的功夫因該就裝完了

開始見證奇蹟的時候到了

$ npm start

坑爹的翻車了，提示我找不到webpack模組，你全家都找不到webpack模組，靠，明明我全局裡有webpack

不知道為啥非要讓我在本地再裝一遍webpack，來就來吧

npm install webpack --save-dev

這裡的--save-dev表示這個包安裝的後只是給開發用的，最終在打包檔案的時候不會把這個包作為輸出打包

說白了就是這個包和最終執行無關，別打到釋出檔案裡佔空間

然後再start一下

如果你電腦的8000埠沒有被佔用的話會直接啟動起來

我的8000埠還有別的網站，所以它會提示是否使用其他埠

必須選是啊，不然還玩毛線啊

看到綠色的東西心情就是好

打包完後會自動開啟網頁

看到下面的頁面就表示工程能正常執行啦~