# vue2-api-demo

**Repository Path**: weicracker/vue2-api-demo

## Basic Information

- **Project Name**: vue2-api-demo
- **Description**: vue2 api 简单 demo  方便公众查询
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-18
- **Last Updated**: 2025-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue2 API 演示项目

这是一个Vue2 API演示项目，旨在展示Vue2中常用的API和功能。通过这个项目，你可以学习Vue2的核心概念和常用功能。

## 项目功能

本项目包含以下Vue2常用功能的演示：

1. **路由功能**
   - 路由跳转
   - 路由传参
   - 路由替换
   - 动态路由

2. **组件通信**
   - 父子组件Props/事件传递
   - 事件总线(EventBus)
   - Provide/Inject
   - Vuex状态管理

3. **组件传参**
   - 基本属性传递
   - 动态属性绑定
   - 单向数据流
   - 非Prop属性透传

4. **Ref引用**
   - DOM元素引用
   - 组件实例引用
   - 在v-for中使用ref
   - ref使用时机

5. **高级特性**
   - 自定义指令 (v-focus, v-highlight, v-permission)
   - 过滤器 (日期格式化、货币格式化、文本截断等)
   - 插槽 (默认插槽、具名插槽、作用域插槽)
   - .sync修饰符 (父子组件双向绑定)

## 项目安装

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建生产版本
npm run build
```

## 项目结构

```
src/
|-- assets/          # 静态资源
|-- components/      # 公共组件
|-- router/          # 路由配置
|-- store/           # Vuex状态管理
|-- utils/           # 工具函数
|-- views/           # 页面视图组件
|-- App.vue          # 根组件
|-- main.js          # 入口文件
```

## 技术栈

- Vue 2.6
- Vue Router 3.5
- Vuex 3.6
- Tailwind CSS 2.2

## 注意事项

- 本项目使用Vue2，不适用于Vue3
- 使用了Tailwind CSS进行样式设计
- 所有示例都有详细的注释和说明

## 开发与维护

本项目用于学习和参考，欢迎提交改进建议和问题反馈。 


## 提示词：
> 帮我初始化一个 vue2 api  demo  项目 其中 包含 路由跳转 路由传参 路由替换 组件间传参 组件通信 ref 引用 等 常用的 api 功能  要求 界面简洁 有说明文档 实例显示等  可以使用 tailwind css 


## 高级功能
1. Vuex模块化管理
2. 复杂组件通信
3. 混入(mixins)和插件的使用
4. 高级组件封装

## 功能演示

本项目展示了多种Vue2+Vuex的使用场景：

1. **基础状态管理** - 展示Vuex的基本使用方法
2. **Vuex高级特性** - 展示模块化状态管理、辅助函数、插件等高级功能
3. **通知系统** - 使用Vuex实现全局通知系统
4. **权限管理** - 基于角色的权限控制系统，包含不同用户角色和资源访问控制
5. **Mixins混入** - 展示Vue2中混入(mixins)的使用方法和功能复用

## 特色功能

### 权限管理系统

项目实现了一个完整的基于角色的权限控制系统：

- **角色划分**：支持管理员、经理、编辑和普通用户等多种角色
- **权限检查**：每个角色对应不同的权限集合
- **资源访问控制**：基于权限控制页面元素的显示隐藏
- **权限验证**：在组件中使用`hasPermission`检查用户权限

示例：
```js
// 在组件中使用
computed: {
  ...mapGetters('user', ['hasPermission']),
  
  canEditContent() {
    return this.hasPermission('create_content')
  }
}
```

### 自定义指令

项目实现了多个常用自定义指令：

- **v-focus**: 自动聚焦指令，使元素自动获取焦点
- **v-highlight**: 文本高亮指令，突出显示文本中的关键词
- **v-permission**: 权限控制指令，根据用户权限控制元素显示/隐藏

示例：
```html
<!-- 自动聚焦输入框 -->
<input v-focus type="text">

<!-- 高亮关键词 -->
<p v-highlight="'Vue'">Vue是一个渐进式JavaScript框架</p>

<!-- 权限控制按钮 -->
<button v-permission="'admin:system'">系统设置</button>
```

### 过滤器系统

项目实现了多种常用的文本格式化过滤器：

- **formatDate**: 日期格式化过滤器
- **currency**: 货币格式化过滤器
- **truncate**: 文本截断过滤器
- **capitalize**: 首字母大写过滤器
- **numberFormat**: 数字千分位格式化过滤器

示例：
```html
<!-- 格式化日期 -->
<span>{{ date | formatDate('YYYY-MM-DD') }}</span>

<!-- 格式化货币 -->
<span>{{ price | currency('$') }}</span>

<!-- 截断长文本 -->
<p>{{ description | truncate(100) }}</p>
```

### 插槽系统

项目展示了Vue2中不同类型的插槽用法：

- **默认插槽**: 基本的内容分发机制
- **具名插槽**: 将内容分发到指定位置
- **作用域插槽**: 子组件向父组件传递数据的插槽

示例：
```html
<!-- 作用域插槽示例 -->
<data-table :data="users">
  <template v-slot:actions="{ item }">
    <button @click="edit(item)">编辑 {{ item.name }}</button>
  </template>
</data-table>
```

### .sync修饰符

项目演示了Vue2中使用.sync修饰符实现父子组件双向绑定的方法：

- **简化父子组件通信**: 通过.sync修饰符简化双向绑定的实现
- **多属性双向绑定**: 同时绑定多个属性并保持同步
- **双向绑定原理**: 展示.sync的底层实现机制

示例：
```html
<!-- 父组件中使用 -->
<child-component :title.sync="pageTitle" />

<!-- 等价于以下写法 -->
<child-component 
  :title="pageTitle"
  @update:title="val => pageTitle = val" 
/>

<!-- 子组件中触发更新 -->
this.$emit('update:title', newValue);
```

### 角色和权限映射

| 角色 | 权限 |
|------|------|
| 管理员 | 所有权限（管理用户、查看报表、创建内容、查看仪表盘等） |
| 经理 | 查看报表、创建内容、查看仪表盘 |
| 编辑 | 创建内容、查看内容 |
| 普通用户 | 仅查看内容 |

### Mixins混入系统

项目实现了完整的混入(mixins)功能示例：

- **表单验证混入**: 提供可复用的表单验证功能
- **日志记录混入**: 提供组件生命周期日志和事件记录功能
- **混入合并策略**: 展示Vue中不同类型选项的混入合并规则

Mixins允许我们将组件中可复用的功能抽离成可复用的模块，提高代码的可维护性和复用性。

示例：
```js
// 在组件中使用混入
import validationMixin from '@/mixins/validationMixin'
import loggingMixin from '@/mixins/loggingMixin'

export default {
  // 混入多个mixins
  mixins: [validationMixin, loggingMixin],
  
  methods: {
    // 使用混入提供的方法
    submitForm() {
      if (this.validateForm(this.formData)) {
        // 验证通过
        this.logInfo('表单提交成功');
      }
    }
  }
}
```