快速上手：用 Vite 创建 Vue 3 项目（详细步骤+实用技巧）
如果你准备开始一个新的 vue 3 项目，Vite 是最佳的构建工具选择。它启动快、热更新快，配置简单。下面教你一步步操作：
一、为什么选择 Vite 而不是 Vue CLI？
Vite 利用浏览器原生 ES 模块支持和按需编译，带来三大优势：
- 启动飞快： 大型项目启动只需几秒（不再是几十秒甚至分钟）
- 热更新快： 修改代码后，浏览器更新几乎是立即完成
- 配置简单： 开箱即用，减少复杂配置
二、创建 Vue 3 项目步骤
打开终端： 在你想创建项目的文件夹位置打开命令行窗口 (cmd, PowerShell, Terminal)。
运行创建命令：
npm create vite@latest my-vue-appmy-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 项目，享受飞速开发的体验吧！
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！