前言
一行白鷺上青天
需求
最近，我們老板刷刷的為了省事，給美術減壓（背景有點長，不說了）。
美術出 fairygui，我需要在網頁上看到實時操作，並且看到效果！
需求分析
這怕是要了我的狗命啊，但是要年底了，包住飯碗要緊。
提煉關鍵字，fairygui，網頁展示，操作，Egret
再濃縮一下：fairygui 為交互素材，白鷺為引擎，vue為展示頁面
一、fairygui 是什么？
官方地址：http://www.fairygui.com/guide/
FairyGUI提供了一個強大的UI編輯器，使用習慣與Adobe系列軟件保持一致，美術設計師和策划都可以輕松上手。
airyGUI提供了多個游戲引擎SDK：Unity、Cocos2d-x、Cry Egine, MonoGame, Havok Vision/Project Anarchy、Egret、LayaAir、CocosCreator、Haxe、Pixi、Flash、Starling，未來還將支持UE4、LibGDX等。借助FairyGUI-SDK，
你可以輕松在UI中使用3D對象、粒子等元素，而且FairyGUI還解決了環形進度條、像素點擊測試、圖文混排、循環列表、虛擬列表、曲面UI、VR輸入等UI開發中常見的痛點
提供的SDK：Egret、LayaAir
言外之意，我要是想要用到fairyGui，我還要一個H5引擎
二、Egret是什么？
白鷺為開發者提供移動端游戲開發一站式解決方案，並建立包含核心渲染引擎2D/3D、游戲開發工具、創意動畫工具、資源工具、原生打包方案等全球首個HTML5完整工作流，幫助全球25萬+活躍開發者高效開展工作。
汗顏，牛逼的是用來做游戲開發的，我能夠怎么辦 我也很絕望啊~
為什么選擇Egret？
就提供兩個SDK，我有選擇嗎？
emmm，第一感覺白鷺相對成熟一些，坑沒有這么多吧（良好的自我安慰心理）
三、二者結合
fairygui 是提供官方案例的
我簡單的總結一下，順便說一說這里面的坑
- 將FairyGUI庫以及依賴的rawinflate庫拷貝到libs目錄。（如果你在編輯器發布時沒有勾選
壓縮描述文件，那么這個庫是不需要的）
敲重點：這句話我反復了好了幾遍，剛開始根本摸不着頭腦，哪里來的FairyGUI庫？？？？
找來找去，思來想去，把官網都要翻遍了
眼睛尖的我發現，原來要去下載他的官方案例，才有這個FairyGUI庫
一如既往的貼心（白鷺SDK下載地址）：http://www.fairygui.com/product/#Egret-SDK
2. 復制一份rawinflate.min.js，並改名為rawinflate.js。（如果你在編輯器發布時沒有勾選壓縮描述文件，那么這個庫是不需要的）。
這句話是什么意思呢：編輯器是指fairygui ，貼心的我再次截圖
3. 在egretProperties.json文件中添加:
{
"name": "rawinflate",
"path": "./libs/rawinflate"
},
{
"name": "fairygui",
"path": "./libs/fairygui"
}
貼心的我，再次截圖，其實呢，就是在白鷺里面引用fairygui庫 我用的是最新的白鷺 5.XX
4.使用FairyGUI編輯器完成UI編輯。發布目錄請選擇Egret工程的resource/assets目錄。發布后得到兩個（或以上）文件。
這個我還是再次截圖吧！fairygui發布，一定要選擇Egret哦！不然就是打出了很多多余的文件
設置好了以后，發布項目，把這些文件復制到白鷺項目里面（這個 直接用你下載的demo 實例就好 如果你不想再她的基礎之上，你可以直接在自己的項目中引用）
5. 在default.res.json里，將上述的文件添加到定義中。擴展名為fui文件，類型請選擇為bin。注意：Egret自動檢測添加的資源，名稱通常會自動加上下划線和后綴，例如basic.fui，名稱自動設置為“basic_fui”，這里我們要手動將_fui去掉，名稱只需要為“basic”
這個就是靜態資源的導入
一定要記得 .fui 文件的引用
6. 在代碼里完成規定的初始化，例如設定默認字體，滾動條等等。
你這樣子以為就可以了，一定會報錯的，相信我
2020年2月補充
為什么會報錯呢？
第一 要替換自己的資源 一定要注意包名對應
第二 也要看一下官方是怎么樣資源加載的 特別是靜態資源加載 （注意資源名 包名 一一對應就好了）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
華麗麗的分割線，昨晚還沒有寫完，繼續寫
算了，不接着寫了（我這該死的 任性啊）
成功跑通自己案例的
