可視化搭建前端工程 - 阿里飛冰了解一下

阿里飛冰官方網站 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 做爲你對這個項目的承認與支持，謝謝。