# vue

**Repository Path**: wangxe813/vue

## Basic Information

- **Project Name**: vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-09
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 电商后台管理系统
### 功能

> 用于管理用户账号，商品分类，商品信息，订单，数据统计等业务功能

![img](https://gitee.com/wangxe813/vue/raw/master/images/vuemain.png)

### 开发模式

* 电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于Vue技术栈的SPA项目

## 技术选型

### 前端项目技术栈

- Vue
- Vue-router
- Element-UI
- Axios
- Echarts

### 后端项目技术栈

- Node.js
- Express
- Jwt
- Mysql
- Sequelize

## 项目初始化

### 前端项目初始化步骤

1. 安装 Vue 脚手架
2. 通过 Vue-Cli 创建项目
3. 配置 Vue-router
4. 配置 Element-UI 组件库
5. 配置 Axios 库
6. 初始化 git 远程仓库

### 相关依赖-按需导入

![img](https://gitee.com/wangxe813/vue/raw/master/images/vueyi.png)

### 相关插件

![](https://gitee.com/wangxe813/vue/raw/master/images/vuecha.png)

### 后端项目的环境安装配置

1. 安装MySQL数据库
2. 安装Node.js环境
3. 配置项目相关信息
4. 启动项目
   1. 使用phpstudy导入数据库并运行
   2. npm init 后端项目
   3. node ./app.js
5. 使用Postman测试后台项目接口是否正常

## 部分界面展示：

### 登录界面

![登录界面](https://cdn.jsdelivr.net/gh/wangzy813/wangxe/img/vuea.png)

### 首页

![首页](https://cdn.jsdelivr.net/gh/wangzy813/wangxe/img/vueb.png)

### 用户列表界面

![用户列表界面](https://cdn.jsdelivr.net/gh/wangzy813/wangxe/img/vuec.png)

### 角色列表界面

![角色列表界面](https://cdn.jsdelivr.net/gh/wangzy813/wangxe/img/vuee.png)

### 商品分类界面

![商品分类界面](https://cdn.jsdelivr.net/gh/wangzy813/wangxe/img/vued.png)

### 数据报表界面

![数据报表界面](https://cdn.jsdelivr.net/gh/wangzy813/wangxe/img/vue.png)