冠县网站建设费用百度移动端网站
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 的构建。