当前位置：首页 > news >正文

vue3 基本教程-运行一个最小demo

news 2025/9/16 5:51:13

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><!-- 样式部分保持不变 -->