# vue-echarts-visual

**Repository Path**: echoc/visual-vue

## Basic Information

- **Project Name**: vue-echarts-visual
- **Description**: 电商可视化平台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-31
- **Last Updated**: 2022-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于Vue的电商可视化平台

项目整体是按照bilibili教程走完

由于老师使用的是koa2，并且没有使用连接数据库，而我走的是go语言的后端(也接触过falsk和node.js)，所以直接使用Vue全家桶走一遍前端项目，接口直接使用现成的koa2接口数据。整个项目的主题换肤功能和整体布局的规范性是值得学习的。

欢迎提出意见和 star🌟~


💐[源码地址](https://gitee.com/echoc/data-visualization-vue)

### 进度

- [x] 主题换肤
- [x] 图标绘制
- [x] 组件合并
- [x] 代码规范
- [x] 调整UI
- [x] 主页基本布局设置

### 后端接口

https://gitee.com/echoc/vue-echarts-vision-api

### 技术栈

- **_Vue_** 全家桶 通过 Vue-CLI3 初始化生成。
- **_ElementUI_** 魔改样式。
- **_javascript_** 主题换肤。
- **_Less_**（CSS 预处理器）
- **_Vuex_**（管理项目的公共状态）
- **_Echarts_** 完成动态图标的绘制

### Screenshots

#### Dark主题

![image-20210805103634932](imgs/image-20210805103634932.png)

#### Light主题

![image-20210805103734862](imgs/image-20210805103734862.png)

### 安装与使用

```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```



### 项目相关问题

1. 使用flex布局的时候，子盒子设置成flex:1的时候无法满足自适应效果，并且放大缩小之后盒子的offsetWidth还是不变
2. Vue中的...（对象展开运算符）的理解
3. module.exports 和 exports 的区别
4. await aysnc 和 promise之间的区别和联系
5. computed(计算属性)深层次的理解
6. 数据发生变化之后为什么屏幕适应不能立马改变，而是采用nextTick之后会立即触发