# vue-code

**Repository Path**: veo6/vue-code

## Basic Information

- **Project Name**: vue-code
- **Description**: vue练习demo
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-05
- **Last Updated**: 2022-05-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vite, TypeScript, Pinia, vue-router

## README

# Vue 3 Demo

## 一、使用技术

- Vue3
- Element-plus
- Less
- Axios
- MockJs
- Pinia
- Vue-Router
- TypeScript
- Moment

## 二、主要功能

- 用户登录，路由导航，滑动验证
- 动态路由，面包屑功能实现
- 基于Mock数据模拟，实现用户的管理，添加、删除修改，查看，批量删除
- ToDos列表功能，保存到浏览器中
- 商品管理表格实现添加标签和删除功能

## 三、主要界面

1. 登录界面

   ![image-20220521193242559](img/image-20220521193242559.png)

2. 滑动验证

   ![image-20220521193259833](img/image-20220521193259833.png)

3. 用户管理界面

   ![image-20220521193325384](img/image-20220521193325384.png)

4. ToDos列表界面

   ![image-20220521193421124](img/image-20220521193421124.png)

5. 商品列表界面

   ![image-20220521193446262](img/image-20220521193446262.png)

## 四、项目运行

1. 安装node，配置环境
2. 下载项目代码，控制台打开项目根目录
3. `npm i`命令控制台输入，下载项目依赖
4. `npm run dev`命令，运行项目，自动打开浏览器
5. 账号密码相同，输入已下任一账号，账号一：`admin`，账号二：`fox`，账号三：`guest`