Vue 3 快速上手 + 项目结构整理笔记

记录一次 Vue 3 项目的快速起步过程，以及项目结构的基本整理方式，便于后续搭项目参考。

---

一、初始化项目（使用 Vite）

使用官方推荐的方式通过 Vite 创建 Vue 3 项目：

npm create vite@latest my-vue3-app

流程中选择：

• 框架选择：Vue
• 语言选择：JavaScript 或 TypeScript

然后进入目录，安装依赖并启动项目：

cd my-vue3-app
npm install
npm run dev

访问 http://localhost:5173/ 即可看到项目运行。

---

二、默认目录结构

my-vue3-app/
├── public/            # 静态资源（原样复制）
├── src/
│   ├── assets/        # 静态资源（推荐）
│   ├── components/    # 公共组件
│   ├── App.vue        # 根组件
│   ├── main.js        # 项目入口
├── index.html         # HTML 模板
├── vite.config.js     # Vite 配置文件
└── package.json

---

三、推荐结构扩展

常用项目结构：

src/
├── api/               # 接口请求模块
├── assets/            # 图片、SVG、样式
├── components/        # 通用组件
├── hooks/             # 自定义组合函数
├── router/            # 路由模块
├── store/             # 状态管理（Vuex / Pinia）
├── styles/            # 全局样式（reset、变量）
├── utils/             # 工具函数封装
├── views/             # 页面组件
├── App.vue
├── main.js

---

四、基础语法变化

Vue 3 推荐使用 Composition API，开发逻辑更清晰。

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">点击 {{ count }}</button>
</template>

• <script setup> 是组合式语法糖
• ref 创建响应式变量
• 所有变量在 template 中可直接使用

---

五、路径别名配置（vite.config.js）

配置 @ 为 src/ 路径别名：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

---

六、调试工具

• 浏览器中可用 Vue Devtools 查看组件状态
• 推荐调试时启用 <script setup> 的名称显示：defineOptions({ name: 'CompName' })

---

七、小结

Vue 3 项目推荐使用 Vite 进行初始化。结构方面建议拆分为组件、页面、状态、接口、样式等模块，方便后期维护和扩展。