Vue3+vite+pnpm从零搭建的一个项目（保姆级教程）

一前言最近在学Vue3这篇文章记录了pnpmVite从零创建第一个Vue3项目的完整流程。整体流程大概是1.确保本机安装了pnpm2.用Vite创建Vue3项目3.进入项目目录本文省略了此步骤详细介绍4.安装依赖5.启动开发服务器6.浏览器访问 http://localhost:5173/7.修改App.vue验证热更新我本机环境是Windows项目路径是C:\vue-projects\my-vue-app最终启动成功效果二环境准备安装pnpm如果你还没有安装pnpm可以先全局安装1:打开cmd命令提示符输入npm install -g pnpm2安装完成后检查版本能成功输出版本号就说明安装成功。如果提示不是内部或外部命令通常是Node/npm环境变量没有配置好或者没重新开终端。也可以去检查一下Node打开cmd命令提示符分别输入node -v和npm -v注Vue3 Vite 项目一般需要较新的 Node 版本建议 Node 18 / 20。三创建Vue3项目打开cmd命令提示符输入pnpm create vitelatest创建时一般会出现选择Framework选VueVariant选JavaScript或TypeScriptJavaScript和TypeScript的区别本质JavaScriptJS​动态类型脚本语言写浏览器/服务端逻辑TypeScript(TS)​JS 的超集加了类型系统最终编译成 JS 运行举个栗子JS 像手写便签想写啥写啥TS 像填表格每个格子规定了填什么类型写错了当场标红。我用的是VueTS的vite项目创建出来的目录类似四安装依赖进入项目后执行打开命令提示符输入pnpm install去查看依赖分别输入pnpm installpnpm format五启动开发服务器打开cmd输入pnpm dev然后用浏览器打开http://localhost:5173/能看到vue页面就说明项目跑起来了。六修改App.vue验证效果我这里src/App.vue写了script setup langts const msg 你好火星人 LOVE HCY 祝每个独特的你 能够成为风成为海。 成为永不熄灭的火焰。 /script template div classbox{{ msg }}/div /template style scoped .box { padding: 24px; font-size: 18px; line-height: 1.8; color: #333; } /style保存后Vite会自动热更新浏览器就能看到如果没有自动刷新手动刷新页面即可。六结语到这里第一个 Vue3 Vite pnpm 项目算是真正跑通了——从环境准备、脚手架创建、依赖安装到启动开发服务器、修改代码看到热更新效果。如果你也在从零起步希望这篇能帮你少走点弯路。