search

3dw / auto20-next

auto20-next
https://we.alearn.org.tw/
MIT License
4 stars 1 forks source link

try to put Riv animation on HomeView.vue but failed .. #173

Closed leechiuhui closed 1 month ago

leechiuhui commented 1 month ago

只是測試，不急

截圖 2024-09-06 下午5 37 30

Please review the commits on HomeView.vue and /src/components/RiveComponent.vue when convenient, no rush..

leechiuhui commented 1 month ago
截圖 2024-09-06 晚上9 30 05 截圖 2024-09-06 晚上9 57 46
bestian commented 1 month ago

@leechiuhui 首頁沒問題，可是路由一切換就出bug了~ 我對rive的導入完全沒概念，不知從何修改

自學2_0
leechiuhui commented 1 month ago

喔喔，抱歉，沒測到登入後的情況。⋯，今天學校直播開課中，我要晚上才有時間將HomeView.vue恢復到原來前一日的版本。🙇‍♀️

bestian commented 1 month ago

也有可能是我把路由的模式改成History mode意外引發的，今天外出沒辦法再檢測修正了

不過不急，目前使用者端是看不出問題.

leechiuhui commented 4 weeks ago

@bestian 謝謝老師。今天仍有直播工作，無法進一步測試，但簡單記錄一下：

  1. Hash mode 和 history mode的差別？
  2. 什麼是惰性載入？
  3. 為何改成惰性載入就ok了？
  4. 之前的component: () => import(/ webpackChunkName: "about" / '../views/FriendsView.vue')已經是惰性載入了？為何之前HomeView沒有惰性載入？

  1. 參照https://help.rive.app/runtimes/overview/vue Currently, there is no official Rive "Vue"-specific runtime available, however, you can utilize the Web runtime packages in your Vue applications. Check out this example（https://github.com/Coded-Clouds/Rive_Vue_ExampleApp） from the community.

  2. 詢問ChatGPT如何做 https://chatgpt.com/c/d01d0598-a5eb-4dfa-bc8b-c22fb51a9094 改動了vue.config.js HomeView.vue 新增RiveComponent.vue 安裝 Rive SDK yarn add rive-js yarn add file-loader --dev

  3. 但不work

https://github.com/flowreaction/rive-vue https://codesandbox.io/p/sandbox/vue-rive-example-sqpbts https://morty.tw/js-4-rive https://rivevue.netlify.app/#/ https://rive.app/community/forums/feature-requests/fsyCzA4A9Yar/vue-support/ftlsNuUFUt0E Vue Support It's unusual to see a tool geared towards the web which eschews Vue support. While Vue may not be quite as popular as React, it is still widely used, and offering support (be it a simple wrapper, or something more) would go a long way for the community. It would be great to see this offered as a feature in the future.
很少看到一個面向Web的工具避開了對 Vue 的支援。雖然 Vue 可能不像 React 那樣流行，但它仍然被廣泛使用，並且提供支援（無論是簡單的包裝器，還是其他東西）對社區大有説明。如果將來能看到此功能作為一項功能提供，那就太好了。

截圖 2024-09-08 上午8 04 02
bestian commented 4 weeks ago

@leechiuhui

@bestian 謝謝老師。今天仍有直播工作，無法進一步測試，但簡單記錄一下：

  • [x] ### Question疑問:

  1. Hash mode 和 history mode的差別？

    hash mode

  2. 什麼是惰性載入？

惰性載入就是等到路由切換到某頁, 例如maps, 才會從router/index 載入maps的對應組件，這樣可以加速初始化並且避免一些問題

  1. 為何改成惰性載入就ok了？

就我所以，應該是HomeView要求有一個canvas主體來初始化Rive, 但在別的路由對應的組件並沒有一個canvas在template中，App.vue中也沒有，所以在別的路由啟動時，不要載入HomeView才對

  1. 之前的component: () => import(/ webpackChunkName: "about" / '../views/FriendsView.vue')已經是惰性載入了？為何之前HomeView沒有惰性載入？

用Vue Cli初始一個Vue專案時，它的Default是用"及早求值"的方式來載入HomeView。 這也合理，因為首頁會最先顯示，"及早求值"會快一點點

note: 可以用英文關鍵字查eager evaluation vs lazy evalution找到更多

leechiuhui commented 4 weeks ago

懂了，謝謝老師以上清楚回覆有關：何謂惰性載入和及早求值(eager evaluation vs lazy evalution)。