快速入門

學習目標

1. 學會創建 Vue 應用程序
2. 了解使用 CDN 引入 Vue 的方法
3. 掌握全局構建和 ES 模塊構建的區別
4. 能夠進行簡單的 Vue 開發

教學錄影-1教學錄影-2

創建 Vue 應用程序

前置條件

• 熟悉命令行操作
• 安裝 Node.js 18.3 或更高版本

步驟

1. 在命令行中執行以下命令：

npm create vue@latest

2. 按照提示選擇項目配置
3. 進入項目目錄並安裝依賴：

cd <your-project-name>
npm install
npm run dev

使用 CDN 引入 Vue

全局構建方式

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: "Hello Vue!",
      }
    },
  }).mount("#app")
</script>

ES 模塊構建方式

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"

  createApp({
    data() {
      return {
        message: "Hello Vue!",
      }
    },
  }).mount("#app")
</script>

實際操作練習

練習 1：創建本地 Vue 項目

1. 使用 create-vue 創建新項目
2. 啟動開發服務器
3. 修改默認組件顯示自定義內容

練習 2：CDN 快速體驗

1. 創建 HTML 文件使用 CDN 引入 Vue
2. 實現一個簡單的計數器功能
3. 比較全局構建和 ES 模塊構建的差異

練習 3：模塊拆分

1. 將組件邏輯拆分到單獨的 JS 文件
2. 使用本地 HTTP 服務器測試

補充資源

• Vue 官方文檔
• Vue Playground
• Vite 文檔