Vue3工程化如何使用 Vite 构建工具快速创建 Vue3 项目

使用 npm create vite@latest 可快速创建 Vue3 工程，无需全局安装；需 Node.js ≥18.0.0；支持 npm/yarn/pnpm 三选一初始化，项目含 main.js、App.vue 等核心文件，开箱即用且热更新迅速。

直接用 npm create vite@latest 命令就能快速搭起一个标准 Vue3 工程，整个过程不到一分钟，不需要提前全局安装 Vite 或 Vue CLI。

确认 Node.js 版本

Vite 要求 Node.js ≥ 18.0.0（最新推荐 20+），运行以下命令检查：

node -v

如果版本过低，去 Node.js 正式 下载 LTS 或最新版安装即可。

执行一键初始化

在终端中运行（三选一，推荐 pnpm）：

1. npm 用户：

   npm create vite@latest my-vue-app -- --template vue

2. yarn 用户：

   yarn create vite my-vue-app --template vue

3. pnpm 用户（更快、更节省磁盘）：

   pnpm create vite my-vue-app --template vue

   其中 my-vue-app 可替换成你自己的项目名，--template vue 表示使用纯 JavaScript 的 Vue3 模板；如需 TypeScript，把 vue 换成 vue-ts。

进入项目并启动

命令执行完后，依次运行：

cd my-vue-apppnpm install# 或 npm install / yarn installpnpm run dev# 或 npm run dev / yarn dev

服务默认在 http://localhost:5173 启动，浏览器打开就能看到 Vue3 默认欢迎页。

关键文件速览

1. src/main.js：Vue 应用入口，调用 createApp(App).mount('#app')
2. src/App.vue：根组件，已含 Composition API 示例
3. index.html：唯一 HTML 入口，内含 <div id="app"></div> 挂载点
4. vite.config.js：可选配置文件，多数场景无需修改
5. package.json 中的 dev 脚本已预设好开发服务器启动逻辑

不需要额外配置，开箱即用，热更新响应快，改动代码保存后页面几乎实时刷新。