Vue3搭配Vite已成为现代前端开发的主流组合。Vite提供了极速的开发服务器启动和热模块替换（HMR），Vue3的Composition API则让代码组织更加灵活。本文将手把手带你搭建一个完整的Vue3+Vite项目。
一、环境准备
开始之前，请确保已安装以下工具：
- Node.js：建议18.x LTS版本以上
- npm或pnpm：包管理器，pnpm速度更快
- VS Code：推荐编辑器，安装Volar插件
二、创建项目
# 使用npm创建Vue3项目
npm create vue@latest my-project
# 或使用pnpm
pnpm create vue@latest my-project
# 进入项目目录
cd my-project
# 安装依赖
npm install
# 启动开发服务器
npm run dev
创建过程中会让你选择需要的功能，推荐勾选：
- TypeScript（可选，推荐学习）
- Vue Router（路由管理）
- Pinia（状态管理）
- ESLint + Prettier（代码规范）
三、项目结构说明
my-project/
├── public/ # 静态资源（不经过打包处理）
├── src/
│ ├── assets/ # 需要打包的资源（图片、样式等）
│ ├── components/ # 可复用组件
│ ├── views/ # 页面级组件
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia状态管理
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html # HTML模板
├── vite.config.js # Vite配置
└── package.json # 项目依赖
四、配置路由
在 src/router/index.js 中配置页面路由：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/user/:id',
name: 'User',
component: () => import('../views/User.vue'),
props: true // 将路由参数作为props传递
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
五、使用Pinia管理状态
// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
// 状态
const count = ref(0)
// 计算属性
const doubleCount = computed(() => count.value * 2)
// 操作
function increment() {
count.value++
}
function decrement() {
count.value--
}
return { count, doubleCount, increment, decrement }
})
六、编写组件示例
<template>
<div class="card">
<h2>{{ title }}</h2>
<p>{{ description }}</p>
<button @click="handleClick">
点击次数：{{ count }}
</button>
</div>
</template>
<script setup>
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({
title: String,
description: { type: String, default: '' }
})
const emit = defineEmits(['click'])
const count = ref(0)
function handleClick() {
count.value++
emit('click', count.value)
}
</script>
小贴士：Vue3的 <script setup> 语法糖让组件代码更加简洁，是官方推荐的写法。
七、Vite配置详解
在 vite.config.js 中可以配置代理、路径别名等：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 配置路径别名
}
},
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
})
小贴士：配置了 @ 别名后，导入组件可以用 import Foo from '@/components/Foo.vue'，不用再写一长串 ../../ 了。
八、组件通信进阶
除了 props 和 emit，Vue3 还提供了几种更灵活的组件通信方式：
provide / inject（跨层级传递）
// 父组件提供数据
import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)
// 任意子组件注入使用
import { inject } from 'vue'
const theme = inject('theme', 'light') // 第二个参数是默认值
封装 API 请求
// utils/request.js
import axios from 'axios'
const request = axios.create({
baseURL: '/api',
timeout: 10000
})
// 请求拦截器
request.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
// 响应拦截器
request.interceptors.response.use(
response => response.data,
error => {
if (error.response?.status === 401) {
// token过期，跳转登录
}
return Promise.reject(error)
}
)
export default request
九、部署上线
# 构建生产版本
npm run build
# 预览构建结果
npm run preview
构建后的文件在 dist 目录中。以下是 Nginx 部署配置示例：
server {
listen 80;
server_name your-domain.com;
root /var/www/your-project/dist;
index index.html;
# SPA路由支持（关键！）
location / {
try_files $uri $uri/ /index.html;
}
# 静态资源缓存
location ~* \.(js|css|png|jpg|ico|woff2)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}
}
总结：Vue3 + Vite 的开发体验非常顺滑，Composition API 让代码组织更灵活。建议新手先从官方脚手架开始，边做项目边学，不要一开始就追求所有高级特性。