★ FEATURED ARTICLE 简介这套面向 Vue3 初学者的 HelloWorld 入门示例基于 Vue 3.1.5 搭建适合准备学习前端框架或从 Vue2 过渡到 Vue3 的开发者也适合作为课程作业或入职前自学的第一个练手项目无论刚接触现代前端工具链还是想对比新旧版本差异都能从中获得直观体验。压缩包体积仅 257KB包含 7 个文件以 JS、HTML、XML 为主其中 JS 脚本分为全局版和 ES 模块版两种并配有一个 HTML 入口页面无需复杂构建即可在本地浏览器中直接运行方便实时查看渲染效果也能对比不同引入方式的区别同时保留了 .idea 工程配置便于在 IntelliJ IDEA 或 WebStorm 中打开还原作者的工作区设置。目前已有 784 人学习下载。示例虽然简单却覆盖了组合式函数、响应式状态等 Vue3 核心概念读者可以边修改边运行通过替换文本或添加响应式变量快速验证模板与逻辑的绑定关系并以此为起点继续探索传送门、异步组件等新特性是一份轻量高效的 Vue3 起步资料。1. Vue3 HelloWorld零基础也能看懂的第一课第一次看到“Vue3 HelloWorld”这个词很多人心里都会犯嘀咕HelloWorld不是编程里那个最基础的“你好世界”吗Vue3又是什么这两个词拼在一起是不是意味着我能很快上手说句实话HelloWorld确实是最友好的起点但它的价值不只是打印一行字而是帮你第一次真正理解“前端框架”到底在做什么。把Vue3想成一套“搭积木”的工具HTML、CSS、JavaScript是积木块Vue3帮你把这些积木规规矩矩拼成一个能交互的页面。过去手动改网页要反复操作DOM现在只要告诉Vue“数据是什么”页面会自动跟着变。这篇文章就是带着完全零基础的你从装环境、写第一行代码到跑起来看到“Hello World”为止。不需要任何前置经验跟着一步步做就行。2. 先搞懂一个概念到底什么是 Vue32.1 用餐厅点菜来理解前端框架想象你去一家餐厅吃饭。没有Vue的时候你每要一杯水服务员就得跑去后厨告诉厨师“加一杯水”然后亲自端过来——这就是传统JavaScript操作网页的方式每次数据变都要手动找到对应位置、改内容。有了Vue你桌上的“点菜平板”会自动同步后厨库存你勾选一道菜菜单上的“已售罄”标签自己就变了后厨的大屏也同步更新没人需要跑来跑去。Vue3就是这样一个帮你自动同步数据和页面的工具。它管这个叫作“响应式”——数据变页面就变页面变数据也跟着变。你不用再写一大堆“先找到元素、再修改内容”的命令只需要声明数据是什么、页面长什么样剩下的同步工作Vue全包了。Vue3里的“3”是版本号意思是第三代。相比Vue2它的写法更简洁、运行更快也更适合新手理解。现在新项目基本都用Vue3所以从它开始学不会有“学了没用”的问题。2.2 学Vue3前需要哪些基础完全零基础能不能学Vue3能但有个前提你至少知道HTML和JavaScript大概长什么样。这里的“知道”不需要精通而是看得懂div、p这种标签是干嘛的知道let、const是声明变量的见过函数用function或箭头函数写法如果你连这些都没见过建议先用两天时间在任意免费网站上过一遍HTML标签和JavaScript变量、函数基础然后就能回来看这篇文章。Vue3本身并没有要求你必须是个厉害的程序员它的设计初衷之一就是降低门槛。我第一次学Vue的时候JavaScript也只懂一点皮毛函数、数组都还犯迷糊照样靠着HelloWorld把流程跑通了。所以别被“框架”两个字吓到它只是你现有的那点HTML和JS知识的“升级包”。2.3 创建Vue3项目前的准备清单在写代码之前要先装好三样东西。这里我不推荐直接用CDN引一个Vue文件就算完事因为那对理解项目结构没帮助。我们按正规的工程化方式走反而后续学组件、路由的时候不迷路。需要准备的东西有三件Node.jsJavaScript的运行环境装好后能使用npm命令一个编辑器推荐VS Code免费且对新手友好一个命令行工具Windows用PowerShellMac用终端Node.js不是一门语言你可以理解为一个“翻译官”让JavaScript能在浏览器之外的地方运行顺便还能帮你下载Vue3的代码包。检查是否装好打开命令行输入node -v能显示版本号就行。装好这三样你电脑就有了“开火做饭”的条件。2.4 为什么选择可视化创建而不是手写配置Vue3官方提供了一个叫create-vue的工具输入一行命令就能生成完整项目骨架。很多新手会纠结是不是自己手动创建文件更“底层”更能理解我的建议是入门阶段千万别这么干。手动配置要处理打包、编译、路径等等问题每一项都能劝退人。想象你要开一家奶茶店两条路一是从烧砖和泥开始自己盖店面二是找装修公司直接给你交一套可营业的店面。新手当然选后者。create-vue就是那家装修公司它生成的每个文件为什么存在、干什么用你在后面几章自然就会发现。先跑起来再理解细节这才是最省力的学法。3. 用命令行创建你的第一个 Vue3 项目3.1 手把手创建项目三条命令跑通打开命令行工具敲下面这条命令npm create vuelatest hello-world说明一下npm create vuelatest的意思是让npm工具去下载Vue官方的最新项目创建器hello-world是你要创建的项目文件夹名字。执行后系统会问几个问题新手阶段全部直接按回车选默认就行当你看到“√”打头的完成提示项目就创建好了。然后进入项目文件夹cd hello-worldcd是改变目录的命令意思就是从当前位置进到刚才创建的hello-world文件夹里。最后安装项目依赖npm install这一步会把Vue3本身以及项目需要的各种辅助代码包都下载到本地。不同电脑速度不同可能几分钟等它跑完看到没有报错就说明成功了。3.2 启动项目看看默认页面长什么样依赖装好后输入命令启动开发服务器npm run dev你会看到类似这样的输出VITE v5.x.x ready in xxx ms ➜ Local: http://localhost:5173/打开浏览器访问http://localhost:5173/就能看到一个欢迎页面里面有个大大的Vue图标还有一些文字说明和文档链接。这说明一件事你的第一个项目已经成功跑起来了。这个开发服务器的好处是你改代码浏览器就自动刷新不用手动刷新页面。第二教程阶段一定要记住这个页面因为之后你的代码会在这个页面上呈现。3.3 项目里的文件各是什么识破“黑匣子”创建好的项目文件夹里有一堆文件新手最容易慌的就是这个。我帮你只圈出关键的三个index.html整个应用的入口页面相当于房子的地基src/App.vue主组件文件页面内容主要写在这里src/main.js负责把Vue应用挂载到页面上.vue后缀的文件是Vue特有的“单文件组件”里面同时写HTML、CSS和JavaScript分成三个块。你暂时可以把App.vue理解为“这个页面的完整代码”其他人看到的效果就是它决定的。至于node_modules文件夹里面装的是所有依赖包不用管它。package.json记录项目用到了哪些包和命令也不急着深究。3.4 修改模板文字第一次“改了就生效”现在体验一下最神奇的部分改动页面内容。打开src/App.vue找到下面这一行a hrefhttps://vitejs.dev target_blank img src/vite.svg classlogo altVite logo / /a把href改成https://cn.vuejs.org图片改成h1Hello World/h1代码变成了h1Hello World/h1保存一下回到浏览器你会看到原来的那个欢迎页内容消失了变成了大大的“Hello World”文字。没错改动真的生效了。这就是Vue开发的基础流程改文件、保存、页面自动更新。把界面想象成一面魔镜你写什么它就显示什么。这比传统方式省去了一大堆查找和替换的步骤让你把注意力全部放在内容本身。4. 亲手写第一个真正的 Vue3 逻辑让页面“活”起来4.1 从静态文字到动态数据几个关键词刚才写的“Hello World”是死文字写死就永远是这行字。现在我们来把它变成动态的定义一个变量然后让页面显示这个变量的值。打开App.vue里的script setup区块你会看到原本有一些示例代码全部删掉换成script setup const message Hello World从Vue3出发 /scriptscript setup是Vue3里推荐的一种简写方式意思就是“在这里写逻辑代码”。const声明一个常量变量名叫message值是Hello World从Vue3出发。然后在模版区域的h1里写上h1{{ message }}/h1双大括号{{ }}是Vue3的“插值语法”它的含义是把message这个变量的内容显示在这个位置。保存后页面上显示的依然是“Hello World从Vue3出发”。但区别在于现在这行字不再是写死的而是“由数据决定的”。4.2 把数据双向绑定输入一段文字标题同步变让文字真正“活”起来可以再加一个输入框让用户输入什么标题就变什么。在h1下面加一行input v-modelmessage placeholder输入文字试试 /这里出现了一个新指令v-model它是Vue里最有标志性的语法之一。v-model的意思是双向绑定message的初始值显示在输入框里用户修改输入框内容时message也自动更新而message更新后h1里的文字也跟着更新。保存页面回到浏览器你会看到标题下面出现一个输入框里面默认显示“Hello World从Vue3出发”。在框里敲几个字按一下空格标题立刻跟着变化。这就是“响应式”的直观体验数据和界面互相通知没有任何中间操作。4.3 解释一下v-model背后的行为你可以把v-model理解为一条双向的传送带左边是数据存储区右边是用户看到的界面。用户在界面上修改传送带会把新值送回存储区存储区值变了传送带又把新值送到界面上所有引用它的地方。这里和传统方式对比一下就能感受到差别。传统JavaScript要实现同样的效果得写一个监听事件、取输入框值、再更新标题元素的代码至少三五行。Vue里一行v-model就完成了。新手学Vue普遍觉得“怎么这么省事”这正是框架存在的意义——把重复劳动抽象掉。4.4 第一个完整代码长什么样现在你的App.vue文件应该长这样script setup const message Hello World从Vue3出发 /script template h1{{ message }}/h1 input v-modelmessage placeholder输入文字试试 / /template不要动style里面的乱七八糟的背景色和布局样式那个不会影响功能。保存后刷新浏览器就能看到标题加输入框的组合。在输入框里打字标题实时变化你就算真正拥有了第一个“有交互逻辑”的Vue3页面。到这里你其实已经掌握了Vue3入门最核心的三角插值{{ }}负责显示数据、v-model负责联动输入、script setup负责声明逻辑。把它们组合起来你就具备了继续往下学的基础。5. Vue3 新手避坑指南最常见的问题与排查方法5.1 端口被占用页面打不开现象执行npm run dev后浏览器访问http://localhost:5173/页面一直转圈圈打不开命令行里报错说端口被占用。原因上次启动的开发服务没有关闭或者其他程序占用了5173这个端口。新手最容易遇到的情况是开着第一个项目的服务不关又去启动第二个项目。解决在命令行按CtrlC关掉当前服务或者修改端口。想改端口在项目根目录创建一个.env文件里面写一行VITE_PORT5174然后重新npm run dev访问新端口就行。注意别把开发中的多个服务同时开着。5.2 改了代码但页面没反应现象保存代码后浏览器页面没有任何变化标题还是之前的文字。原因可能是浏览器缓存也可能是文件保存到了错误的位置。新手经常改完代码却忘了保存或者改了node_modules里的文件而不是src目录里的文件。解决先确认自己改的文件路径是src/App.vue再确认编辑器状态栏显示“已保存”。如果都正常在浏览器里按CtrlShiftR强制刷新清掉缓存再试一次。VSCode用户建议打开自动保存功能省得每次手动按保存。5.3 页面白屏什么都显示不出来现象浏览器打开后是干净的白色页面一点内容都没有。原因模板代码写错了结构最常见的是template里写了多个根元素——注意Vue3的模板虽然支持多个根节点但如果结构标签没配对闭合会让整个渲染中断。解决检查模板里的标签是否成对闭合比如写了div就必须有/div。如果刚才的改动比较大对照一下示例代码里的结构把template内容暂时删光再一点点加回来每加一块保存一次看效果。这种“二分定位法”能快速找到错误出处。5.4 不熟悉命令行不知道当前在哪个目录现象输入npm create vuelatest时报错说找不到命令或不是合法命令有一种“怎么哪都不对”的感觉。原因大概率是当前命令行所在的文件夹有问题。比如你创建了两个同名项目第二次直接在根目录执行命令项目会嵌套进错误位置。解决先执行pwdMac或cdWindows看当前路径用ls查看当前目录下的文件列表确认是不是在期望的位置。如果不放心可以先输入cd ~回用户主目录再重新执行创建命令。命令行的基本原理就一条你站在哪里命令就在哪里执行。5.5 把环境变量改坏了项目启动报错现象新增了.env文件后npm run dev直接报错提示语法问题。原因.env文件格式非常严格里面有中文、多加了空格、用了分号结尾都可能导致解析失败。解决先删掉.env文件恢复默认端口启动。然后再新建时只写最简单的VITE_PORT5174中间不要有空格末尾不要有分号。改完保存重启服务。环境变量是个能跑就行、别多折腾的东西入门阶段没有特殊需求就不用配置它。6. 下一步学什么从 HelloWorld 到独立做小页面你已经成功跑通了第一个Vue3例子这一步的价值被很多人低估——它完成了从“完全不懂”到“能运行代码”的跃迁。现在要做的不是回头反复看这篇文章而是趁热打铁按照下面的路径继续往前走。第一步搞定模板语法2天学会v-if条件显示、v-for循环列表、click点击事件这三个指令。模拟一个待办清单页面输入框加入待办事项下面用v-for显示所有事项点击删除按钮用click删除对应行。把这三个语法练熟你就能写出稍微像样的工具页。第二步学会组件复用1周把页面拆成几个.vue文件例如做一个“商品卡片”组件把图片、标题、价格作为参数传进去然后在主页面里用三张卡片拼一个展示列表。你要理解“父组件传值给子组件”用props“子组件通知父组件”用emit。这个阶段不追求复杂重点是体会“组件化”的设计思想。第三步修一个真实小需求1-2周找一个现有的Vue3开源示例项目不看文档先尝试改页面上的文字、图片、颜色再尝试改数据结构。这个过程会遇到大量的“这一步是怎么来的”的疑问这时候再回头翻官方文档。带着问题看文档效率是漫无目的学习的十倍。第四步做一个小作品并上线3周后不必一开始就学路由、状态管理那些进阶概念先做一个不换页面的单页工具应用比如个人记账本、学习打卡表。把数据存放在浏览器的localStorage里这样刷新不丢数据。当你发现自己能独立把一个想法变成可用的页面时就到了该正式学Vue Router多页面跳转和Pinia全局状态管理的时机。说一个我的习惯每次学新框架我都会强制自己走一遍“创建项目 → 改一行代码 → 观察变化 → 再改一行”这个循环哪怕目标功能很简单。因为很多所谓“玄学”报错其实都是在熟悉的过程中自然化解的。学Vue3也一样不要追求一次看完整本书每次只学能解决当前问题的那一点积累起来你从“HelloWorld新手”到“能独立做东西”之间的距离比想象中短很多。希望这篇入门指南帮到正在起步的你剩下的路动手走一遍就顺畅了。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
