阿里飛冰官方網站 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 簡化版 碼雲 | 簡化版 碼雲鏡像倉庫 |
原作者：D2開源組，原鏈接：https://juejin.im/post/5b6349716fb9a04f834669d6