# Vue3Project

**Repository Path**: sky0535/Vue3Project

## Basic Information

- **Project Name**: Vue3Project
- **Description**: Vue3 学习项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-17
- **Last Updated**: 2026-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite + Tailwind CSS 学习示例

这是一个基于 **Vue 3**、**Vite** 和 **Tailwind CSS v4** 搭建的学习项目，主要用于练习：

- 在 Vite 中集成 Tailwind CSS v4
- Vue 3 选项式 API（Options API）与 组合式 API（Composition API）的对比
- 父子组件之间的通信方式（props、emit、自定义事件、expose）
- 响应式数据（`ref` / `reactive`）与表单双向绑定（`v-model`）

---

## 技术栈

- **框架**：Vue 3
- **构建工具**：Vite
- **样式**：Tailwind CSS v4（使用 `@tailwindcss/vite` 插件）
- **包管理工具**：pnpm

---

## 功能概览

### 计数器

页面顶部显示当前计数 `count`（两个子组件挂载后各派发一次事件，初始结果为 `1`）：

- 左侧卡片：`WidgetOptions (选项式 API)`
  - 使用 Options API 编写
  - 通过自定义事件 `increase-by` 通知父组件增加计数
- 右侧卡片：`WidgetComposition (组合式 API)`
  - 使用 `<script setup>` + Composition API 编写
  - 通过自定义事件 `reduce-by` 通知父组件减少计数
- 父组件 `App.vue` 中：
  - `increaseCount(num = 1)` 用于处理加法
  - `reduceCount(num = 1)` 用于处理减法
  - 通过 `useTemplateRef` + `expose / defineExpose` 访问子组件暴露的 `title`、`content` 数据

### 用户信息

页面下方的「用户信息」卡片展示并支持修改一个 `reactive` 对象：

- **姓名**：通过 `v-model` 与输入框双向绑定，输入即更新
- **年龄**：通过「− / +」按钮修改，由 `reduceAge` / `increaseAge` 函数处理；
  `reduceAge` 内部保证年龄不小于 `0`，减号按钮在年龄为 `0` 时禁用
- **实时预览**：右侧区域响应式展示最新的姓名和年龄，姓名为空时显示占位文本

---

## 目录结构（简要）

```text
src/
  App.vue                    # 页面布局、计数逻辑与用户信息，父组件
  main.js                    # 入口文件，引入全局样式
  style.css                  # 引入 Tailwind，并通过 @config 关联 tailwind.config.js

  components/
    WidgetOptions.vue        # 选项式 API 示例组件（data + setup + ctx.expose）
    WidgetComposition.vue    # 组合式 API 示例组件（<script setup> + ref + defineExpose）

tailwind.config.js           # Tailwind 配置（content 路径、自定义 brand-vue 颜色等）
vite.config.js               # Vite 配置，启用 @tailwindcss/vite、Vue 插件、DevTools 等
```

---

## 安装与运行

在项目根目录执行以下命令。

### 安装依赖

```sh
pnpm install
```

### 启动开发环境（带热更新）

```sh
pnpm dev
```

启动后在控制台中查看本地访问地址（通常为 `http://localhost:5173`）。

### 生产环境构建

```sh
pnpm build
```

构建产物会输出到 `dist` 目录，可部署到任意静态服务器。

---

## 关键配置说明

### Tailwind CSS

- 在 `tailwind.config.js` 中：
  - 配置了 `content` 路径，指向 `index.html` 和 `src/**/*.{vue,js,ts,jsx,tsx}`
  - 通过 `theme.extend.colors.brand-vue` 定义了自定义颜色
- 在 `src/style.css` 中：
  ```css
  @import "tailwindcss";
  @config "../tailwind.config.js";
  ```
  用于启用 Tailwind v4 并关联配置文件。

### Vite 配置

- `vite.config.js` 中启用了：
  - `@vitejs/plugin-vue`               —— 支持 Vue 单文件组件
  - `vite-plugin-vue-devtools`         —— 浏览器中使用 Vue DevTools
  - `vite-plugin-inspect`              —— 调试 Vite 插件的工具
  - `@tailwindcss/vite`                —— Tailwind v4 官方 Vite 插件

---

## 学习建议

如果你正在学习 Vue 3 和 Tailwind，可以尝试：

1. 打开 `components/WidgetOptions.vue`，对照注释理解 Options API 的写法：
   - `props` / `emits` / `data`
   - 在 `setup` 中使用 `getCurrentInstance` + `ctx.expose`，以 getter 方式暴露 `title` 和 `content`
2. 打开 `components/WidgetComposition.vue`，对照注释理解 Composition API 的写法：
   - `defineProps` / `defineEmits` / `ref`
   - 使用 `defineExpose` 向父组件暴露内部状态，并用 `toRef` 保持 `title` 的响应式关联
3. 在 `App.vue` 中：
   - 修改 `increaseCount` / `reduceCount` 的逻辑，体验事件参数的变化
   - 观察 `ref`（`.value` 访问）与 `reactive`（直接访问属性）的区别
   - 体验 `v-model` 双向绑定与按钮事件处理（`reduceAge` 中的边界校验）
   - 调整 Tailwind 样式，尝试自定义布局和配色

你也可以在此基础上继续扩展，例如：

- 新增更多使用 Options API / Composition API 的组件
- 集成 Vue Router，拆分多个页面
- 使用 Pinia 或其他状态管理方案管理全局状态