前言

毕设开干！我将会在这里记录每一天的进度！！！加油加油加油！

---

一、项目初构

项目名称：疫情实时展示设计（移动端）

项目简介：本项目基于Vue.js搭建了一个疫情实时展示系统，根据国家卫健委以及世界卫生组织、Worldometer Coronavirus等渠道获取到的疫情数据，展示全球实时疫情情况并做数据分析。利用所收集的数据将各省累计确诊人数的时空分布用地图、折线图、堆叠条形图等形式呈现出来，让用户能够通过可视化数据直观地了解到全球疫情情况。
同时页面还会推送防疫一线新闻、防护小知识。并且提供风险地区查询、各地隔离政策以及同乘查询等功能。

开发环境：
1、Node.js
2、开发工具：Git、WebStorm、vscode
3、开发语言：Vue.js、 HTML+CSS3+JavaScript
4、重点依赖库：Echarts、elementUI、websocket、axios
5、第三方插件：使用less预编译器、echarts图标工具、轮播图swiper、vant移动端UI库

二、创建项目

1.gitee新建项目DataPlatform

新建文件夹Project，文件夹内使用PowerShell创建项目，项目名称为dataplatform（不可使用大写）。
命令：vue create dataplatform

项目基本信息：
“vue”: “^2.6.11”,
“vue-router”: “^3.2.0”,
“vuex”: “^3.4.0”
“@vue/cli-service”: “~4.5.0”,

dataplatform文件夹：
右键 git bash here
输入 git init 创建.git文件夹。
关联远程仓库：
git remote add origin https://gitee.com/min-mengping/data-platform.git
git push -u origin "master"或者 右键提交。

2.下载VScode插件Gitee

三、项目初始化

1.CSS初始化（属于static文件） 使用less预编译器

网上搜索reset css相关资源
新建文件夹assets/common/reset.css
less预编译器
npm install css-loader style-loader --save-dev
npm install less less-loader --save-dev

报错：Syntax Error: TypeError: this.getOptions is not a function
原因：less-loader的版本过高
解决方法：重新安装低版本
使用：

<style lang="less" scoped>

</style>

2.安装axios

npm i axios --save

3.新建工具文件夹

src/utils

4.新建接口文件夹src/api

用作公共配置：接口 请求方法
api里面新建两个文件，并且进行基础的配置。
base.js：所有网络请求的地址
index.js：所有网络请求的方法