# vuetify+tauri应用模板

**Repository Path**: kun_int/VuetifyAndTauri

## Basic Information

- **Project Name**: vuetify+tauri应用模板
- **Description**: 使用vuetifyUI组件库,以及tuari框架的,前端技术桌面应用模板
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-20
- **Last Updated**: 2025-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Tauri + Vuetify Todo 应用以及桌面应用模板

这是一个基于Vuetify和Tauri的Todo任务管理桌面应用程序٩(๑òωó๑)۶。它提供了一个美观、高效的待办事项管理工具，帮助用户组织日常任务，提高工作和生活效率(*,,ºัωºั,,)。

**注意想通过模板建立自己的项目请切换到`基本模板`分支**

## 特性

- **现代UI**: 基于Vuetify 3实现的Material Design界面
- **本地存储**: 使用localStorage存储数据（未来支持Tauri文件系统API）
- **分类管理**: 支持创建自定义分类并为任务分配不同分类
- **任务管理**: 支持添加、编辑、删除和标记完成任务
- **截止日期**: 设置任务截止日期并进行提醒
- **优先级**: 为任务设置不同的优先级
- **跨平台**: 支持Windows、macOS和Linux

## 功能模块

1. **任务管理**: 创建、查看、编辑和删除待办事项，支持标记任务完成状态、设置优先级和截止日期。
2. **分类系统**: 支持创建自定义分类，为不同分类设置不同颜色和图标，任务可归类到不同分类中。
3. **视图切换**: 提供今日任务、全部任务和分类视图。
4. **搜索过滤**: 支持按关键词搜索任务。
5. **设置面板**: 允许用户调整应用程序的各种设置，如主题选择、默认视图等。
6. **定制界面**: 自定义无边框窗口和标题栏，支持窗口控制。

## 技术栈

- **前端框架**: Vue 3
- **UI组件库**: Vuetify 3
- **状态管理**: Pinia 2
- **路由**: Vue Router 4
- **桌面应用框架**: Tauri 2
- **构建工具**: Vite

## 开始使用

### 系统要求

- Node.js (建议使用最新LTS版本)
- Rust (用于编译Tauri部分)
- npm 或 yarn

### 安装

1. 克隆仓库到本地:
    ```bash
    git clone <repository-url>
    cd todo-app
    ```

2. 安装依赖:
    ```bash
    npm install
    ```

3. 启动开发服务器:
    ```bash
    npm run dev
    ```

4. 启动Tauri开发模式:
    ```bash
    npm run tauri dev
    ```

5. 构建生产版本:
    ```bash
    npm run tauri build
    ```

## 项目结构

```
src/
├── components/         # UI组件
│   ├── todo/           # Todo相关组件
│   │   ├── TaskItem.vue    # 任务项组件
│   │   ├── TaskList.vue    # 任务列表组件
│   │   ├── TaskForm.vue    # 任务表单组件
│   │   ├── AddTask.vue     # 添加任务组件
│   │   └── CategoryList.vue # 分类列表组件
│   ├── mainAppStructure.vue # 应用主结构
│   └── appBar.vue      # 自定义标题栏
├── views/              # 视图页面
│   └── todo/           # Todo视图
│       ├── TodayView.vue    # 今日任务视图
│       ├── AllTasksView.vue # 全部任务视图
│       ├── CategoryView.vue # 分类视图
│       └── SettingsView.vue # 设置视图
├── stores/             # Pinia存储
│   ├── taskStore.js    # 任务存储
│   ├── categoryStore.js # 分类存储
│   └── settingsStore.js # 设置存储
├── router/             # 路由配置
│   └── router.js       # 路由定义
├── App.vue             # 根组件
└── main.js             # 应用入口
```

## 特别说明

本项目使用Vue 3的组合式API（Composition API）开发，充分利用了Vue 3的新特性。同时，它还基于Tauri框架实现桌面应用功能，相比Electron更轻量、更高效。

## 相关文档

- [Vue 3](https://v3.vuejs.org/) - 前端框架
- [Vuetify](https://vuetifyjs.com/) - UI组件库
- [Pinia](https://pinia.vuejs.org/) - 状态管理库
- [Vue Router](https://router.vuejs.org/) - 路由管理
- [Tauri](https://tauri.app/) - 桌面应用框架
- [Material Design Icons](https://pictogrammers.com/library/mdi/) - 图标库