快速上手：用 Vite 创建 Vue 3 项目（详细步骤+实用技巧）

摘要：如果你准备开始一个新的 Vue 3 项目，Vite 是最佳的构建工具选择。它启动快、热更新快，配置简单。为什么选择 Vite 而不是 Vue CLI？

如果你准备开始一个新的 Vue 3 项目，Vite 是最佳的构建工具选择。它启动快、热更新快，配置简单。下面教你一步步操作：

一、为什么选择 Vite 而不是 Vue CLI？

Vite 利用浏览器原生 ES 模块支持和按需编译，带来三大优势：

启动飞快： 大型项目启动只需几秒（不再是几十秒甚至分钟）
热更新快： 修改代码后，浏览器更新几乎是立即完成
配置简单： 开箱即用，减少复杂配置

二、创建 Vue 3 项目步骤

打开终端： 在你想创建项目的文件夹位置打开命令行窗口 (cmd, PowerShell, Terminal)。

运行创建命令：

npm create vite@latest my-vue-app

my-vue-app 是你的项目文件夹名称，可以改成你喜欢的名字。

选择框架： 命令行会出现提示：

? Project name: › my-vue-app
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others

用键盘上下箭头选择 Vue，按回车确认。

选择变体：

? Select a variant: › - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗

这里选择：

JavaScript：使用 JavaScript 开发（适合大多数情况）。
TypeScript：使用 TypeScript 开发（推荐用于大型项目）。

按回车确认选择（本文选 JavaScript）。

进入项目 & 安装依赖：

cd my-vue-app  # 进入你刚创建的项目文件夹
npm install    # 安装项目需要的所有依赖包

安装过程需要一点时间，取决于你的网速。

启动开发服务器：

npm run dev

看到类似下面的输出，说明项目启动成功：

  VITE v5.x  ready in 327 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

打开浏览器： 复制输出的地址（通常是 http://localhost:5173/）到浏览器打开。你将看到 Vue 3 的默认欢迎页面！恭喜，你的 Vue 3 项目用 Vite 创建好了！

三、核心命令和文件说明

npm run dev：启动开发服务器，进行编码和调试。

npm run build：打包项目用于上线，生成的文件在 dist 文件夹里。

npm run preview：本地预览打包后的效果（先执行 build）。

主要项目文件：

src/main.js：Vue 应用入口文件，创建 Vue 应用实例。
src/App.vue：根组件，项目的主要界面在这里开始。
src/components/：存放你写的 Vue 组件。
vite.config.js：Vite 的配置文件（按需修改）。

四、常用配置修改 (vite.config.js)

打开 vite.config.js 文件，你可以根据需要调整：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080, // 修改开发服务器端口为 8080
    open: true  // 启动后自动打开浏览器
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 设置 @ 指向 src 目录
    }
  }
})

五、安装常用库

例如安装路由 (Vue Router) 和状态管理 (Pinia)：

npm install vue-router@4 pinia

然后在 src/main.js 中引入并配置它们。

六、环境变量

创建 .env.development (开发环境) 和 .env.production (生产环境) 文件：

# .env.development
VITE_API_BASE_URL=http://localhost:3000/api

# .env.production
VITE_API_BASE_URL=https://api.yoursite.com

在代码中通过 import.meta.env.VITE_API_BASE_URL 获取。记住：变量名必须以 VITE_ 开头。

总结

使用 npm create vite@latest 是创建 Vue 3 项目最快、最现代的方式。Vite 带来的速度提升能让你专注于写代码，而不是等待构建。它配置简单，对新手友好，同时也能满足大型项目的性能需求。现在就开始用 Vite 创建你的 Vue 3 项目，享受飞速开发的体验吧！

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_12847