阿里巴巴开源前端工具 ice飞冰简易教程
ice?又名，飛冰。海量可復用物料，通過 GUI 工具極速構建中后臺應用。是阿里巴巴前端團隊最近開源的一個產品，僅僅一天的時間，就收到了2800多個 star。本文介紹它的一些簡單用法。
飛冰的特點
⚡️?海量高質量物料：?每周有新增，專業視覺設計，海量物料滿足你開發之所需。
🎯?GUI 工具：?零配置的工程整合，物料可視化一鍵導入復用。
🎨?ICE DESIGN 設計語言：?“凍”人的中后臺設計語言。
在 ice 的官網上，我們發現有非常多的案例模板，或者稱為模塊更為合適。像是模塊化開發一樣，你所需要的所有功能基本上都能在官網中的塊列表中找到。
項目開發和使用方式
下載?Iceworks?并創建項目，然后創建頁面進行物料搭建組合，之后可以打開編輯器進行二次編碼，完成之后點擊構建即可打包出可用的 JS、CSS bundle。
詳細步驟請參見文檔：Iceworks 快速上手。
物料開發和發布方式
首先 clone 當前倉庫，開發完成之后提交 PR 合并后執行下面相關命令：
npm run bootstrap?初始化 Lernanpm run lint?代碼 Lint 風格檢查npm run publish?代碼發布
零環境搭建
Iceworks 是 ICE 推出的輔助開發者快速開發中后臺前端應用的 GUI 軟件，目前支持 macOS 和 Windows 兩大平臺。通過?Iceworks?點擊下載按鈕即可。
創建項目
軟件啟動后，項目列表為空，可通過的【創建項目】新建一個項目。
界面會跳轉到模板市場，目前提供三種模板進行選擇，鼠標移動到指定的模板上，點擊【以該模板創建項目】進入項目配置頁面。
- 新建一個文件夾或者選擇已有的空文件夾（避免覆蓋原有文件）。
- 給項目起一個項目名，以便后續識別。
點擊【開始創建項目】即可開始創建
默認會在創建的時候同時安裝項目依賴，時間上會相對久一些，也可取消勾選，后續自行安裝
管理項目
項目創建完成后，會自動添加到項目列表中，并打開當前項目管理面板。
通過項目管理面板，可執行?啟動調試服務?新建頁面?構建項目?等操作。
啟動調試服務
點擊?啟動調試服務?等待完成后出現服務地址，點擊可以預覽當前項目。
上圖是一個 Ice Design CMS 模板啟動后的預覽效果。
新建頁面
啟動調試服務后，可使用新建頁面來搭建頁面，通過?block?的組合完成頁面的創建。
進入 block 搭建界面
上方列出了當前項目可用的 layout 布局方式，選中任一一個作為新頁面的布局。
下方列出了當前可選擇的 blocks, 點擊即可選擇該 block 到已選區塊列表中。
右側為選中 block 組合的縮略圖預覽。
選擇 layout 以及 block 后，點擊右下角生成頁面，會提示輸入頁面名，路由名，可以定義需要的名稱，
- 頁面名：表示生成的文件名稱。
- 路由名：表示頁面的訪問地址，可通過?
http://127.0.0.1:4444/#/xxxx?訪問到對應的路由頁面。
示例中，創建了?page16?訪問后即可看到剛搭建的頁面了。
進入開發調試
點擊項目版面上的?編輯中打開?會立即使用設置中選擇的編輯器打開項目，目前支持?Visual Studio Code，Sublime Text 3，WebStorm?和?Atom?等編輯器，推薦使用?Visual Studio Code，如果你的電腦中未安裝請先安裝。
項目目錄結構說明：
project-name
├── build // 打包資源
├── mock // 模擬數據
├── public // 靜態資源
├── src
│ ├── components // 公共組件
│ ├── config // 公共配置
│ ├── layouts // 通用布局
│ ├── pages // 頁面
│ ├── utils // 通用方法
│ ├── global.scss // 全局樣式
│ ├── index.html // 入口模板
│ ├── index.js // 應用入口
│ └── routes.jsx // 路由入口
├── tests // 測試
├── .editorconfig // 代碼風格配置
├── .eslintignore // eslint 忽略目錄配置
├── .eslintrc // eslint 配置
├── generator.json // generator.json
├── package.json // package.json
├── README.md // 項目說明
└── yarn.lock // 模板版本管理
例如上一步已創建的?Page16?頁面：
通過二次開發增加業務邏輯，完成業務需求。
打包發布
點擊項目面板上的構建項目按鈕，將開發的構建出最終的 js css 等資源。
構建完成后，會在項目目錄下生成?build?文件夾，里面存在了?index.html?index.js?index.css?文件。使用你熟悉的方式，上傳到對應的 cdn 服務器。
部署上線
上線過程即發布 HTML 文件的過程，index.html?文件存在在?build?目錄中，將?index.html?文件復制到對應的服務服務器，并修改 html 源碼中的?/build/index.css?和?/build/index.js?地址，是上一步中得到的 cdn 地址以及站點標題。
一個標準的 HTML 文件如下所示：
<!DOCTYPE html>
<html>
<head>
??<meta charset="utf-8" />
??<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
??<link rel="icon" type="image/png" >
??<meta name="viewport" content="width=device-width">
??<title>ICE Design CMS</title>
<link href="./index.css" rel="stylesheet"></head>
<body>
??<div id="ice-container"></div>
??<script src="https://www.xttblog.com/xxx/.../react-dom.development.js"></script>
<script type="text/javascript" src="./index.js"></script></body>
</html>
在線上環境強烈推薦使用 production 版本的 React，而不是 development 版本。它們之間的區別除了體積之外，還包括一些針對線上環境的性能優化。
總結
以上是生活随笔為你收集整理的阿里巴巴开源前端工具 ice飞冰简易教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js实现简单五子棋游戏源码
- 下一篇： 阿里云服务器报“wordpress IP