款神器就是「CodeFun」，它號稱“UI 設計稿智能生成源代碼，10 分鐘完成 8 小時工作量”，讓我們做前端，不搬磚。

體驗一把一鍵生成代碼

說干就干，我按照官網介紹的三個步驟，順利將 UI 稿件，并轉換為 Vue.js 代碼了，看下最終效果：

從導入文件到導出代碼，前后只花了三分鐘，簡直不要太爽了

說說使用方法吧~

「CodeFun」官網上介紹的快速上手流程，只需 3 個步驟即可從 UI 稿到生成項目代碼。（該不會吹牛吧）

依葫蘆畫瓢，首先我按照官網說明，安裝好「CodeFun」插件，然后準備好 sketch 素材（也支持 PS 素材）：

然后開始三個步驟（省略安裝插件過程）：

直接打開 sketch 文件后，在頂部「插件」菜單，選擇「CodeFun」的「上傳設計稿」菜單：

然后在彈框中登錄賬號，并選擇創建的「項目」和「畫板」：

然后點擊「上傳」，等待上傳完成后，后臺便馬上能看到我們導入的項目，并且每個頁面整齊擺放，我們隨便打開一個頁面看看：

熟悉的代碼，熟悉的 HTML/CSS/JavaScript 映入眼簾。

然后試試導出項目代碼，可以自行選擇導出「微信小程序」或者「Vue.js」項目，還有選擇導出的是 rpx 單位還是 px 單位，簡直太貼心了！

說說簡單體驗后的感受

太香了，我們可以根據項目需要，選擇生成 H5 或者小程序代碼，還原度極高，很符合官網介紹的特點「精準還原設計稿，生成如工程師手寫一般的代碼」。

當然，畢竟是自動生成，可能存在部分不完美的地方（為CodeFun加），在實際項目部署前，我們花點時間做樣式微調，然后加上自己的業務處理邏輯，就可以啦。

這給我省下太多切圖時間了！

當然，這里只是簡單介紹，大家可以體驗下（官網：https://code.fun），然后結合文檔，相信你會很有收獲~

CodeFun 還有哪些強大功能？

在我翻閱「CodeFun」文檔時，發現它竟然還有好多強大的功能。

1.強大的 List 標簽組件

List 標簽組件用于循環列表，它的強大之處在于，可以自動將相似的列表內容，并自動識別為 List 標簽，生成 v-for 風格的代碼。那么我們眼見為實，以下面頁面評論列表為例，試試看：

紅色框內容設置為 List 標簽后，生成代碼如下（需要開啟“將 List 標簽輸出為循環列表”）：

<div class="flex-col list">
  <template v-for="(item, i) in listJWuhbbAm">
    <div class="list-item flex-col" :key="'item' + i">
      <div class="top-group flex-row">
        <img class="image_15" :src="item.avatar" />
        <div class="right-group flex-col">
          <span class="text_20">{{item.name}}</span>
          <span class="text_22">{{item.date}}</span>
        </div>
      </div>
      <span class="text_24">{{item.desc}}</span>
    </div>
  </template>
</div>

其 JS 代碼如下（需要開啟“數據綁定輸出模式”）：

export default {
  data() {
    return {
      "listJWuhbbAm": [{
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016341787250137.png",
        "name": "曉曉曉",
        "date": "2019-02-26",
        "desc": "非常的好，干凈整潔，衛生做得很到位，房東人很好，離地鐵站很近，五星好評，推薦哦！"
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016342203168767.png",
        "name": "啦啦菇涼",
        "date": "2019-02-16",
        "desc": "非常的好，干凈整潔，衛生做得很到位，房東人很好，很負責任，離地鐵站很近，生活方便，附近很多美食街，大型購物廣場，五星好評，推薦推薦哦，來了你就不想走的地方…"
      }, {
        "avatar": "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016343523144906.png",
        "name": "不告訴你",
        "date": "2019-02-16",
        "desc": "西天的晚霞揮動著絢麗的紗巾，晚風吹起來，一支支狗尾草搖響一渠黃昏的抒情曲。一排排白色的小木屋出現了，像童話一般精致，又像夢一樣美麗。"
      }]
    };
  },

};

和我們實際業務開發一樣，這里的 List 列表也是共用 CSS 樣式代碼的：

.list-item {
  padding: 27rpx 28rpx 28rpx;
  border-bottom: solid 2rpx rgb(245, 245, 245);
}

.list {
  margin-top: 15px;
}

是不是很香，用著還很方便~

2.優秀的 Grid 布局

在業務開發中，經常會遇到如「多列操作按鈕」這種網格類的布局需求，如下圖紅色框內容：

考慮到不同尺寸屏幕的適配問題，經常需要對布局進行特殊設置，常用就有 Grid 布局，在「CodeFun」中，就支持自動將設計稿中這類 UI 生成為 Grid 布局代碼，簡單操作后，上圖轉化為下面代碼：

<div class="grid">
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485084464827.png" class="image_7" />
    <span class="text_9">附近</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485093876260.png" class="image_7" />
    <span class="text_9">市區</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485107042498.png" class="image_7" />
    <span class="text_9">寫字樓</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485084464827.png" class="image_7" />
    <span class="text_9">郊區</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485093876260.png" class="image_7" />
    <span class="text_9">公寓</span>
  </div>
  <div class="grid-item flex-col items-center">
    <img src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/60d5579cf7299c00115e83a5/60ead063fdb7540011c108e0/16260016485107042498.png" class="image_7" />
    <span class="text_9">城中村</span>
  </div>
</div>

樣式代碼如下：

.grid-item {
  padding: 9px 0;
}

.grid {
  margin: 9px 12px 0 11px;
  color: rgb(51, 51, 51);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  white-space: nowrap;
  height: 162px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

這就很贊了。

3.靈活的組件類型

當我們需要設置頂部 header 或者底部固定 footer 時，只需將組件類型設置成 Header 或者 Footer 標簽即可：

4.方便的路由跳轉設置

對于前端應用，經常需要在不同頁面進行跳轉，「CodeFun」也支持設置頁面路由跳轉：

生成了下面的 JS 代碼：

export default {
  data() {
    return {};
  },
  methods: {
    view_21OnClick() {
      this.$router.push({
        name: 'index'
      });
    }
  }
};

在「CodeFun」使用過程中，加上這幾個功能，已經能滿足我們大部分的切圖場景了，節省下來的切圖時間，可以讓我們有更多時間用來處理業務邏輯。cool

對 CodeFun 的思考

當我們在項目中開始使用 「CodeFun」，會發現我們業務研發流程悄悄發生了變化，下圖對比了兩種業務研發流程：

顯然，新的研發流程搭配「CodeFun」，會更加靈活且高效~

體驗總結

體驗了幾天「CodeFun」后，說說我的一些建議：

1. 可以增加對 React/Angular 等前端框架的支持；（為了能照顧到更多用戶哈）
2. 「數據綁定」模塊的交互不夠直觀，對新手可能很難理解如何去進行配置。（可以做得更直觀一點）

我認為「CodeFun」重要的價值在于：利用高效的識別特點，大幅度幫助前端工程師從繁瑣的頁面切圖中解放出來。通過較低的學習成本，讓使用者能更加簡單且高效的完成需求。

目前「CodeFun」產品還在快速迭代，建議大家在使用過程中，盡量避免使用太過復雜的 UI 稿，可能會存在生成效果的偏差（相信「CodeFun」工程師們已經在努力減小這些偏差），但其實也還好，我們可以在生成的代碼中，適當做一些調整即可。