引用Vue設計網頁

更新 發佈閱讀 2 分鐘

最近想用新的方式,Vue來開發網頁程序。

有個需求要開發本地端網頁,在這之前的開發網站設計,我都使用flutter。


一來可以共用很多與手機端APP的API和設計元素,從建構到完成很快。

但是也有些許缺點。


在本地端的使用需要先聯網才能找字型開啟的需求。

如果每次架設都需要這樣可苦了。

之前在產線試做的WIP系統,就常常因為開不起來,字型跑掉而詬病。


他的開不起來是系統會白色網頁一片

必須先讓他連外網以後再連內網。


可是公司內部區域網路是不准聯外的,當時溝通了很久資訊部門才同意讓我以測試的名義先暫時開啟然後關閉。

隨著產線的階段性任務完成,原本的flutter web網頁我打算讓它功成身退。

同樣的頁面設計和功能,重新用VUE的架構來完成。


這個本來也就是今年我們想要實現的新技術引入,為了本地無網路的WEB端,必須找一個可以自由客製化,更好介接API且方便更改的介面。


VUE是我在外出差的時候,看到人家設計內部網路通訊與顯示的一個範例。

模板上能出報表,能出簡易的圖表。能夠使用Dashboard,引用API方式也很簡單,語法相近HTML+NODE JS。

網路上GITHUB有很多人家設計好的模板,一行npm指令就能啟用。

跟我們目前已經實作的技術很吻合。


這兩天就特別用原本在樹莓派開發的後端python程序搭配CANBUS通訊,寫出API。

然後在試著先寫完一頁式網站,即時顯示訊息和圖表。


測試的效果極佳,資源耗損又少,重要的是解決了不用聯外網的需求。

只要docker布建完成以後,開機隨啟用。


這下台南的案子看來有著落,可以趕快去布建了!

留言
avatar-img
寫程式也寫字的卡密優
26會員
394內容數
嗨,我是卡密優,一個寫程式也喜歡寫字的工程師。 我目前仍在職場中,但正在思考:有沒有可能用寫作與創作,打造更自由的工作與生活方式? 這裡是我的紀錄日記,也是一場關於技術、寫作、生活設計的實驗。歡迎你加入,一起慢慢長出屬於我們的自由樣貌。
2026/02/09
喝著早上的咖啡,讓我想起以前的年輕工作往事。 那時還很青澀,當著客服工程師,每天就是等著排工和送貨。 處裡客戶治具上的問題,還有做基本的客服需求諮詢。 當時客戶治具是靠我們工程師去送貨,然後到廠後在客戶機台上測試完成,才交由客戶繼續測試。 前兩天如果還有什麼問題基本上我們都得到場
Thumbnail
2026/02/09
喝著早上的咖啡,讓我想起以前的年輕工作往事。 那時還很青澀,當著客服工程師,每天就是等著排工和送貨。 處裡客戶治具上的問題,還有做基本的客服需求諮詢。 當時客戶治具是靠我們工程師去送貨,然後到廠後在客戶機台上測試完成,才交由客戶繼續測試。 前兩天如果還有什麼問題基本上我們都得到場
Thumbnail
2026/02/08
Gemin 的AI Plus 方案,實際上的PRO使用次數真的蠻少的。 週五的時候我想測試看看使用的次數是否比原本AI PRO方案,也就是六百塊的方案少多少。 按照往常一樣開一個新專案,然後把SPEC及規劃文檔都丟進去,產生完的程式碼再丟進去直接反覆詢問建立。 結果大概比免費版的多撐了
Thumbnail
2026/02/08
Gemin 的AI Plus 方案,實際上的PRO使用次數真的蠻少的。 週五的時候我想測試看看使用的次數是否比原本AI PRO方案,也就是六百塊的方案少多少。 按照往常一樣開一個新專案,然後把SPEC及規劃文檔都丟進去,產生完的程式碼再丟進去直接反覆詢問建立。 結果大概比免費版的多撐了
Thumbnail
2026/02/04
Linux是我最喜歡的工作系統。 長久工作穩定不中斷,可以好幾年不要重開機。 windows電腦我使用下來的情況,最少幾個月大概就會因為某個程式異常導致桌面系統崩潰。 你在沒有辦法開工作要用的檔案和程式的情況下,一定要讓他重開機一次。 而且windows有定期UPDATE 防毒或漏洞,所
Thumbnail
2026/02/04
Linux是我最喜歡的工作系統。 長久工作穩定不中斷,可以好幾年不要重開機。 windows電腦我使用下來的情況,最少幾個月大概就會因為某個程式異常導致桌面系統崩潰。 你在沒有辦法開工作要用的檔案和程式的情況下,一定要讓他重開機一次。 而且windows有定期UPDATE 防毒或漏洞,所
Thumbnail
看更多
你可能也想看
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
在建立網站的過程中,網頁設計和網頁開發這兩個術語經常被提及。它們雖然密切相關,但各自涵蓋了網站建設的不同方面,從創造視覺吸引力到實現網站的互動功能。
Thumbnail
在建立網站的過程中,網頁設計和網頁開發這兩個術語經常被提及。它們雖然密切相關,但各自涵蓋了網站建設的不同方面,從創造視覺吸引力到實現網站的互動功能。
Thumbnail
網站架設可以怎麼做呢?如果你想低成本高效益架站,並且可以隨時自定義自己的網站,那麼我們強烈建議你選擇WordPress 這個多功能網站架設+網頁設計平台。我們將為你解析 WordPress 網頁設計的每一步,讓你無需專業的程式設計知識,在5分鐘內學會 WordPress 架站!
Thumbnail
網站架設可以怎麼做呢?如果你想低成本高效益架站,並且可以隨時自定義自己的網站,那麼我們強烈建議你選擇WordPress 這個多功能網站架設+網頁設計平台。我們將為你解析 WordPress 網頁設計的每一步,讓你無需專業的程式設計知識,在5分鐘內學會 WordPress 架站!
Thumbnail
先說學期2-1完課的整體感覺: 非常精彩刺激!
Thumbnail
先說學期2-1完課的整體感覺: 非常精彩刺激!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News