2024-11-30 利用 replit 寫一個 Vue專案，但裡面會包含多個不同程式功能

發表於 更新於 分類於 閱讀次數：
2024-11-30 利用 replit 寫一個 Vue專案，但裡面會包含多個不同程式功能

2024-11-30 利用 replit 寫一個 Vue專案，但裡面會包含多個不同程式功能

為了在 Replit 上建立一個包含多個應用功能的 Vue.js 專案，可以將每個應用規劃為一個獨立的 Vue 組件，並整合到一個主 Vue 專案中。以下是詳細的規劃建議：

1. 初始化 Vue 專案

  • 在 Replit 中建立一個新的 Vue.js 專案，並安裝 Vue CLI（若還沒安裝的話）。
  • 在主專案目錄下建立 src 目錄，用於存放應用的所有組件和功能。

2. 建立不同的應用組件

  • 在 src/components 目錄中，為每個應用建立一個 Vue 組件。例如：
    • Stopwatch.vue：碼表應用程式
    • SplitBill.vue：分帳應用程式
    • Calendar.vue：行事曆應用程式
    • WeatherQuery.vue：天氣查詢應用程式
    • CountryInfo.vue：國家資訊與地圖應用程式
  • 每個組件專注於特定功能，包含其獨立的 HTML 模板、JavaScript 邏輯和 CSS 樣式。

3. 設定 Vue 路由

  • 使用 vue-router 來配置每個組件的路由，讓用戶可以通過 URL 瀏覽不同應用。例如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    import Vue from 'vue';
    import Router from 'vue-router';
    import Stopwatch from './components/Stopwatch.vue';
    import SplitBill from './components/SplitBill.vue';
    import Calendar from './components/Calendar.vue';
    import WeatherQuery from './components/WeatherQuery.vue';
    import CountryInfo from './components/CountryInfo.vue';

    Vue.use(Router);

    export default new Router({
      routes: [
        { path: '/', component: Stopwatch },
        { path: '/stopwatch', component: Stopwatch },
        { path: '/splitbill', component: SplitBill },
        { path: '/calendar', component: Calendar },
        { path: '/weather', component: WeatherQuery },
        { path: '/countryinfo', component: CountryInfo },
      ]
    });

4. 設置主應用入口

  • 在 App.vue 中建立一個導航欄，讓使用者可以輕鬆地從一個應用跳轉到另一個應用。你可以使用 router-link 組件來建立導航按鈕。
  • 例如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <template>
      <div id="app">
        <nav>
          <router-link to="/stopwatch">碼表應用程式</router-link>
          <router-link to="/splitbill">分帳應用程式</router-link>
          <router-link to="/calendar">行事曆應用程式</router-link>
          <router-link to="/weather">天氣查詢應用程式</router-link>
          <router-link to="/countryinfo">國家資訊與地圖應用程式</router-link>
        </nav>
        <router-view></router-view>
      </div>
    </template>

5. 撰寫各組件的功能邏輯

  • 每個應用程式組件內都會包含其特定的 JavaScript 代碼。例如：
    • Stopwatch.vue：計時邏輯
    • WeatherQuery.vue：調用天氣 API 進行查詢
    • CountryInfo.vue：調用地圖 API 顯示國家資訊

6. 測試與調整

  • 每個功能建立後，在 Replit 頁面上測試，確認各個應用都能正確顯示和切換。

7. 部屬到 Replit 的靜態伺服器

  • 確保 .replit 設定檔配置正確，並將 dist 資料夾作為靜態文件的根目錄來運行。

這樣的規劃可以讓你在 Replit 上建立一個包含多種功能的 Vue.js 應用，並確保每個應用模組化、可維護性高且易於拓展。

在 Vue 3 的 <script setup> 中配置路由，需要先確認是否正確安裝了 vue-router 並將其初始化為 Vue 應用的部分。在 Vue 3 中，應使用 createRouter 和 createWebHistory 來初始化路由器。以下是一些步驟來幫助確認路由是否正確連結到你的 App.vue：

1. 確認路由配置

確認 src/router/index.js 使用 Vue 3 的方式來創建路由：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Stopwatch from '../components/Stopwatch.vue';
import SplitBill from '../components/SplitBill.vue';
import Calendar from '../components/Calendar.vue';
import WeatherQuery from '../components/WeatherQuery.vue';
import CountryInfo from '../components/CountryInfo.vue';

const routes = [
  { path: '/', component: Stopwatch },
  { path: '/stopwatch', component: Stopwatch },
  { path: '/splitbill', component: SplitBill },
  { path: '/calendar', component: Calendar },
  { path: '/weather', component: WeatherQuery },
  { path: '/countryinfo', component: CountryInfo },
];

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

export default router;

2. 在 main.js 中導入並使用路由

在 src/main.js 中，確保使用了 createApp 並導入路由：

1
2
3
4
5
6
7
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router); // 把 router 加入應用
app.mount('#app');

3. 檢查 App.vue 的模板

確認 App.vue 使用正確的 <router-view> 和 <router-link>，你的代碼已經正確無誤，但完整應用需確認路由初始化。

4. 確認已安裝 vue-router

在專案中，確認安裝了 vue-router 版本 4（適用於 Vue 3）：

1
npm install vue-router@4

5. 重新啟動開發伺服器

確保在安裝或配置更改後，重啟你的開發伺服器來應用新的路由設定：

1
npm run serve

這樣應該可以在你的 App.vue 中正確顯示並導覽路由。