Vue 3 Hello World 案例Vue 3 Hello World 案例, 包含两种写法，一、CDN 版：适

Vue 3 Hello World 极简案例

两种最常用的 Hello World 写法，直接复制就能跑，零配置、零依赖。

方式1：CDN 引入（最简单，无需安装任何工具）

直接新建一个 .html 文件，复制下面代码，用浏览器打开即可运行。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Hello World</title>
  <!-- 引入 Vue3 CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <!-- 挂载点 -->
  <div id="app">{{ message }}</div>

  <script>
    // 创建 Vue 应用
    const { createApp } = Vue;

    createApp({
      // 数据
      data() {
        return {
          message: "Hello Vue 3！🎉"
        }
      }
    }).mount('#app') // 挂载到 #app 元素
  </script>
</body>
</html>

运行效果

页面会直接显示： Hello Vue 3！🎉

方式2：Vue 3 + Vite 工程化写法（标准开发模式）

适合正式项目，需要先安装 Node.js。

1. 创建项目

打开终端执行：

# 创建 vite 项目
npm create vite@latest my-vue-app -- --template vue

# 进入项目
cd my-vue-app

# 安装依赖
npm install

# 启动项目
npm run dev

2. 打开 `src/App.vue`

默认就是 Hello World 代码，精简版如下：

<template>
  <h1>{{ msg }}</h1>
</template>

<script setup>
// Vue3 组合式 API（推荐写法）
import { ref } from 'vue'
const msg = ref('Hello Vue 3！')
</script>

<style>
/* 简单样式 */
h1 {
  text-align: center;
  margin-top: 50px;
}
</style>

3. 访问

浏览器打开终端显示的地址（一般是 http://localhost:5173）即可看到效果。

知识点总结

Vue3 核心 API：createApp() 创建应用、mount() 挂载到页面元素
模板语法：{{ 变量名 }} 渲染数据
两种写法：
- CDN 版：适合学习、快速测试
- Vite 版：适合企业项目开发
<script setup>：Vue3 官方推荐的简洁语法糖

Vue 3 Hello World 案例