Vue 應用開發(全攻略)

保持學習的工程師

發佈於網站前端相關文章

更新於 2024/12/07發佈於 2024/12/07閱讀時間約 10 分鐘

在這篇文章中，我們將討論如何在 Vue 應用中使用路由、GitHub Pages 部署以及狀態管理工具 Pinia。這些概念在開發上通常會使用到，讓我們一步一步深入這些重要的概念！

Damiano Baschiera on Unsplash

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'); // 跳轉到步驟二
    },
  },
};