AntDesign 第一章(2) --------初始化專案
初始化專案
現在你已經瞭解了前端開發的基本概念，開始要進入實際專案了。這一節將教會大家如何初始化一個專案，開發出一個可以展示 hello world 的專案。
這堂課程中的相關程式碼你都可以在 https://github.com/ant-design/react-tutorial 中拿到，當你無法參考文件完成你自己的程式碼時你可以以它作為一個參考。不過我們建議你儘可能的自己完成課程相關的程式碼，如果遇到了問題或者對課程有疑問可以在文件下方留言告知我們。
為什麼需要腳手架
一個普通的網頁基本都會包含 HTML，CSS 和 JS 三個關鍵的元素。這一點多年以來都是沒有改變的，但是前端的開發模式已經發生了很大的變化。以往我們寫的網頁前端程式碼都是可以通過瀏覽器開啟後能夠直接執行的，但是現在對於大部分前端專案來說，我們寫的程式碼其實並不是原生的 JS，HTML 和 CSS，而是基於它們擴展出來的更上層的語法。
本課程，我們將會大量編寫 React 元件（實際上 antd 就是 Ant Design 的 React 元件的實現），這些元件需要通過編譯為最終的 JS 和 CSS，然後引入到 HTML 網頁中才能夠被瀏覽器正確地執行。
由於存在一個編譯過程，這就需要基於編譯工具搭建一個專案的腳手架，使得我們可以通過工具實現程式碼的編譯。通過編譯後的程式碼才是瀏覽器能夠執行的程式碼，這樣我們才能進行專案的開發和最終的部署。
編譯工具
前端開發不只涉及到 JS，同時還有 CSS、HTML、圖片等資源，以及其他一些檔案型別。比如：LESS 指令碼可以提高 CSS 的編寫效率，TypeScript
開源社群的繁榮，一方面讓我們可以有很多工具，但是同時也讓專案初始化變得繁瑣。
本課程選擇使用 umi 作為編譯工具。其實 umi 不僅僅是一個編譯工具，它同時也是一個前端框架。它對社群的 webpack，react-router 等進行的封裝，使得我們可以基於它快速搭建一個 React 專案。
umi 有各種型別的腳手架，方便你快速啟動專案。本課程為了讓讀者能夠更好地理解 umi 背後的邏輯，將從零開始初始化一個能夠執行的腳手架。
下面，請大家跟著一起操作，完成之後將會得到一個最簡單的應用：網頁顯示 hello world。
初始化
目錄結構
在初始化完成後你將會得到如下的一個目錄結構：
- antd-course
- config
- config.js
- src
- page
- HelloWorld.js
- package.json
- .gitignore
- node_modules
該目錄結構只是作為你後面的一個參考，你不必著急建立，只需要按照下面的步驟一步一步操作就可以創建出這最終的結構。
開發環境
首先，請安裝 NodeJS。NodeJS 是一個 JS 執行環境，umi 基於 JS 編寫，並且需要在你的開發機上執行，所以依賴於它。
安裝完成後，執行下面的命令確認是否安裝成功。
node -v
npm -v
在 umi 中我們採用了一些 NodeJS 的新特性，請確保你的 NodeJS 版本大於等於
8.5.0。
在國內，你可以安裝 cnpm 獲得更快速、更安全的包管理體驗。使用如下命令安裝：
npm install -g cnpm --registry=https://registry.npm.taobao.org
然後你可以通過如下的命令確認是否成功：
cnpm -v
通過 cnpm 你可以很方便的安裝和管理一些第三方的包。比如 umi 就將通過它來安裝到你的專案。
安裝 umi 依賴
首先，新建一個空的資料夾，用來存放本課程後續所有的程式碼。
mkdir antd-course
cd antd-course
然後，呼叫 cnpm init 來初始化 package.json，它是 NodeJS 約定的用來存放專案的資訊和配置等資訊的檔案。
cnpm init -y
上面命令中，引數 -y 表示對 npm 要求提供的資訊，都自動按下回車鍵，表示接受預設值。
接著，安裝 umi 的依賴。
cnpm install umi --save-dev
安裝完成之後你會發現 package.json 中多出了一項 devDependencies 的配置。這是由於在上面命令中，引數 --save 可以讓依賴資訊儲存到 package.json 中，這樣其它開發者下載程式碼後就只需要執行 cnpm install 後就會自動安裝專案依賴的包。
另外專案中還多出了一個 node_modules 的資料夾，它包含了大量的內容。裡面存放的是專案依賴的包，umi 的程式碼也是被下載並安裝到其中的。如果你想要了解更多，可以參考 npm 的文件。
第一個頁面(這部分有問題)
解決: 其實說白了就是 在程式中手動建立config檔案 再建立config.js檔案,(這個檔案的位置就優點不知所云)
該教材 應該是手動搭建的 (所以更能理解該框架是怎麼回事)
接下來，讓我們建立我們的第一個頁面。在建立第一個頁面之前，我們需要先初始化 umi 的配置。
在 umi 中，大量的使用了配置和約定來幫助你快速開發程式碼。首先，我們先來建立配置檔案。配置檔案被約定為 config/config.js。為了讓後面的開發更加高效，我們推薦你下載一款適合你的編輯器或者 IDE 來建立和編寫程式碼。本課程中我們推薦你使用 VS Code。
在 umi 中，你也可以簡單的使用 .umirc.js 來作為配置檔案。當然它和 config/config.js 是二選一的。更多說明可以參考 umi 的文件。
config/config.js 中初始化的內容如下：
export default {};
一開始它只是 export 了一個預設的空的物件 {}，並沒有什麼作用，但是在後面我們會用到。
我們所說的頁面是指由一個獨立路由對應的 UI 介面，關於路由你後續可以在《路由配置》中瞭解更多。在這一章節中你只需要知道對於這個例子，就是指我們期望通過瀏覽器訪問 /helloworld 的時候可以得到一個顯示 hello world 的頁面。
首先我們新建一個 src 目錄，它用來存放專案的除了配置以及單測以外的主要程式碼。
在 umi 中，約定的存放頁面程式碼的資料夾是 pages，是複數，不過如果你喜歡單數的話你配置項中你可以新增 singular 為 true 來讓 page 變為約定的資料夾。在本課程中我們使用單數來作為約定目錄。所以你需要修改配置檔案為：
export default {
singular: true,
}
接下來讓我們建立第一個頁面元件，新建 src/page/HelloWorld.js 檔案，程式碼如下：
export default () => {
return <div>hello world</div>;
}
這樣第一個頁面就建立完成了，程式碼的具體含義我們會在後面的章節介紹。接下來你就可以通過 umi 來啟動你的程式碼了。首先你需要在 package.json 中的 scripts 裡面新增兩個命令：
{
"scripts": {
+ "dev": "umi dev",
+ "build": "umi build"
}
}
scripts 中定義的命令，可以在專案根目錄中通過 cnpm run [scriptname] 來執行。接下來請執行：
cnpm run dev
修改 package.json 的時候要注意它是一個標準的 JSON 格式的檔案，如果失敗請檢查是不是逗號或者引號的問題。如果順利，專案將會執行起來。你將會在命令列中看到如下的日誌：
複製日誌中的地址，比如 http://localhost:8000/（這裡的埠可能會因為被佔用或者其他原因而不同，請參考你的機器中實際打印出來的地址）。並在後面加上 helloworld 的路徑後（比如 http://localhost:8000/helloworld）在瀏覽器中開啟，然後你將會看到：
在 umi 中，你可以使用約定式的路由，在 page 下面的 JS 檔案都會按照檔名對映到一個路由，比如上面這個例子，訪問 /helloworld 會對應到 HelloWorld.js。
除了約定式的路由，你也可以使用配置式的路由。至於使用哪種路由取決於你的喜好，這不是本課程的重點。在本課程中為了讓開發者更好的理解路由元件巢狀，我們會使用配置式的路由。
要使用配置式的路由，你需要在配置檔案 config/config.js 中新增如下配置：
export default {
routes: [{
path: '/',
component: './HelloWorld',
}],
}
其中 component 是一個字串，它是相對於 page 目錄的相對路徑。在上面的配置中我們將路由的路徑配置成為了 /，這樣你訪問 http://localhost:8000/ 首頁就能看到 hello world 了。
當有了 routes 的配置之後 umi 就不會再執行約定式對應的路由邏輯了，而是直接使用你通過配置宣告的路由。關於路由的更多資訊你可以參考《路由配置》這一章節的說明。
新增 umi-plugin-react 外掛
umi 是一個可插拔的企業級 react 應用框架，它的很多功能都是通過外掛實現。尤其是 umi 官方的 umi-plugin-react 這個外掛集成了常用的一些進階的功能，為了後面的課程需要，我們需要新增該外掛集到專案中。
首先通過 cnpm install umi-plugin-react --save-dev 來安裝該外掛集。然後在配置檔案 config/config.js 中引入該外掛：
export default {
plugins: [
['umi-plugin-react', {
// 這裡暫時還沒有新增配置，該外掛還不會有作用，我們會在後面的課程按照需求開啟相應的配置
}],
],
routes: [{
path: '/',
component: './HelloWorld',
}],
}
到這裡是需要在網上找下 git包
這個主要是用來管理程式碼的 (要下載對應版本)
傳送門 :https://gitforwindows.org/
這是個安裝教程:
傳送:https://www.jianshu.com/p/414ccd423efc
https://blog.csdn.net/renfufei/article/details/41647875
知乎上的這個也不錯:
https://www.zhihu.com/question/19739424/answer/257433791
這個東西是用來在gitHub裡面更新程式碼用的
我也是頭一次用
這有個教程 關於如何使用這個包的(不想要在gitHub傳程式碼的可以跳過該部分)
https://www.youtube.com/watch?v=QqwCgEovim0
.gitignore
cnpm 安裝的依賴會被預設安裝到專案的 node_modules 目錄下。這個目錄通常是不需要提交到程式碼倉庫中的。如果你使用的是 git 來作為程式碼的管理工具，那麼你可以新增 .gitignore 檔案到專案根目錄中，避免將不必要的程式碼提交到 git 倉庫中。
.gitignore 如下：
node_modules
dist
.umi
其中 .umi 是 umi 在開發過程中產生的臨時入口檔案，便於開發除錯，同樣也不需要提交到程式碼倉庫中。dist 是構建出來的產物，通常也不需要提交。
我們建議你可以在本地通過 git 管理起你的程式碼，方便在後面的課程中更好的操作你的程式碼。
git init
git add -A
git commit -m 'init'
構建和部署
你可以通過 cnpm run build 來構建出最終的產物，執行該命令後會生成最終的 HTML、CSS 和 JS 到 dist 目錄下。它們是瀏覽器可以直接識別並執行的程式碼，這樣你就可以將它們部署到你想要的伺服器上了。