企业官网建设流程全解析

一：前言

最近在学Vue3，这篇文章记录了pnpm+Vite从零创建第一个Vue3项目的完整流程。

整体流程大概是：

1.确保本机安装了pnpm

2.用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 pnpm；2：安装完成后检查版本，能成功输出版本号就说明安装成功。

如果提示不是内部或外部命令，通常是Node/npm环境变量没有配置好，或者没重新开终端。

也可以去检查一下Node：

打开cmd命令提示符分别输入：node -v和npm -v

注：Vue3 + Vite 项目一般需要较新的 Node 版本，建议 Node 18+ / 20+。

三：创建Vue3项目

打开cmd命令提示符输入：pnpm create vite@latest

创建时一般会出现选择：

• Framework：选Vue
• Variant：选JavaScript或TypeScript

  JavaScript和TypeScript的区别

  本质
  JavaScript（JS）	​ 动态类型脚本语言，写浏览器/服务端逻辑
  TypeScript(TS)	​ JS 的超集，加了类型系统，最终编译成 JS 运行

  举个栗子：JS 像手写便签，想写啥写啥；TS 像填表格，每个格子规定了填什么类型，写错了当场标红。

  ---

  我用的是Vue+TS的vite项目，创建出来的目录类似：

  ---

  四：安装依赖

进入项目后执行：打开命令提示符输入pnpm install去查看依赖：分别输入

pnpm install
pnpm format

五：启动开发服务器
打开cmd输入：pnpm dev，然后用浏览器打开：http://localhost:5173/，能看到vue页面，就说明项目跑起来了。

六：修改App.vue验证效果

我这里src/App.vue写了：

<script setup lang="ts"> const msg = `你好，火星人 LOVE+ HCY 祝每个独特的你， 能够成为风，成为海。 成为永不熄灭的火焰。` </script> <template> <div class="box">{{ msg }}</div> </template> <style scoped> .box { padding: 24px; font-size: 18px; line-height: 1.8; color: #333; } </style>

保存后Vite会自动热更新，浏览器就能看到：

如果没有自动刷新，手动刷新页面即可。

六：结语

到这里，第一个 Vue3 + Vite + pnpm 项目算是真正跑通了——从环境准备、脚手架创建、依赖安装，到启动开发服务器、修改代码看到热更新效果。如果你也在从零起步，希望这篇能帮你少走点弯路。