# Vue3+ts+pinia

**Repository Path**: chou-she/vue3-ts-pinia

## Basic Information

- **Project Name**: Vue3+ts+pinia
- **Description**: 使用了Vue3+pinia+typescript进行开发的后台管理系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-01-12
- **Last Updated**: 2025-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, Pinia, Axios, element-plus

## README

#  **Vue3 + TypeScript + Vite + Pinia 开发的后台管理系统系统** 
***
# 效果预览图：
### Admin身份:  ![输入图片说明](public/admin.gif)
***
### Common身份: ![输入图片说明](public/common.gif)
***
# 技术栈
- 1. 使用了VUE3的setup语法糖搭配TS进行开发
- 2. 使用了ElementPlus UI框架进行UI设计的开发
- 3. 利用了Pinia等状态管理工具处理数据的交互
- 4. 使用axios对ajax请求进行封装处理，与后台交互数据
- 5. 利用了mockJS对部分数据进行了部分数据的模拟
- 6. 使用了Echarts等数据可视化的框架进行对数据的可视化开发
- 7. ....
***
# 模块分类
- **商品管理模块，订单模块，数据可视化模块，权限模块，用户模块，用户登录模块**

***
# 模块功能
#### 用户登录模块
    1.判断用户token以确定登录用户的身份，再登录    2.判断用户token，以确定对应拥有权限，再对功能列表进行展示    3.判断用户TOKEN，生成对应个人信息
***
#### 商品管理模块：
 #####     **1**.进行商品列表的管理：
            1.1.进行商品列表的展示。      1.2.输入商品ID以展示对应商品详细信息。     1.3.可以对商品进行添加删除修改的操作`
 #####     **2**.进行商品分类的管理：
            2.1.对所有商品一二三级分类的展示。     2.2.可以对商品分类进行增加删除修改的操作`
 #####     **3**.进行商品分类参数的管理：
            3.1.选择某一分类，对其动态参数或静态属性进行展示。      3.2.可以对商品分类参数进行增加删除修改的操作`
***
#### 订单模块：
         1.对订单列表信息进行展示。    2.可以根据订单ID查询获取对应的订单详情    3.可以在对应订单行按详情键查看详细订单详情    4.查看mock数据展示的对应物流信息 

***
#### 权限模块：
#####  **1**.对所有的权限列表信息进行展示
#####  **2**.对用户角色进行管理
        2.1 可以查看对应角色所拥有的权限    2.2 可以对角色进行增加删除编辑的操作    2.3 对角色进行权限的分配
***
#### 用户模块：
        1.对所有用户信息进行展示    2.可以对用户进行增加删除修改查询的操作    3.可以对用户进行角色的修改