# vue3_ts_demo

**Repository Path**: eric_ts/vue3_ts_demo

## Basic Information

- **Project Name**: vue3_ts_demo
- **Description**: 用于重新整理 Vue3 + TS 的知识点
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-19
- **Last Updated**: 2025-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite + element-plus

## 描述

初次创建时间：2025-09-11
后台管理模板，常用依赖和配置

## 依赖表

1. vue-router
2. element-plus
3. pinia
4. scss
5. unplugin-auto-import / unplugin-vue-components

## 实现功能列表

### 2025.9.11

1. 路由构建
2. scss导入 - 样式重置、字体兼容mixin

### 2025.9.12 - tag节点

1. 布局切换 - localStorage辅助pinia存储
2. 全局ElMessage提示

## 目录

```
├── src                              # 源代码目录
│   ├── assets                       # 静态资源目录
│   │   ├── styles                   # 样式文件目录
│   │   │   ├── common.scss          # 公共样式
│   │   │   ├── index.scss           # 样式入口文件
│   │   │   ├── mixin.scss           # SCSS混合宏
│   │   │   ├── reset.scss           # 样式重置
│   │   │   ├── theme.scss           # 主题样式
│   │   │   └── var.scss             # SCSS变量
│   │   └── vue.svg                  # Vue图标
│   ├── components                   # 全局组件目录
│   │   ├── header                   # 头部组件目录
│   │   │   └── SettingsButton.vue   # 设置按钮组件
│   │   └── HelloWorld.vue           # 示例组件
│   ├── layout                      # 布局组件目录
│   │   ├── components              # 布局子组件
│   │   │   ├── Navbar.vue          # 导航栏组件
│   │   │   └── Sidebar.vue         # 侧边栏组件
│   │   ├── HeaderMain.vue          # 顶部导航布局
│   │   └── MenuMain.vue            # 侧边栏布局
│   ├── router                      # 路由配置目录
│   │   └── index.ts                # 路由入口文件
│   ├── stores                      # 状态管理目录
│   │   ├── index.ts                # 状态管理索引文件
│   │   ├── settings.ts             # 设置状态模块
│   │   └── types.ts                # 类型定义文件
│   ├── views                       # 页面视图目录
│   │   ├── Login                   # 登录页面目录
│   │   │   └── index.vue           # 登录页面
│   │   ├── Manage                  # 管理页面目录
│   │   │   ├── About.vue           # 关于页面
│   │   │   ├── Hello.vue           # Hello页面
│   │   │   ├── Home.vue            # 首页页面
│   │   │   └── index.vue           # 管理页面入口
│   │   └── NotFound.vue            # 404页面
│   ├── App.vue                     # 根组件
│   ├── global.d.ts                 # 全局类型声明
│   ├── main.ts                     # 入口文件
│   └── vite-env.d.ts               # Vite环境类型声明
├── README.md                       # 项目说明文档
├── auto-imports.d.ts               # 自动导入类型声明
├── components.d.ts                 # 组件类型声明
├── index.html                      # HTML入口文件
├── package-lock.json               # 依赖版本锁定文件
├── package.json                    # 项目配置和依赖文件
├── tsconfig.app.json               # 应用TypeScript配置
├── tsconfig.json                   # TypeScript配置文件
├── tsconfig.node.json              # Node.js TypeScript配置
└── vite.config.ts                  # Vite配置文件
```