Vue3 环境搭建 + 第一个 HelloVue 项目（零基础入门）

一、前言

很多前端新人分不清 Vue2 和 Vue3 区别，现在企业新项目全部主推 Vue3 + Vite，本系列从零起步，不跳过任何基础，今天第一篇先搞定本地开发环境，跑通第一个 Vue3 页面。

二、前置工具安装

1. 安装 Node.js

Vue3 项目依赖 npm/yarn 包管理器，必须先装 Node。

• 下载地址：nodejs.org
• 安装完成打开终端校验版本：

node-vnpm-v

要求版本 Node ≥14.18，推荐 16/18 LTS 稳定版。

2. 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配置文件

1. 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，多个实例互不干扰。

2. 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 样式隔离避免全局污染。