1.獲取Ant Design Pro專案
我是一個後臺程式設計師,搞後臺程式碼和資料庫多點,但是專案逼我做全棧程式設計師
專案其他工程用的前端最先進也就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埠還有別的網站,所以它會提示是否使用其他埠
必須選是啊,不然還玩毛線啊
看到綠色的東西心情就是好
打包完後會自動開啟網頁
看到下面的頁面就表示工程能正常執行啦~