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

一、前言

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

二、前置工具安装

安装 Node.js

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

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

bash 复制代码

node -v
npm -v

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

npm 换国内镜像（解决下载慢）

bash 复制代码

npm config set registry https://registry.npmmirror.com
# 查看镜像是否生效
npm config get registry

三、Vite 创建 Vue3 项目（官方推荐，比 vue-cli 快）

Vite 是 Vue 官方新一代构建工具，启动、热更新速度远超旧版 webpack。

终端执行创建命令：

bash 复制代码

# 创建项目，项目名自定义 vue3-demo
npm create vite@latest vue3-demo -- --template vue
# 进入项目文件夹
cd vue3-demo
# 安装依赖
npm install
# 启动本地开发服务器
npm run dev

四、目录结构极简讲解（新手只看核心文件）

bash 复制代码

vue3-demo/
├── src/
│   ├── App.vue       # 根组件，页面主入口
│   └── main.js       # 项目入口文件，挂载Vue实例
├── index.html        # 唯一html模板
└── vite.config.js    # vite配置文件

main.js 代码解析（Vue3 核心挂载逻辑）

bash 复制代码

// 引入createApp创建应用实例
import { createApp } from 'vue'
// 引入根组件
import App 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（样式）

bash 复制代码

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