你需要了解 Vue 3 项目中最常用、最关键的配置文件，我会按项目根目录配置和src 内业务配置分类整理，包含完整用法和示例，直接复制就能用。

一、根目录核心配置文件（项目运行/构建依赖）

1. vite.config.js（Vite 构建工具，Vue3 官方推荐）

这是 Vue 3 + Vite 项目最重要的配置文件，配置开发服务、打包、代理、路径别名等。

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

// https://vitejs.dev/config/
export default defineConfig({
  // 1. 插件配置
  plugins: [vue()],
  
  // 2. 路径别名（简化 import 路径）
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // @ 代表 src 目录
      '@assets': resolve(__dirname, 'src/assets')
    }
  },

  // 3. 开发服务器配置
  server: {
    host: '0.0.0.0', // 允许局域网访问
    port: 3000,      // 端口号
    open: true,      // 自动打开浏览器
    https: false,    // 关闭 https
    // 接口代理（解决跨域）
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端接口地址
        changeOrigin: true,              // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径
      }
    }
  },

  // 4. 打包配置
  build: {
    outDir: 'dist',      // 打包输出目录
    assetsDir: 'assets', // 静态资源目录
    minify: 'terser',    // 代码压缩
    sourcemap: false     // 关闭 sourcemap（生产环境）
  }
})

2. package.json（项目依赖/脚本配置）

管理项目依赖、运行/打包命令，Vue3 标准配置：

{
  "name": "vue3-project",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",                // 启动开发环境
    "build": "vite build",        // 生产打包
    "preview": "vite preview"     // 预览打包结果
  },
  "dependencies": {
    "vue": "^3.4.0"               // Vue3 核心依赖
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^5.0.0"
  }
}

3. .env 环境变量配置（多环境必备）

Vite 支持三种环境文件，放在项目根目录：

• .env：全局公共变量（所有环境生效）
• .env.development：开发环境变量（npm run dev）
• .env.production：生产环境变量（npm run build）

变量规则：必须以 VITE_ 开头

# .env.development
VITE_APP_TITLE = Vue3 开发环境
VITE_API_BASE_URL = /api
VITE_APP_DEBUG = true

使用方式：

<script setup>
console.log(import.meta.env.VITE_APP_TITLE)
</script>

4. .eslintrc.cjs（代码规范检查）

统一团队代码风格，避免语法错误：

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'vue/no-unused-vars': 'warn',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

5. prettier.config.cjs（代码格式化）

自动格式化代码（缩进、引号、分号）：

module.exports = {
  semi: false,        // 关闭分号
  singleQuote: true,  // 使用单引号
  tabWidth: 2,        // 缩进 2 格
  trailingComma: 'none'
}

---

二、src 目录内业务配置文件

1. src/main.js（项目入口配置）

Vue 3 入口文件，挂载全局组件、插件、样式：

import { createApp } from 'vue'
// 根组件
import App from './App.vue'
// 全局样式
import './style.css'

// 创建应用实例
const app = createApp(App)

// 全局配置（示例：全局指令/组件）
// app.directive('focus', { ... })
// app.component('GlobalButton', { ... })

// 挂载到 DOM
app.mount('#app')

2. src/router/index.js（路由配置 Vue Router）

Vue 3 路由标准配置（需先安装：npm install vue-router）：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

在 main.js 中挂载：

import router from './router'
app.use(router)

3. src/store/index.js（状态管理 Pinia 配置）

Vue 3 官方推荐状态库（替代 Vuex）：

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

在 main.js 中挂载：

import pinia from './store'
app.use(pinia)

---

三、极简配置清单（快速复制）

1. 基础运行：vite.config.js + package.json
2. 多环境：.env / .env.development / .env.production
3. 路由：src/router/index.js
4. 状态管理：src/store/index.js
5. 代码规范：.eslintrc.cjs + prettier.config.cjs

总结

1. Vue 3 + Vite 核心配置是 vite.config.js，负责服务、代理、打包；
2. 环境变量必须以 VITE_ 开头，用 import.meta.env 调用；
3. 业务核心配置：main.js（入口）、router（路由）、pinia（状态）。

本文按最常用优先级分类整理，包含用法、场景和示例，覆盖开发 99% 的需求。

Vue 3 核心函数分为两大类：组合式 API 核心函数（写业务必用）、工具函数（辅助开发）。

---

一、组合式 API 核心函数（<script setup> 中必用）

1. ref() —— 定义基础类型响应式数据

• 作用：把字符串、数字、布尔值等基础类型变成响应式
• 取值/赋值：必须用 .value（模板中可省略）
• 也可用于引用 DOM、组件实例

<script setup>
// 1. 导入函数
import { ref } from 'vue'

// 2. 定义响应式数据
const count = ref(0)
const msg = ref('Hello Vue3')

// 3. 修改数据（必须加 .value）
const add = () => count.value++
</script>

<template>
  <!-- 模板中直接用，无需 .value -->
  <p>{{ msg }}</p>
  <button @click="add">{{ count }}</button>
</template>

2. reactive() —— 定义对象/数组响应式数据

• 作用：深度响应式，适用于对象、数组、复杂数据结构
• 取值/赋值：无需 .value，直接操作

