从零开始创建 Vue 3 开发环境并构建第一个 Demo

Vue 3 是目前前端开发中非常流行的渐进式 JavaScript 框架。本文将手把手带你完成从环境搭建到运行一个基础 Vue 3 示例的全过程。

📦 一、环境准备

1. 安装 Node.js

Vue 项目依赖 Node.js 运行环境，请确保你的电脑已安装 Node.js（建议使用稳定版本 LTS）。

node -v
npm -v
npm install --global yarn

如果没有安装，请前往官网下载并安装。

2. 安装 Vue CLI（可选）

虽然推荐使用 Vite 创建 Vue 3 项目，但也可以使用 Vue CLI：

npm install -g @vue/cli
# 或
yarn global add @vue/cli
vue --version

⚡ 二、使用 Vite 快速搭建 Vue 3 项目

Vite 是 Vue 官方推荐的新一代前端构建工具，极快的冷启动和热更新体验。

1. 创建项目

npm create vite@latest vue3-demo
# 选择 vue 模板（选择 vue）
# 或指定模板：
npm create vite@latest vue3-demo --template vue

进入项目目录：

cd vue3-demo

2. 安装依赖

npm install

🧪 三、运行项目

启动开发服务器：

npm run dev

浏览器访问：http://localhost:5173

✍ 四、编写第一个 Vue 组件 Demo

1. 修改 App.vue

<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <Counter />
  </div>
</template>

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

const title = ref('👋 Hello Vue 3 + Vite')
</script>

<style scoped>
.app {
  text-align: center;
  padding: 2rem;
}
</style>

2. 创建组件 components/Counter.vue

<template>
  <div>
    <h2>计数器：{{ count }}</h2>
    <button @click="count++">点击+1</button>
  </div>
</template>

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

const count = ref(0)
</script>

<style scoped>
button {
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  font-size: 16px;
}
</style>

🧰 五、项目结构说明

vue3-demo/
├── public/           # 公共资源
├── src/
│   ├── assets/       # 图片、样式资源
│   ├── components/   # 组件目录
│   │   └── Counter.vue
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── index.html        # 模板页面
├── vite.config.js    # Vite 配置文件
├── package.json      # 项目依赖和命令

✅ 六、常用命令

npm run dev      # 启动开发服务器
npm run build    # 构建生产版本
npm run preview  # 本地预览生产版本

🎯 七、结语

至此，你已经完成了 Vue 3 + Vite 项目的环境搭建与一个简单组件 demo 的构建。