在這篇文章中，我們將討論如何在 Vue 應用中使用路由、GitHub Pages 部署以及狀態管理工具 Pinia。這些概念在開發上通常會使用到，讓我們一步一步深入這些重要的概念！
1. 使用 Vue Router 跳轉頁面
在 Vue 應用中，使用 this.$router.push() 方法可以方便地實現頁面跳轉。這是一個簡單而有效的方法。
範例程式
// 使用 Vue Router 跳轉到 /result 頁面
this.$router.push('/result');
這樣就能夠將用戶導向 result 頁面，讓導航變得無比快速。
2. 獲取當前頁面名稱
若你想獲取當前頁面的名稱，可以使用 $route.name。這對於條件渲染或邏輯判斷非常有用喔。
範例程式
// 獲取當前頁面的名稱
const currentPageName = this.$route.name;
console.log(`當前頁面名稱是: ${currentPageName}`);
這樣可以方便地在控制臺查看當前頁面的名稱。
3. 靜態網站的 Vue 部署
當你完成了 Vue 應用的開發，接下來就是部署了。我們將使用 Vite 來部署靜態網站。
設置 Vite 配置
在你的 Vite 配置文件中（例如 vite.config.js），你需要指定 base 路徑，以確保靜態資源能夠正確載入。
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// Vite 配置
export default defineConfig({
base: '/vue-build/', // 設置基本路徑
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
});
這裡的 base 設置讓你在 GitHub Pages 部署時能夠正確解析靜態資源。
GitHub Actions 自動化部署
- github切換為Github Actions
- 選擇Static HTML的Configure按鈕
- 替換程式碼
- commit之後即可
code替換
vite替換code網址 https://vitejs.dev/guide/static-deploy
使用 GitHub Actions，可以輕鬆地自動部署你的靜態網站。以下是需要替換的程式，應該以官方網站的為主。
name: Deploy static content to Pages
on:
push:
branches: ['main'] # 監聽 main 分支的推送
workflow_dispatch: # 手動觸發工作流
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build project
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './dist' # 指定構建輸出目錄
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
這樣的配置可以幫助你在推送到 main 分支時自動部署最新的程式。
4. 使用 Pinia 進行狀態管理
Pinia 是 Vue 3 的一個輕量級狀態管理工具，非常適合用於中大型應用的狀態管理。
定義 Pinia Store
首先，我們來定義一個購物車的 store：
import { defineStore } from 'pinia';
export const useShoppingCartStore = defineStore('shopping-cart', {
state: () => ({
cartData: {
products: [
{ id: '0877', name: '紅茶', price: 300, count: 1 },
{ id: '0878', name: '綠茶', price: 400, count: 1 },
{ id: '0879', name: '花茶', price: 500, count: 1 },
],
userData: {
name: '',
phone: '',
email: '',
city: '',
postalCode: '',
address: '',
},
},
}),
getters: {
totalPrice() {
// 計算總價格
return this.cartData.products.reduce((acc, item) => acc + item.price * item.count, 0);
},
},
actions: {
addCart(item) {
this.cartData.products.push(item); // 將商品加入購物車
},
reset() {
this.$reset(); // 重置購物車
},
},
});
在這個範例中，我們創建了一個購物車的 store，包含了商品資料和用戶資料，並且實現了計算總價和添加商品的功能。
在組件中使用 Pinia
現在讓我們看看如何在組件中使用這個 store：
import { RouterLink } from 'vue-router';
import { useShoppingCartStore } from '@/stores/shopping-cart.js';
export default {
setup() {
const shoppingCartStore = useShoppingCartStore(); // 使用購物車 store
return { shoppingCartStore };
},
methods: {
setData() {
this.$router.push('/step-2'); // 跳轉到步驟二
},
},
};
在這裡，我們通過 useShoppingCartStore 方法來訪問購物車的狀態，並能夠使用其方法和屬性來進行操作。
結論
在這篇文章中，我們涵蓋了 Vue 應用中的幾個重要主題，包括路由管理、靜態網站部署和狀態管理。這些知識對於開發和部署現代化的 Web 應用至關重要。希望這篇文章能對你的開發過程有所幫助！
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
提醒，文章僅供正當的知識參考，文章不負任何責任。
