0x08 前期回顧：

上周寫了兩篇文章，修改開源項(xiàng)目ppchart在本地部署。因?yàn)槲也皇菍I(yè)的前端工程師，所以差最重要的圖表展示部分沒有完成。本周在大模型的幫助下，終于成功部署到了我的NAS上。
前期回顧請(qǐng)看：

0x09 使用ArcoDesign組件美化頁(yè)面

看一下我上期結(jié)束時(shí)實(shí)現(xiàn)的詳情頁(yè)面是這樣的

和原版對(duì)比一下,原生的表單組件太難看了

看一下代碼，引用的是“@arco-design/web-vue”，搜索一下，原來(lái)是字節(jié)跳動(dòng)開源的前端 組件庫(kù)，到官網(wǎng)http://pro.arco.design/學(xué)一下就會(huì)了。我美化完就成了下面這樣的。

0x10 【整理代碼】的實(shí)現(xiàn)

查一下monaco-editor的文檔，兩行代碼就實(shí)現(xiàn)了

formatCode() { const editor = this.editor const model = editor.getModel() if (model) { editor.getAction('editor.action.formatDocument').run();//自動(dòng)格式化代碼 } }

0x11【切換echarts版本】功能的實(shí)現(xiàn)

求助“文心大模型”

第一次說我的需求不是最佳實(shí)踐，給我簡(jiǎn)化一下，然后給我一堆沒有的代碼。然后我繼續(xù)說，我就想要?jiǎng)討B(tài)引入js的實(shí)現(xiàn)，終于給了我能用的代碼！

0x12【運(yùn)行】功能的實(shí)現(xiàn)

這個(gè)有點(diǎn)難了，不能用js的eval執(zhí)行這些圖表代碼片段來(lái)實(shí)現(xiàn)。我用不同方式問了大模型也沒有得到解決辦法。最終，我找到一個(gè)ppchart-nuxt3的開源項(xiàng)目，是用nuxt3改成的ppchart項(xiàng)目。我找到他的圖表詳情頁(yè)面實(shí)現(xiàn)，還是看不懂。但是我把他的代碼片段發(fā)給的大模型，讓大模型幫我改成了一下。

最后終于完成了

0x13 打包部署到NAS上

這步其實(shí)是最簡(jiǎn)單的，我在第一篇文章就說了，就想用現(xiàn)成的代碼編譯成靜態(tài)文件，部署到webstation或者是docker容器里，結(jié)果是開源的代碼不全，害的我折騰了這么多天。

我今天就用Web Station部署一下：

• 首先用npm run build命令編譯一下源碼到dist目錄。
• 然后把編譯成好的文件上傳到NAS的一個(gè)目錄下。

• 在WebStation中創(chuàng)建一個(gè)虛擬主機(jī)。指定文檔根目錄和端口就OK了，PHP都不用選。

最后訪問指定的端口測(cè)試一下，完全沒有問題。

0x14 總結(jié)

通過這些天的折騰，我學(xué)習(xí)到了很多前端知識(shí)。最主要的是我真的感受到了大模型的強(qiáng)大，雖然我還沒用到國(guó)外先進(jìn)的大模型，但是國(guó)產(chǎn)的大模型真的也可以取代一些初級(jí)程序員了。老莊我距離失業(yè)已經(jīng)不遠(yuǎn)了~~。

作者聲明本文無(wú)利益相關(guān)，歡迎值友理性交流，和諧討論～

,