如何精準高效的實現視覺稿？------前端開發輔助工具AlloyDesigner使用介紹

AlloyDesigner：http://alloyteam.github.io/AlloyDesigner/

介紹：AlloyDesigner是騰訊開發的一款工具，其在頁面構建過程當中，直接嵌入開發的Web頁面中運行，幫助咱們精準、高效的構建Web頁面的UI，配合 瀏覽器的一系列配置，將 Developer Tools 所修改代碼自動保存入開發環境中，極大的提升工做效率。

安裝方式參考官網，推薦使用內嵌收藏欄的方式使用。

環境要求：

• Chrome V31+(正式版)

• 本地服務器開發

本次教程的環境：

• Chrome  55.0.2845.0 canary (64-bit)

• 本地服務器APACHE

使用教程：

1.安裝：拖拽至收藏欄。

2.打開開發好的頁面。

3.點擊第一步拖拽託到收藏欄的連接，底部出現 AlloyDesigner 的工具欄。

工具欄說明：

 4.使用打開視覺稿功能，選擇設計人員提供的視覺設計圖，加載後以下圖：

視覺圖和開發的頁面已融合進一個頁面，鼠標左鍵拖拽或按方向鍵調整視覺稿位置，基本重合後，固定設計稿(工具欄按鈕/ALT+F)。

固定後依舊能夠經過ctrl+方向鍵控制效果圖。

能夠觀察兩者區別，針對修改要修改的區域利用 Developer Tools 對開發的網頁進行調整。

可對瀏覽器進行一系列配置， Developer Tools 所修改代碼會自動保存入開發環境源碼中。以下步驟5-7。

5.配置Workspace。依次Developer Tools → Settings  → Workspace →Add folder，選擇開發環境目錄。而後給予 Developer Tools訪問文件的權限。

6.選擇即將要修改的文件，右鍵選擇「Map to file system resource...」（下圖一），出現列表點擊文件 （下圖二） ，映射到開發環境的文件裏。

7.根據對比狀況在 Developer Tools   修改具體代碼。

修改後， 所修改代碼已自動保存入開發環境中。

若是正在使用編輯器，會收到提示：

同時觀察SVN，也能夠看到文件已被自動修改。

按照這種方法，咱們能夠不斷經過 Developer Tools   修改代碼，直到和視覺稿徹底一致。

8.其餘功能，如取色、測距、查看不透明度，可查看官網教程:http://alloyteam.github.io/AlloyDesigner/worddoc.html#h_3823

來自爲知筆記(Wiz)