前言

第二天啦！！！加油加油加油！

一、1、创建CovidInfo.vue和CovidNum.vue文件

CovidInfo.vue：疫情简介
CovidNum.vue：疫情数据
在这里插入图片描述
报错：中途出现页面不显示的情况。
原因：写name的时候没有加单引号。

解决方法：更改Vue模板
文件->首选项->用户片段->选择vue.json

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
  
	"Print to console": {
	  "prefix": "log",
	  "body": [
		"console.log('$1')",
		"$2"
	  ],
	  "description": "Log output to console"
	},
	"Create VUE template": {
	  "prefix": "vue",
	  "body": [
		"<template>",
		  "  <div>",
		  "    $1",
		  "  </div>",
		"</template>",
		"",
		"<script>",
		"// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
	

		"",
		"export default {",
		"  name:  '',",
		"  components: {",
		"    $3",
		"  },",
		"  // 定义属性",
		"  data() {",
		"    return {",
		"      $2",
		"    }",
		"  },",
		"  // 计算属性，会监听依赖属性值随之变化",

		"  computed: {},",
		"  // 监控data中的数据变化",
		"  watch: {},",
		"  // 方法集合",
		"  methods: {",
		"    $3",
		"  },",
		"  // 生命周期 - 创建完成（可以访问当前this实例）",
		"  created() {",
		"    $4",
		"  },",
		"  // 生命周期 - 挂载完成（可以访问DOM元素）",
		"  mounted() {",
		"    $5",
		"  },",
		"  beforeCreate() {}, // 生命周期 - 创建之前",
		"  beforeMount() {}, // 生命周期 - 挂载之前",
		"  beforeUpdate() {}, // 生命周期 - 更新之前",
		"  updated() {}, // 生命周期 - 更新之后",
		"  beforeDestroy() {}, // 生命周期 - 销毁之前",
		"  destroyed() {}, // 生命周期 - 销毁完成",
		"  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发",
		"}",
		"</script>",
		"",
		"<style>",
		"  $6",
		"</style>"
	  ],
	  "description": "Create VUE template"
	}
  }

二、移动端适配

1.在header中放入首页图片，并进行移动端适配

在common.css里面加上：

html {
    /* 750px设计稿 根元素大小 100px  计算rem  */
    font-size: 13.333333vw;
}
body {
    line-height: 1;
    font-size: 14px;
    max-width: 750px;
    margin: 0 auto;
    color: #666;
}
/* 防止字体过大 */
@media (min-width: 750px) {
    html {
        font-size: 100px;
    }
}

三、注册挖数据

疫情网址请求：（全国疫情数据/国内城市疫情数据/全球疫情数据/国外疫情数据）
https://www.wapi.cn/api_detail/94/219.html
申请接口：新型肺炎疫情数据
在这里插入图片描述
通过Api测试工具，拿到地址：
请求地址：https://cspe.api.storeapi.net/api/94/219
MD5加密字符串：appid13847formatjson+密钥
sign:ce1d300a7fd3c3c4d56c7a0516fd05d0
请求方式：GET
请求参数：format=json&appid=13847&sign=ce1d300a7fd3c3c4d56c7a0516fd05d0