DE編譯運(yùn)行vue項(xiàng)目：

npm run serve

報(bào)如下錯(cuò)誤：

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

解決方法：

1.打開cmd

2.執(zhí)行以下命令修改node相關(guān)配置

setx NODE_OPTIONS --max_old_space_size=10240

3.重啟IDE，重新編譯運(yùn)行vue項(xiàng)目。

概是18年的時(shí)候，那時(shí)候我還是一個(gè)很稚嫩的小前端，我記得很深刻，當(dāng)前GitHub上有個(gè)叫做Screenshot-to-code的開源項(xiàng)目沖榜賊猛，短短幾天就獲得了好幾千的star，這個(gè)項(xiàng)目主要表達(dá)的是在未來三年內(nèi)，深度學(xué)習(xí)將改變前端開發(fā)。它將會(huì)根據(jù)設(shè)計(jì)圖自動(dòng)生成對應(yīng)的html，css代碼，從而拉低開發(fā)軟件的門檻。

也就是說我們前端以后不需要再畫靜態(tài)了！

項(xiàng)目地址：https://github.com/emilwallner/Screenshot-to-code

這里簡單說一下原理

Screenshot-to-code-in-Keras 是 Emil Wallner 實(shí)現(xiàn)的一個(gè)可根據(jù)設(shè)計(jì)草圖生成基本 HTML 和 CSS 網(wǎng)站的神經(jīng)網(wǎng)絡(luò)。以下是該過程的簡要概述：

1）給訓(xùn)練好的神經(jīng)網(wǎng)絡(luò)提供設(shè)計(jì)圖像

2）神經(jīng)網(wǎng)絡(luò)將圖片轉(zhuǎn)化為 HTML 標(biāo)記語言

3）渲染輸出

Emil Wallner 分三步從易到難構(gòu)建三個(gè)不同的模型：

這里只做簡單介紹，感興趣的朋友可以在頭條搜索中搜 Screenshot-to-code 即可看到更多詳細(xì)內(nèi)容

發(fā)展到今天，設(shè)計(jì)圖轉(zhuǎn)代碼已經(jīng)基本實(shí)現(xiàn)

前幾天體驗(yàn)了一下藍(lán)湖內(nèi)測的設(shè)計(jì)圖轉(zhuǎn)代碼功能，真的挺震撼的。廢話不多說，大家請看視頻！

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

（第二張示例圖中標(biāo)簽文字溢出并不是bug，因?yàn)楣雀铻g覽器最小文字只支持12px）

從上面視頻可以看到，UI小姐姐只需要把畫好的項(xiàng)目設(shè)計(jì)圖放上去，我們前端就可以直接生成完整的靜態(tài)頁。目前來看主要支持vue和普通的html頁面。css倒是兼容得非常好，less和sass都支持不過這畢竟只是一個(gè)內(nèi)測版，相信等正式推出時(shí)應(yīng)該是可以兼容到react等主流框架的。

感覺這對我們前端來說其實(shí)還是利大于弊，因?yàn)榍岸俗钪饕慕换ズ瓦壿嬑磥砦迥陜?nèi)應(yīng)該是不可能像靜態(tài)一樣可以生成，那么設(shè)計(jì)圖轉(zhuǎn)代碼的功能的推出其實(shí)還是可以在一定程度上減輕我們的工作負(fù)擔(dān)。

因?yàn)楫嬱o態(tài)頁對大部分前端來說都是枯燥無味的工作。如果以后都不用畫靜態(tài)的畫，那么我們就可以有空閑時(shí)間來學(xué)習(xí)新技術(shù)，新知識(shí)。比如現(xiàn)在挺火的云函數(shù)啥的，學(xué)學(xué)總沒有壞處。或者學(xué)一門后端語言等都可以不斷完善自己的技術(shù)棧,提高自己的行業(yè)競爭力。