<script setup>
import { reactive } from 'vue'

// 定义对象/数组
const user = reactive({
  name: '张三',
  age: 18,
  hobbies: ['编程', '读书']
})

// 直接修改
const updateUser = () => {
  user.age++
  user.hobbies.push('运动')
}
</script>

3. computed() —— 计算属性

• 作用：基于响应式数据派生新数据，自带缓存
• 用法：只读计算属性、可写计算属性

<script setup>
import { ref, computed } from 'vue'
const count = ref(1)

// 只读计算属性（最常用）
const doubleCount = computed(() => count.value * 2)

// 可写计算属性
const writableCount = computed({
  get() { return count.value },
  set(val) { count.value = val }
})
</script>

4. watch() —— 侦听器

• 作用：监听响应式数据变化，执行异步/复杂逻辑
• 可监听：ref、reactive、多个数据源

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)

// 基础监听
watch(count, (newVal, oldVal) => {
  console.log('count变化：', newVal, oldVal)
})

// 监听 reactive 对象（必须指定属性/用 getter）
const user = reactive({ age: 18 })
watch(() => user.age, (newVal) => {})

// 立即执行 + 深度监听
watch(count, () => {}, {
  immediate: true,  // 初始化立即执行一次
  deep: true        // 深度监听（对象嵌套数据）
})
</script>

5. watchEffect() —— 自动追踪依赖侦听器

• 优势：无需指定监听目标，自动追踪内部使用的响应式数据
• 适用：简单监听、依赖不固定的场景

<script setup>
import { ref, watchEffect } from 'vue'
const count = ref(0)

// 自动监听 count，变化立即执行
watchEffect(() => {
  console.log('最新count：', count.value)
})
</script>

6. defineProps() —— 子组件接收父组件传值

• 专属 <script setup>，无需导入
• 用于定义组件 props（类型校验、默认值、必传）

<script setup>
// 子组件
const props = defineProps({
  title: {
    type: String,
    default: '默认标题',
    required: true
  },
  list: Array
})
// 直接使用 props.title
</script>

7. defineEmits() —— 子组件向父组件发送事件

• 专属 <script setup>，无需导入
• 子组件触发事件，父组件监听接收数据

<script setup>
// 子组件：定义事件名
const emit = defineEmits(['update-count'])

// 触发事件
const sendToParent = () => {
  emit('update-count', 100)
}
</script>

8. defineExpose() —— 子组件暴露属性/方法给父组件

• 作用：子组件主动暴露数据/方法，父组件通过 ref 调用

<script setup>
// 子组件
const childFn = () => console.log('子组件方法')
// 暴露出去
defineExpose({ childFn })
</script>

<!-- 父组件调用 -->
<Child ref="childRef" />
<script setup>
import { ref } from 'vue'
const childRef = ref(null)
// 调用子组件方法
childRef.value.childFn()
</script>

---

二、Vue 3 生命周期函数（组合式 API）

Vue 3 组合式 API 用函数形式调用，常用 4 个：

<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'

// 1. 组件挂载完成（DOM 渲染完毕，请求数据、操作DOM）
onMounted(() => {
  console.log('组件挂载')
  // 这里发接口请求最佳
})

// 2. 组件更新完成
onUpdated(() => {})

// 3. 组件卸载（清除定时器、解绑事件）
onUnmounted(() => {
  clearInterval(timer)
})
</script>

---

三、工具函数（高频实用）

1. toRefs() —— 解构 reactive 不丢失响应式

• 问题：直接解构 reactive 对象会失去响应式
• 解决：用 toRefs 转为响应式 ref

<script setup>
import { reactive, toRefs } from 'vue'
const user = reactive({ name: '张三', age: 18 })

// 正确：解构后仍响应式
const { name, age } = toRefs(user)
</script>

2. toRef() —— 提取对象单个属性为响应式

const age = toRef(user, 'age')

3. nextTick() —— DOM 更新后执行回调

• 适用：修改数据后，立即操作最新 DOM

import { nextTick } from 'vue'
const updateData = async () => {
  count.value++
  // 等待 DOM 更新完成
  await nextTick()
  // 操作最新 DOM
}

---

四、完整示例（整合核心函数）

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>计数：{{ count }}</p>
    <p>双倍计数：{{ doubleCount }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
// 1. 导入核心函数
import { ref, computed, watch, onMounted } from 'vue'

// 2. Props 接收
defineProps({
  title: String
})

// 3. 响应式数据
const count = ref(0)

// 4. 计算属性
const doubleCount = computed(() => count.value * 2)

// 5. 方法
const add = () => count.value++

// 6. 侦听
watch(count, (val) => {
  console.log('计数变为：', val)
})

// 7. 生命周期
onMounted(() => {
  console.log('组件初始化完成')
})
</script>

---

总结

1. 基础数据用 ref，对象/数组用 reactive
2. 派生数据用 computed，监听变化用 watch/watchEffect
3. 组件通信：defineProps（父→子）、defineEmits（子→父）
4. 生命周期核心：onMounted（请求数据）、onUnmounted（清理）
5. 解构响应式对象：必用 toRefs

这些是 Vue 3 开发最核心、最常用的函数，掌握它们就能完成绝大多数业务开发。