10分钟搞定Vue3项目

无论你是刚入门的小白，还是想快速上手 Vue3 的开发者，这篇文章都能让你在 10分钟内 跑起来一个完整的前端项目。

第一步：装好你的"工具箱"

就像做菜需要准备厨具一样，写前端代码也需要准备好开发环境。

前端开发最重要的工具就是 Node.js，它就像是前端项目的 "发动机"。版本要求是 20或以上，我推荐用20版本，稳定又好用。

装好 Node.js 后，NPM（前端包管理器）会自动跟着装上，这就像买手机送充电器一样方便。

不会装Node.js？别担心，我之前写过详细教程：https://mp.weixin.qq.com/s/YaqSyIgKuGOw7RWjMIW1lw

第二步：一键创建你的项目

Vue 官方为我们准备了一个超级好用的 "项目生成器" 叫 create-vue。

它就像一个智能助手，会问你几个问题，然后自动帮你搭建好整个项目框架。

想先体验一下 Vue3？可以去官方的在线编码测试页面玩玩：https://play.vuejs.org/

开始创建项目：

在你想放项目的文件夹里，打开命令行工具，输入这行 "魔法咒语"：

npm create vue@3.17.0

注意这里我用的是3.17.0版本，为什么不用最新版？因为稳定版本踩坑少，新手友好！

运行后你会看到这样的界面：

第三步：选择你需要的 "功能包"

接下来脚手架会像服务员一样问你：要不要加点路由？要不要状态管理？就像点餐一样，按需选择就行。

我建议新手按照下图的选择来，这样会自动帮你装上 Vue Router（页面跳转用的）和 Pinia（数据管理用的）等实用工具：

第四步：启动你的第一个 Vue3 项目

用 WebStorm（或者你喜欢的代码编辑器）打开刚创建的项目文件夹。

接下来执行两个简单命令：

1. 1. 先装依赖包：npm install（就像给新房子装家具）
2. 2. 再启动项目：npm run dev（点火启动！）

成功的话你会看到这样的界面：

在浏览器里打开显示的网址，看到 Vue 的欢迎页面就说明成功了！

bonus：开发神器推荐

Vue 还贴心地为我们准备了开发者工具 devtools，就像给车装了仪表盘，可以实时监控项目运行状态，调试起来超方便：

是不是比想象中简单多了？Vue3 的项目就这样轻松搞定了！

如果这篇文章帮到了你，不妨点个分享给同样需要的朋友吧！ 你的每一次支持，都是我持续创作的动力！💪

往期推荐：