Vue 3 基本教程 - 运行一个最小 Demo

1. 创建项目

使用 Vue 官方脚手架工具创建一个新项目：

# 安装 Vue CLI (如果尚未安装)
npm install -g @vue/cli

# 创建一个新项目
vue create vue3-demo

# 选择 Vue 3 预设
# 使用方向键选择 "Default (Vue 3)" 然后按 Enter

或者使用 Vite（更快的开发工具）：

# 使用 Vite 创建项目
npm create vite@latest vue3-demo -- --template vue

# 进入项目目录
cd vue3-demo

2. 项目结构

基本项目结构如下：

vue3-demo/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue         # 主组件
│   └── main.js         # 入口文件
├── package.json
└── vite.config.js (或 vue.config.js)

3. 修改 App.vue

打开 src/App.vue 文件，将其修改为一个简单的计数器应用：

<template>
  <div class="container">
    <h1>Vue 3 最小 Demo</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 使用 ref 创建响应式状态
const count = ref(0)

// 方法
function increment() {
  count.value++
}

function decrement() {
  count.value--
}
</script>

<style scoped>
.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: Arial, sans-serif;
}

button {
  margin: 0 5px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>

4. 运行项目

安装依赖并启动开发服务器：

# 安装依赖
npm install

# 启动开发服务器
npm run dev

启动后，在浏览器中打开显示的地址（通常是 http://localhost:5173 或 http://localhost:8080）

5. 代码解释

• script setup: Vue 3 的 Composition API 语法糖，简化了组件的编写
• ref(0): 创建一个值为 0 的响应式引用，当它变化时会自动更新视图
• count.value: 访问或修改 ref 的值需要使用 .value 属性
• @click: Vue 的事件绑定语法，点击按钮时调用对应的方法
• {{ count }}: 模板中的插值表达式，显示响应式变量的值

6. 添加一个新组件

创建 src/components/HelloWorld.vue 文件：

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </div>
</template>

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<style scoped>
.hello {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  margin-top: 20px;
}
</style>

修改 App.vue 以使用新组件：

<template>
  <div class="container">
    <h1>Vue 3 最小 Demo</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    
    <HelloWorld msg="这是一个子组件" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

// 使用 ref 创建响应式状态
const count = ref(0)

// 方法
function increment() {
  count.value++
}

function decrement() {
  count.value--
}
</script>

<!-- 样式部分保持不变 -->

7. 总结

这个最小 Demo 展示了 Vue 3 的基本功能：

• 响应式状态管理（使用 ref）
• 事件处理
• 组件创建和使用
• prop 传递

Vue 3 的 Composition API 和 script setup 语法使代码更简洁、更易于组织和重用。