🔥Vue3从入门到入土！零基础小白也能3小时上手，看完直接写项目！
大家好，我是小特同学！今天咱就来唠唠前端界的"顶流"——Vue3！我跟你说啊，现在前端找工作，你要是不会Vue3，那基本就等于没学过前端！面试官上来第一句就是："Vue3用过吗？Composition API会写吗？"
很多同学一听到框架就头大，觉得这玩意儿肯定特别难，特别复杂。我告诉你啊，完全不是那么回事！Vue3是我见过最友好、最容易上手的前端框架，没有之一！今天我就用大白话给你讲明白，保证你听完就能写代码，看完就能做项目！
📚 文章目录
- 一、Vue3到底是个啥？为啥现在人人都在用它？
- 二、手把手教你创建Vue3工程，两种方式任你选！
- 三、项目结构大揭秘，每个文件干啥的一次说清！
- 四、VS Code必备插件，开发效率直接翻倍！
- 五、第一个Vue程序，5分钟跑起来！
- 六、Vue3调试神器DevTools，找bug再也不头疼！
- 七、组合式API核心——setup函数，学会这个Vue3就会一半了！
- 八、干货总结+避坑指南
一、Vue3到底是个啥？为啥现在人人都在用它？
1.1 Vue3基本介绍
首先啊，Vue3是啥？它就是一个用来做网页界面的JavaScript框架，由咱们华人程序员尤雨溪大佬开发的！你看人家多厉害，一个人写的框架现在全世界都在用！
Vue3是2020年9月18号正式发布的，代号"One Piece"，也就是海贼王！你听听这名字，就知道它有多牛了！为了做这个版本，尤大大和他的团队整整干了两年多，提交了4800多次代码，讨论了40多个设计方案，有300多个开发者参与贡献，这才打磨出这么一个完美的版本！
截止到2025年7月，Vue3的最新稳定版本是3.5.17。你想知道现在最新版本是啥吗？很简单，打开命令行输入：
npm show vue version
它就会告诉你最新版本号了！
官方网站给你放这了，收藏好，以后天天都要用：
- 英文官网：https://vuejs.org/
- 中文官网：https://cn.vuejs.org/
- 源码地址：https://github.com/vuejs/core
1.2 Vue3的核心优势
那Vue3到底好在哪呢？为啥大家都从Vue2升级到Vue3了？我给你总结成三句话：更快、更小、更好用！
🚀 性能爆炸式提升
- 初次渲染速度快了55%
- 更新渲染速度快了133%
- 打包体积小了41%
- 内存占用少了54%
这是什么概念？就好比你原来用的是自行车，现在直接换成了跑车！原来打开一个页面要等3秒，现在1秒就出来了；原来打包出来的文件有10MB，现在只有6MB，用户打开速度快多了！
🧩 组合式API（Composition API）
这是Vue3最大的亮点！也是我今天要重点讲的内容。原来Vue2用的是选项式API，就像把代码按"数据"、"方法"、"生命周期"这些类别分开放，一个功能的代码散得到处都是。
而组合式API呢，就像把同一个功能的代码都放在一起，逻辑特别清晰！而且复用起来特别方便，还对TypeScript有完美的支持。现在官方已经明确说了，新项目强烈推荐使用组合式API，选项式API已经不推荐了！
1.3 Vue3的新特性
Vue3还加了很多特别实用的新特性，我给你挑几个最重要的说说：
✨ Teleport（传送门）
这个太好用了！它可以把一个组件渲染到页面的任何位置。比如你做一个弹窗，原来总是会被父元素的z-index或者overflow属性影响，导致弹窗显示不出来或者被挡住。有了Teleport，你直接把弹窗"传送"到body标签下面，什么问题都解决了！
✨ Fragments（碎片）
Vue2的时候，每个组件的模板只能有一个根节点，你必须在外面包一个没用的div。Vue3就没有这个限制了！你想写几个根节点就写几个，再也不用写那些多余的div了！
✨ Suspense（悬念）
这个是用来处理异步加载的。比如你从后端请求数据，在数据回来之前，页面会显示一个加载中的动画。原来你得自己写很多判断逻辑，现在用Suspense，一行代码就搞定了！
✨ 自定义渲染器
这个就更厉害了！它允许你把Vue渲染到任何地方，不只是浏览器的DOM。比如你可以用Vue写小程序、写Canvas游戏、甚至写终端应用！
1.4 底层核心优化
Vue3之所以这么快，是因为它从底层做了三大优化：
🔧 Proxy响应式系统
Vue2用的是Object.defineProperty，这个东西有很多缺点，比如不能监听数组的变化，不能监听新增的属性。Vue3换成了ES6的Proxy，完美解决了这些问题！不管你是新增属性、删除属性，还是修改数组的索引，它都能监听到！
🔧 虚拟DOM重写
Vue3重写了整个虚拟DOM，引入了静态节点提升和动态标记技术。简单来说就是，它能区分哪些节点是永远不会变的，哪些是会变的。更新的时候，只更新那些会变的节点，速度自然就快了！
🔧 Tree-Shaking支持
这个是什么意思呢？就是说，你没用到的功能，打包的时候会自动被删掉。比如你没用到v-model的修饰符，那这部分代码就不会出现在最终的打包文件里，体积自然就小了！
1.5 生态与工具
Vue3的生态现在已经非常成熟了：
- Vite：官方推荐的构建工具，也是尤大大写的，速度比webpack快10倍！
- Pinia：官方推荐的状态管理库，替代了原来的Vuex，API更简洁，更好用。
- TypeScript：Vue3本身就是用TypeScript写的，对TS有完美的支持。
1.6 兼容性
Vue3支持所有现代浏览器，IE11及以下版本不支持。如果你必须兼容IE11，可以用polyfill，但我还是建议你直接放弃IE11，现在谁还用那玩意儿啊！
如果你有Vue2的老项目想升级到Vue3，官方提供了一个迁移构建工具@vue/compat，可以帮你平滑升级。
二、手把手教你创建Vue3工程，两种方式任你选！
好了，理论讲完了，现在咱们开始动手写代码！创建Vue3工程有两种方式：一种是老的vue-cli方式，另一种是官方推荐的Vite方式。
2.1 基于vue-cli创建（不推荐）
vue-cli底层是基于webpack的，速度比较慢，现在已经不推荐了。但如果你非要用这种方式，我也简单说一下步骤：
首先检查你的Node.js版本，必须大于等于14.0.0：
node -v # 检查Node.js版本
npm -v # 检查npm版本
然后全局安装vue-cli：
npm install -g @vue/cli
安装完成后检查版本：
vue --version # 必须大于等于4.5.0
然后创建项目：
vue create my-vue3-project
然后按照提示选择配置，一定要选择Vue 3版本！最后进入项目目录启动服务：
cd my-vue3-project
npm run serve
项目就会运行在http://localhost:8080。
2.2 基于Vite创建（官方强烈推荐！）
重点来了！现在创建Vue3项目，100%要用Vite！谁用谁知道，那速度，简直了！
2.2.1 Vite到底是个啥？
Vite也是尤雨溪写的，是新一代的前端构建工具。那它和webpack有啥区别呢？我给你打个比方：
- webpack：就像一个提前做好所有菜的餐厅。顾客来之前，厨师把所有菜都做好了，顾客来了直接上菜。优点是上菜快，缺点是准备时间特别长，尤其是菜多的时候。
- Vite：就像一个现点现做的火锅店。先把锅底（基础环境）给你端上来，你点什么菜（模块），厨师就给你煮什么菜。没点的菜，厨师根本不用管。
所以Vite的启动速度特别快，不管你的项目有多大，它都能在1秒内启动！而且热更新也特别快，你改完代码，页面瞬间就刷新了！
2.2.2 环境准备
首先检查你的Node.js版本，必须大于等于16.0.0：
node -v
npm -v
国内的同学，一定要先配置淘宝镜像，不然下载速度会慢到你怀疑人生：
npm config set registry https://registry.npmmirror.com
2.2.3 创建项目
现在开始创建项目，就一行命令：
npm create vite@6.5.0
然后它会问你项目名，输入hello_vue3，回车。
然后让你选择框架，用方向键选Vue，回车。
然后让你选择变体，选TypeScript，回车。
搞定！项目就创建好了！
2.2.4 安装依赖并启动
进入项目目录：
cd hello_vue3
安装依赖：
npm install
# 简写：npm i
这个命令就相当于后端的mvn install，它会下载项目所有需要的依赖包，放到node_modules目录里。
然后启动开发服务器：
npm run dev
看到这个输出就说明启动成功了：
VITE v6.5.0 ready in 300 ms➜ Local: http://localhost:5173/➜ Network: use --host to expose➜ press h to show help
打开浏览器访问http://localhost:5173，你就能看到Vue3的欢迎页面了！
按Ctrl + C可以终止服务器。
当你项目写完了，要部署到服务器上的时候，运行：
npm run build
它会把项目打包成静态文件，放到dist目录里，你把这个目录上传到服务器就行了。
三、项目结构大揭秘，每个文件干啥的一次说清！
现在用VS Code打开这个项目，你会看到这样的目录结构：
hello_vue3/
├── .vscode/ # VS Code编辑器配置
├── dist/ # 生产环境构建输出目录
├── node_modules/ # 项目依赖的npm包
├── public/ # 静态资源（不会被构建处理）
└── src/ # 源代码目录（这是你主要工作的地方）├── App.vue # Vue根组件├── assets/ # 图片、字体等静态资源（会被构建处理）├── components/ # 可复用的Vue组件├── main.ts # 应用入口文件├── style.css # 全局样式文件└── vite-env.d.ts # Vite环境变量类型声明
├── .gitignore # Git忽略文件
├── index.html # 主HTML文件（应用入口）
├── package.json # 项目配置和依赖管理
├── package-lock.json # 锁定依赖版本
├── README.md # 项目说明文档
├── tsconfig.app.json # 应用相关的TypeScript配置
├── tsconfig.json # 主TypeScript配置文件
├── tsconfig.node.json # Node.js相关的TypeScript配置
└── vite.config.ts # Vite构建工具配置
我给你挑几个最重要的文件说说：
- index.html：这是整个应用的入口HTML文件。你看它里面有一个
<div id="app"></div>，Vue最终渲染的所有内容都会放到这个div里面。还有一个<script type="module" src="/src/main.ts"></script>，它引入了main.ts文件。 - main.ts：这是Vue应用的入口文件。它的作用就是创建Vue应用实例，然后挂载到index.html里的那个div上。
- App.vue：这是根组件。所有其他组件都是它的子组件。
- vite.config.ts：这是Vite的配置文件。你可以在这里配置插件、代理、打包选项等等。
- package.json：这是项目的配置文件。它记录了项目的名称、版本、依赖包、脚本命令等等。
四、VS Code必备插件，开发效率直接翻倍！
用VS Code写Vue3代码，有几个插件是必须安装的，不然你写代码会特别痛苦。
4.1 Vue.volar（必装！）
这个是官方推荐的Vue3开发插件。当你用VS Code打开Vue3项目的时候，右下角会自动提示你安装这个插件，直接点安装就行了。
安装这个插件之后，你会获得以下能力：
- ✅ .vue文件语法高亮
- ✅ TypeScript类型检查
- ✅ 智能代码提示
- ✅ 模板表达式类型推导
- ✅ 快速跳转定义
没有这个插件，你写Vue3代码就跟写记事本一样，啥提示都没有！
4.2 Material Icon Theme（可选）
这个是图标主题插件。安装之后，VS Code里的文件和文件夹都会显示对应的图标，看起来特别舒服，找文件也方便。
五、第一个Vue程序，5分钟跑起来！
好了，现在咱们来写第一个Vue程序！为了看得清楚，咱们先把src目录下的所有内容都删掉，然后从头开始写。
5.1 第一步：分析入口
首先，index.html是入口，它的内容是这样的：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue + TS</title></head><body><!-- Vue渲染的内容会放到这个div里 --><div id="app"></div><!-- 引入main.ts --><script type="module" src="/src/main.ts"></script></body>
</html>
所以我们要从main.ts开始写。
5.2 第二步：编写main.ts
在src目录下新建main.ts文件，写入以下代码：
// 从vue包中导入createApp函数
// 这个函数的作用就是创建一个Vue应用实例
import { createApp } from 'vue';// 导入根组件App
// 这个App组件我们马上就写
import App from './App.vue';// 创建应用实例，把根组件传进去
// 然后调用mount方法，把应用挂载到id为app的div上
createApp(App).mount('#app');
5.3 第三步：编写App.vue
在src目录下新建App.vue文件，写入以下代码：
<!-- 模板部分：写HTML结构 -->
<template><div class="hello"><h1>hello vue3!</h1></div>
</template><!-- 脚本部分：写JavaScript/TypeScript代码 -->
<script>// 导出这个组件export default {// 组件的名字，主要用于在开发者工具中显示name: 'MyApp'}
</script><!-- 样式部分：写CSS -->
<!-- scoped表示这个样式只对当前组件有效，不会影响其他组件 -->
<style scoped>.hello {/* 设置背景颜色为浅青色 */background-color: #b5f0ee;/* 添加阴影效果 */box-shadow: 0 0 15px;/* 设置圆角 */border-radius: 15px;/* 设置内边距 */padding: 15px;}
</style>
5.4 第四步：启动服务器测试
现在运行：
npm run dev
打开浏览器访问http://localhost:5173，你就能看到"hello vue3!"了！恭喜你，你的第一个Vue程序跑起来了！
六、Vue3调试神器DevTools，找bug再也不头疼！
写代码怎么可能没有bug呢？有了bug怎么办？别慌，Vue官方给我们提供了一个超级好用的调试工具——Vue.js Devtools！
6.1 安装DevTools
因为谷歌应用商店国内访问不了，所以我们用极简插件网站来下载：
- 打开极简插件官网：https://chrome.zzzmh.cn/
- 搜索"vue"，找到"Vue.js devtools"并下载压缩包
- 打开Chrome浏览器，点击右上角三个点 -> 扩展程序 -> 管理扩展程序
- 打开右上角的"开发者模式"开关
- 把下载的压缩包解压，然后把里面的crx文件拖到扩展程序页面
- 点击"添加扩展程序"，安装成功！
如果你的Win11系统不支持拖动安装，那就用7zip把crx文件解压，然后点击"加载已解压的扩展程序"，选择解压后的目录就行了。
6.2 使用DevTools
安装成功后，重启Chrome浏览器，按F12打开开发者工具，你会看到多了一个"Vue"选项卡。点击它，你就能看到你的Vue组件树了，还能查看和修改组件的状态，特别方便！
七、组合式API核心——setup函数，学会这个Vue3就会一半了！
现在咱们来学习Vue3最重要的东西——setup函数！可以这么说，学会了setup函数，Vue3你就会一半了！
7.1 setup函数基本用法
setup是组合式API的核心入口函数，几乎所有组合式API都要写在这个函数里面。它在组件初始化的时候最先执行，集中管理所有组件逻辑。
我们来写一个例子：实现一个页面，显示用户名，点击按钮显示联系方式。
首先在src目录下新建components目录，然后在里面新建Person.vue文件：
<template><div class="person"><!-- 插值语法：用{{}}把变量包起来，就能在页面上显示了 --><h2>姓名：{{ name }}</h2><!-- 绑定点击事件：用@click，后面跟要执行的方法名 --><button @click="showTel">查看联系方式</button></div>
</template><!-- 写TypeScript代码要加lang="ts" -->
<script lang="ts">export default {name: 'Person',// setup函数，所有逻辑都写在这里setup() {// 定义数据let name = '张三';let tel = '13000000000';// 定义方法function showTel(): void {// 弹出提示框显示手机号alert(`手机号：${tel}`);}// 非常重要！setup函数必须返回一个对象// 这个对象里的所有数据和方法，模板都能访问到return { name, showTel };}}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 15px;border-radius: 15px;padding: 15px;}
</style>
然后修改App.vue，使用这个Person组件：
<template><div class="hello"><h1>hello vue3!</h1><!-- 使用Person组件 --><Person></Person></div>
</template><style scoped>.hello {background-color: #b5f0ee;box-shadow: 0 0 15px;border-radius: 15px;padding: 15px;}
</style><script lang="ts">// 第一步：导入Person组件import Person from './components/Person.vue';export default {name: 'MyApp',// 第二步：注册组件components: { Person }}
</script>
现在启动服务器，你就能看到效果了！点击"查看联系方式"按钮，会弹出一个提示框显示手机号。
7.2 setup语法糖
你看，每次都要写setup函数，还要return一堆东西，是不是有点麻烦？Vue3给我们提供了一个语法糖，让代码变得更简洁！
把Person.vue改成这样：
<template><div class="person"><h2>姓名：{{ name }}</h2><button @click="showTel">查看联系方式</button></div>
</template><!-- 只要在script标签上加setup就行了！ -->
<script lang="ts" setup>// 直接定义数据，不用写setup函数了let name = '张三';let tel = '13000000000';// 直接定义方法function showTel() {alert(`手机号：${tel}`);}// 不用return了！所有定义的数据和方法自动暴露给模板
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 15px;border-radius: 15px;padding: 15px;}
</style>
是不是简洁多了！这就是setup语法糖，现在所有Vue3项目都用这种写法！
而且用了setup语法糖之后，组件导入了就自动注册了，不用再写components了！所以App.vue可以改成这样：
<template><div class="hello"><h1>hello vue3!</h1><Person></Person></div>
</template><style scoped>.hello {background-color: #b5f0ee;box-shadow: 0 0 15px;border-radius: 15px;padding: 15px;}
</style><script lang="ts" setup>// 导入组件，自动注册import Person from './components/Person.vue';
</script>
太方便了有没有！
7.3 配置代码模板
每次新建.vue文件都要写这三段，是不是有点麻烦？我们可以在VS Code里配置一个代码模板，输入vue3回车就自动生成。
步骤：
- 按
Ctrl + Shift + P - 输入"Preferences: Configure User Snippets"
- 选择"vue.json"
- 把下面的内容粘贴进去：
{"Vue 3 Component": {"prefix": "vue3","body": ["<template>","</template>","","<script lang='ts' setup>","</script>","","<style scoped>","</style>"],"description": "Generate a Vue 3 single-file component with <script setup>"}
}
现在你只要在.vue文件里输入vue3，然后按回车，就会自动生成这三段代码了！
八、干货总结+避坑指南
好了，今天的内容就讲到这里了！我给大家总结一下今天的重点：
✅ 必记知识点
- Vue3是当前最新的Vue版本，性能比Vue2提升了一倍还多，新项目必须用Vue3！
- 创建Vue3项目用Vite，速度比webpack快10倍！
- 组合式API是Vue3的核心，用
<script setup>语法糖写代码最简洁。 - setup函数里定义的数据和方法自动暴露给模板，不用return。
- 导入组件自动注册，不用写components。
⚠️ 避坑指南
- Node.js版本必须大于等于16.0.0，不然Vite跑不起来！
- 国内一定要配置淘宝镜像，不然下载依赖会特别慢！
- VS Code一定要安装Vue.volar插件，不然没有代码提示！
- 不要用Vue2的选项式API了，官方已经不推荐了！
🎯 文末复盘
今天我们从Vue3的基本介绍开始，讲了它的核心优势、新特性、底层优化，然后手把手教大家用Vite创建了Vue3项目，讲解了项目结构，写了第一个Vue程序，最后重点讲了组合式API的核心——setup函数和它的语法糖。
这些都是Vue3最基础、最重要的内容，你只要把今天讲的这些都掌握了，就已经入门Vue3了！接下来我们会继续讲响应式数据、计算属性、侦听器、生命周期钩子等等内容。
💬 结尾互动
怎么样？Vue3是不是没有你想象的那么难？我跟你说啊，前端这东西，只要你动手写，就没有学不会的！今天讲的内容，你一定要自己动手敲一遍代码，光看是没用的！
如果你觉得这篇文章对你有帮助，别忘了点赞👍、收藏⭐、关注➕三连！有任何问题都可以在评论区留言，我会一一解答！
下一篇文章我会给大家讲Vue3的响应式原理，这是Vue最核心的东西，一定要来看哦！我们下期再见！