View 資料夾 - daniel-qa/Vue GitHub Wiki

View 資料夾

在 Vue.js 項目中，src 資料夾通常包含應用的核心代碼和資源。

views 資料夾通常用來存放應用的不同視圖組件，每個視圖對應一個路由。以下是一些常見的結構和做法：

  • 資料夾結構
src/
├── assets/        # 靜態資源，如圖片、字體等
├── components/    # 可重用的 Vue 組件
├── router/        # 路由配置
├── store/         # Vuex 狀態管理
├── views/         # 應用的不同視圖組件
│   ├── Home.vue   # 首頁視圖
│   ├── About.vue  # 關於頁面
│   └── Contact.vue # 聯絡頁面
└── App.vue        # 根組件
  • 使用範例

在 views 資料夾中，你可以這樣定義一個視圖組件：

vue

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Welcome to the Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
  • 路由配置

在 router 資料夾中，你可以將這些視圖組件與路由相關聯：

javascript

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
  • 總結

views 資料夾是組織不同頁面和視圖的重要地方，將每個視圖分開有助於代碼的可維護性和可讀性。

⚠️ **GitHub.com Fallback** ⚠️