參考來源:

https://nicepage.com/templates/preview/web-design-studio-of-art-72065?device=desktop

目錄結構

lasttemplate_HW_12/

• ├── src/
• │ ├── assets/
• │ │ └── section1/
• │ │ └── apple.jpeg
• │ │ └── section2/
• │ │ └── black.jpeg
• │ │ └── section3/
• │ │ └── swimming.jpeg
• │ │ └── section7/
• │ │ └── fingerprint.png
• │ │ └── istock03.jpeg
• │ │ └── istock06.jpeg
• │ │ └── zebra.jpeg
• │ ├── components/
• │ │ └──AboutStudio01.vue
• │ │ └── AboutStudio02.vue
• │ │ └──AboutStudio03.vue
• │ │ └──AppCarousel.vue
• │ │ └── AppFooter.vue
• │ │ └──ApplicationBar.vue
• │ ├── layouts/
• │ │ └──default.vue
• │ ├── App.vue
• │ └── main.js
• ├── .gitignore
• ├── README.md
• └── package.json

功能

• 使用 Vuetify 提供的 UI 元素和佈局
• 使用 Swiper 實現輪播圖效果
• 使用 AOS 增強滾動動畫效果

安裝

• npm create vuetify@latest
• npm i swiper
• npm i aos

運行開發伺服器

• npm run dev
• 開發伺服器啟動後，打開瀏覽器並訪問 http://localhost:3000 來查看項目。

使用到的主要技術

• Vue.js: 用於構建用戶界面的前端框架
• Vuetify: 基於 Material Design 的 Vue 組件庫
• AOS: 用於滾動動畫的庫