# Vue3Project

**Repository Path**: sky0535/Vue3Project

## Basic Information

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

## Statistics

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

## 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）

---

## 技术栈

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

---

## 功能概览

页面中有一个计数器和两张卡片：

- 顶部显示当前计数 `count`（初始值为 `1`）
- 左侧卡片：`BlogPost (选项式 API)`
  - 使用 Options API 编写
  - 通过自定义事件 `increase-by` 通知父组件增加计数
- 右侧卡片：`BlogPostSetup (组合式 API)`
  - 使用 `<script setup>` + Composition API 编写
  - 通过自定义事件 `reduce-by` 通知父组件减少计数
- 父组件 `App.vue` 中：
  - `increaseCount(num = 1)` 用于处理加法
  - `reduceCount(num = 1)` 用于处理减法
  - 通过 `ref` + `expose / defineExpose` 访问子组件中的 `content` 等数据

---

## 目录结构（简要）

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

  components/
    BlogPost.vue         # 选项式 API 示例组件（data + setup + ctx.expose）
    BlogPostSetup.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/BlogPost.vue`，对照注释理解 Options API 的写法：
   - `props` / `emits` / `data`
   - 在 `setup` 中使用 `getCurrentInstance` + `ctx.expose` 暴露数据给父组件
2. 打开 `components/BlogPostSetup.vue`，对照注释理解 Composition API 的写法：
   - `defineProps` / `defineEmits` / `ref`
   - 使用 `defineExpose` 向父组件暴露内部状态
3. 在 `App.vue` 中：
   - 修改 `increaseCount` / `reduceCount` 的逻辑，体验事件参数的变化
   - 调整 Tailwind 样式，尝试自定义布局和配色

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

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