文章

如何在 Vue3 中使用 pwa (Chrome)

其實 PWA 在哪個框架中使用,都沒有太大的差異,但是往往這一行 code 到底要放哪裡,我就是不知道啊XDD

最近的專案剛好都是用 vue3 來實作,自然要把 pwa 放進去 vue3 中也勢必要來解一篇紀錄一下,不然下次就又忘記了。

閱讀更多

Vue3 使用 getCurrentInstance 在 production 環境中不能使用 ctx ?

因為目前只比較常用 Elementui-plus ,要使用他的 message api ,vue2 我們可以直接用 this.$message去拿他全局註冊的方法,但vue3 沒有this啊!所以就要用 getCurrentInstance 這個 funciton 拿到全局註冊的方法。

閱讀更多

Vue3 的資料狀態管理,provide / inject、vuex、props

進入 vue3 後,多了一種跟 react 很像的資料管理方式 provide / inject,和 vuex 相同的是他可以跨組件讀寫資料,但是和 vuex 不同的是跨組件的範圍僅限於 provide 註冊那一層的子組件。

也就是說 provide 類似於 props 把資料傳入子組件,props 只能傳一層,但 provide 可以下去好幾層都可以存取,官方概念圖如下:

閱讀更多

vue3 + ElementUI plus 按需載入

目前為止常用的框架有出到vue3的好像只有Elementui-plus,竟然這麼快就出ㄌ~太驚艷了,所以新案子就直接用起來!

對程式碼有潔癖的人,一樣可以選擇按需載入。

閱讀更多

vue3 + elementui-plus 表單驗證使用 ref

升級到 vue3 後,elementui 也有推出 vue3 版本叫做 elementui-plus,可以點這裡去官網了解一下,名字聽起來就很屌啊!

官網的範例有很詳細的解說使用方法,可是他竟然沒有舉例 Vue Composition API 方式的寫法,啊我不用 Composition API 我升級到 vue3 幹嘛?

下面就來寫一下上網查到的資料,看看到底要怎樣使用 v-model + ref + setup()

閱讀更多

vue3 使用 router

在 vue3 中使用 router 的方式跟 vue2 有點不同,主要是 Composition API 的緣故,來看看怎麼改成 vue3 吧!

也可以直接參考官網

閱讀更多

Vue3 自己動手寫 websocket 底層

才剛學完 vue2 的 websocket 底層,馬上又要來寫 vue3 版本了。

沒辦法,想幫客戶用比較新的技術,以免他大佬幾年都懶得翻新網站,到時候維護時苦的還是我~QQ

原本 vue2 的概念是建立一個 vue 實例,然後可以在獨立出來的api.js檔案中去存取 vuex;但現在 vue3 有了useStore這個方法,我們就可以單純寫 js 就好囉!

閱讀更多

vue3 transition 動畫 css class name 改了!

把舊的 vue2 的 animation 的 class 名稱直接沿用到 vue3 專案,發現動畫怎跑不起來,原來是原本的 xxx-enter 改成 xxx-enter-from 了。

閱讀更多

在vue專案中不發佈上npm,直接引入另一個本地專案的檔案

看標題好像很難懂我到底想幹嘛,搞這麼麻煩幹什麼XD

因為公司的業務是有一套遊戲是用vue做的,然後幫客戶架設這個遊戲在他們的主機,換上 logo 和網址,就可以營業了。有點類似經銷我們的遊戲給客戶營業。

因為遊戲內容都一樣,我不可能遊戲更新後,我再去所有客戶那邊把程式碼再全部貼上一次。

可是我又不想把主程式用npm publish推上去給人家下載,我只是公司自己要用而已。

期望是有一個主遊戲程式,定期維護更新,然後有新客戶就新增一個空白專案,裡面放logo圖檔和網址的環境變數,再下載主遊戲程式的最新版本;這樣遊戲有調整,其他客戶只要更新到最新版本就可以了。

閱讀更多