阿里飛冰官方網站 alibaba.github.io/ice
每次新做一個專案，無論大小都要幹這些事：
- 框架選型
- 初始化腳手架（比如使用 create-react-app 或者 vue-cli）
- 也可能你選擇了開源腳手架，克隆倉庫
- 四處找輪子
- 安裝各種依賴
- 新建頁面，寫邏輯
- 設計選單
- 設計路由
- 新建頁面的時候去複製舊的頁面修改
- 把新的頁面註冊路由，註冊選單
- 做完了這個頁面做下個，新建檔案，複製程式碼，註冊路由…
煩不煩？要優雅！
今天介紹阿里的開源產品：飛冰
飛冰是什麼
“海量可複用物料，通過 GUI 工具極速構建中後臺應用”。
這句 slogan 還是非常準確的：
飛冰是一套綜合解決方案，用來極速構建中後臺應用（其實也可以做非中後臺應用）。
可以做到極速是通過『海量可複用物料』和『GUI 開發工具』實現的。
使用飛冰的開發工作流是這樣的：
下載 GUI 工具並安裝 =>
視覺化的選擇我們提供的初始模板建立專案 =>
視覺化的建立頁面並選擇我們提供的 100+ 高質量可複用區塊 =>
生成程式碼進行二次開發 =>
開發完成之後點選打包編譯出 HTML、JS、CSS 檔案 =>
部署使用
在整個流程中，你可以完全通過 GUI 工具點選操作，無需安裝配置 Node 環境等前端開發工具，也無需配置 webpack 等構建指令碼，我們已經按照淘寶前端最佳實踐全部內建。此外，絕大部分的業務需求，我們都已經開發出對應的物料，可以通過 GUI 進行視覺化的拼裝，儘可能避免你去編寫額外的業務邏輯。
物料源
下面是一張很長的圖片，為了體積考慮這張圖比較模糊，但是可以感受一下 ICE 的區塊數量：
原始網頁連結 alibaba.github.io/ice/block
目前為止 ICE 已經支援 react vue Angular 三大主流框架的物料資源
打比方我現在專案需要富文字編輯器，可以看到區塊裡提供了三款編輯器可供選擇
所有的這些，都是使用 GUI 就可以加入到專案中使用的，下面將會展示如何從安裝 iceworks 客戶端到在專案中新建頁面。
如何使用
安裝
為了真實演示，特意刪掉了以前安裝的 app
演示系統為 macOS，iceworks 支援 Windows 版本。
iceworks 下載地址 alibaba.github.io/ice/icework…
稍微等待了一會兒，下載完成。安裝後得到了這樣一個 App：
上手
安裝後開啟看到一個很簡單的介面：
切換到模板標籤可以看到飛冰目前提供的腳手架列表：
區塊標籤可以看到區塊列表
外掛
設定
這就是表面上所有的功能，下面我們來建一個專案體驗一下
新建 vue 專案
飛冰是從 react 開始做的，現在 vue 和 Angular 物料源還比較少，我們切換到 vue 選項卡里…
是不是混進了什麼奇怪的東西！
沒錯，D2Admin 出了 ICE 版！
（此時你可能會想：我去，看了半天竟然是一篇軟文！其實不是的，在我做 D2 但是還沒開源的時候，就有朋友推薦我 ICE 這個工具，當時感覺就很不錯。沒想到之後受到了 ICE 開發團隊的邀請，自然十分樂意開發了 ICE 版本，這真的是個不錯的工具，請看下面的使用介紹。）
在我和阿里的開發者一個月的對接之後，D2Admin ICE 誕生了，作為飛冰平臺上第一個非官方 vue 腳手架，D2Admin ICE 承擔的希望還是很大的！下面使用這個腳手架做演示，展示如何不寫程式碼建頁面，不寫程式碼出圖表！
選擇 D2Admin ICE 作為起始模板後會讓我們填寫專案儲存地址：
填寫完成後開始下載模板，下載後會提示我是否要立刻安裝依賴：
為了避免動態圖過大我沒有錄安裝過程：
在寫上面的時候已經提示我依賴安裝完成了（很人性化有沒有）：
ennn…沒毛病。
啟動專案
點選 啟動除錯服務 會在本地開啟除錯服務，vue 專案預設執行的是 npm start：
開啟顯示的連結，可以看到專案已經穩穩地跑起來了：
D2Admin ICE 實質上是 d2-admin-start-kit 的特別版本，為適應 ICE 的邏輯修改了一部分程式碼，可以看到模板十分乾淨，沒有了任何完整版的示例 demo：
關閉 ICE 內整合的終端後可以看到專案皮膚，可以顯示出現在有哪些頁面，安裝了哪些依賴等：
新建頁面
點選 新建頁面 會開啟新建頁面介面：
隨便選擇一個區塊新建一個頁面（中間的等待時間是 iceworks 在從 npm 下載區塊程式碼）
選擇區塊：
效果：
下面嘗試一下選擇多個區塊：
自動生成了選單：
頁面效果：
檢查一下自動生成的程式碼目錄：
自動生成的頁面元件：
自動生成的樣式檔案：
該有的都有了，不該有的也有了，連生命週期鉤子都幫你寫了一遍！
結語
演示一遍下來後，我生成了兩個頁面，沒有寫一行程式碼，剩下的操作就是修修改改，把多個頁面都需要的元件提取一下，做做修改工作。
D2Admin 團隊也會在以後的時間裡盡力和 ICE 團隊合作開發 vue 公用區塊，加速 ICE 的 vue 生態建設，也希望眾多的 vuer 都可以參與進來，平臺有了，社群繁榮起來才是對大家都有利的事情。
D2Admin ICE 將會保持和 D2Admin Start Kit 一致更新，如果你看到完整版的 D2Admin 實在喜歡，從完整版做減法也未嘗不可 :）
D2 Projects
| 地址 | 描述 |
|---|---|
| 團隊主頁 | D2Admin 所屬的團隊主頁 |
| 中文文件 | 中文文件 |
| D2Admin 完整版 預覽地址 | 完整版 預覽地址 |
| D2Admin 完整版 github | 完整版 Github 倉庫 |
| D2Admin 完整版 碼雲 | 完整版 碼雲映象倉庫 |
| D2Admin 簡化版 預覽地址 | 簡化版 預覽地址 |
| D2Admin 簡化版 github | 簡化版 Github 倉庫 |
| D2Admin 簡化版 碼雲 | 簡化版 碼雲映象倉庫 |
開源專案組官方公眾號
本文在專案文件中收錄位置
在最後，如果你看完了，並且覺得還不錯，希望可以到 專案主頁 上點一個 star 作為你對這個專案的認可與支援，謝謝。