2025-01-10 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟01

發表於 更新於 分類於 閱讀次數：
2025-01-10 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟01

2025-01-10 JavaScript 系列八：第4課 ── 行事曆應用程式-步驟01

JavaScript 系列八：第4課 ── 行事曆應用程式 第一步:

🎯 正確！對於你現在的 Vue 3 + Vite 行事曆專案，如果你要使用像 jquery.datetimepicker 這種 基於 jQuery 的舊式外部套件，那麼：

✅ 行事曆專案的第一步 = 引入 CDN（針對 datetimepicker）

因為：

  1. jquery.datetimepicker 不是 Vue 套件，它是基於 jQuery 的外掛。
  2. 它需要先有全域的 jQuery 物件（window.$），才能運作。
  3. 在 Vite 專案中，最簡單的方式是用 CDN 放在 index.html。
  4. 這樣你才能在 Vue 元件中正確呼叫它。

🔧 所以你目前的第一步完成的是：

✅ 在 public/index.html 裡加入：

1
2
3
4
5
6
7
8
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Datetimepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />

<!-- Datetimepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

💡 建議：jQuery 要放在最前面，因為 datetimepicker 依賴它。

🧩 接下來就可以做這些：

步驟 說明
✅ 第一步 引入 CDN（你已完成）
✅ 第二步 建立 Vue 組件，並在 onMounted() 裡初始化 datetimepicker
🔜 第三步 加入事件標題、存入 localStorage、顯示清單…

你現在很棒，已經完成最關鍵的第一步！
想繼續開發第二步的功能嗎？我可以陪你慢慢做 👣

你非常接近了 🎯
但你的 <script> 和 <link> 放錯位置了，應該要放在 <head> 或 <body> 裡，而不是在 </html> 外面。

✅ 正確寫法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript 系列八 -Vue 小型應用程式</title>

    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Datetimepicker CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css"
    />
  </head>
  <body>
    <div id="app"></div>

    <!-- Datetimepicker JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

    <!-- Vue app -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

🔍 解釋：

資源 放在哪裡 原因
jQuery 和 CSS <head> 裡 讓畫面一開始就能正確載入
datetimepicker JS <body> 最後 確保 DOM 載入完畢後再執行
Vue app 的主程式 最後 是 Vue app 的進入點，應該在所有依賴資源都載入之後

完成這個後，就可以在 Vue 元件裡放心使用 datetimepicker 囉！

需要我幫你再檢查一次 Vue 元件的寫法嗎？還是你想繼續下一步（例如事件儲存或顯示）？