一、前言
很多前端新人分不清 Vue2 和 Vue3 区别，现在企业新项目全部主推 Vue3 + Vite，本系列从零起步，不跳过任何基础，今天第一篇先搞定本地开发环境，跑通第一个 Vue3 页面。
二、前置工具安装
- 安装 Node.js
Vue3 项目依赖 npm/yarn 包管理器，必须先装 Node。
- 下载地址：nodejs.org
- 安装完成打开终端校验版本：
node-vnpm-v要求版本 Node ≥14.18，推荐 16/18 LTS 稳定版。
- npm 换国内镜像（解决下载慢）
npmconfigsetregistry https://registry.npmmirror.com# 查看镜像是否生效npmconfig get registry三、Vite 创建 Vue3 项目（官方推荐，比 vue-cli 快）
Vite 是 Vue 官方新一代构建工具，启动、热更新速度远超旧版 webpack。
终端执行创建命令：
# 创建项目，项目名自定义 vue3-demonpmcreate vite@latest vue3-demo ----templatevue# 进入项目文件夹cdvue3-demo# 安装依赖npminstall# 启动本地开发服务器npmrun dev四、目录结构极简讲解（新手只看核心文件）
vue3-demo/ ├── src/ │ ├── App.vue# 根组件，页面主入口│ └── main.js# 项目入口文件，挂载Vue实例├── index.html# 唯一html模板└── vite.config.js# vite配置文件- main.js 代码解析（Vue3 核心挂载逻辑）
// 引入createApp创建应用实例import{createApp}from'vue'// 引入根组件importApp from'./App.vue'// 创建实例并挂载到index.html中id为app的dom节点 createApp(App).mount('#app')Vue3 抛弃了 Vue2 的 new Vue() 写法，采用 createApp 函数式 API，多个实例互不干扰。
- App.vue 单文件组件 SFC
Vue 单文件组件分为三块：template（模板）、script（逻辑）、style（样式）
<template><!-- HTML结构，只能有一个根节点 --><h1>Hello Vue3！我的第一个Vue页面</h1></template><script setup>// Vue3<script setup>语法糖，现在项目默认使用 console.log('vue3 setup 启动')</script><style scoped>/* scoped 代表样式只作用于当前组件，不会污染全局 */ h1{color:#42b983;}</style>五、运行效果
执行 npm run dev 终端会输出本地访问地址（http://127.0.0.1:5173/），打开浏览器即可看到文字，至此 Vue3 环境搭建完成。
六、今日小结
- Vue3 推荐 Vite 构建工具；
- 核心 API：createApp 创建应用；
- 单文件组件三大块template/script/style；
scoped 样式隔离避免全局污染。