星際探索-Vue建立的SPA

Avatar of 李尹翔.
Avatar of 李尹翔.

星際探索-Vue建立的SPA

前端工程師(Frontend Engineer)
Taiwan

planets-fact

簡介

用Vue3+vite與Vue Router製作的SPA,可以透過導覽列與按鈕切換瀏覽八大行星的總覽(overview)、內部結構(internal structure)、外部地理(surface geology)等不同資訊。


連結

github: https://github.com/Li-Shang-tw/planets-fact-site

Demo : https://li-shang-tw.github.io/planets-fact-site


Build With

  • Vue3
  • vite
  • Vue Router
  • HTML
  • CSS
  • Javascript


作品定位

用Vue3製作的SPA


技術Highlight

  • 用VUE Router 的動態路由讓一個頁面元件對應多個路徑與內容
  • 由Props的形式取得路徑參數,匹配不同的內容
  • 使用new URL的方式解決vite 打包時的圖片路徑問題
  • 將頁面切割成不同的元件,並處理其中的資料傳遞
  • 用BEM規範命名CSS


用Vue3+vite與Vue Router製作的SPA,可以透過導覽列與按鈕切換瀏覽八大行星的總覽(overview)、內部結構(internal structure)、外部地理(surface geology)等不同資訊。
Avatar of the user.
Please login to comment.

Published: Sep 26th 2023
28
4
0

Tools

vuejs
Vue.js

vue

Share