vue项目中可使用天气预报小组件vue-mini-weather案例

 

 

1、安装

npm i vue-mini-weather --save

2、引入

// 1. 全局引入

//main.js 项目入口文件
import Vue from 'vue'
import weather from 'vue-mini-weather'
Vue.use(weather)

//app.vue 项目文件
<template>
<v-mini-weather></v-mini-weather>
</template>

// 2. 局部引入
//app.vue 项目文件
<template>
<v-mini-weather></v-mini-weather>
</template>

<script>
import { vMiniWeather } from 'vue-mini-weather'
export default {
components: {
vMiniWeather
}
}
</script>

 

3.页面

<template>
<v-mini-weather></v-mini-weather>
</template>

<script>
import { vMiniWeather } from 'vue-mini-weather'
export default {
  components: {
    vMiniWeather,
  },
  created() {
    this.getWeather() // 获取天气    
  },
 methods: {
    // 获取天气
    getWeather() {
　　　　// '//'是解决掉指向加上vue里指向的后台地址http://localhost:8080问题
      axios.get('//' + 'http://www.weather.com.cn/data/cityinfo/101010100.html').then(function (res) {
        debugger
        this.weather = res.data.data.forecast[0].type ? res.data.data.forecast[0].type : ''
        this.lower = res.data.data.forecast[0].low.substr(2)
        this.higher = res.data.data.forecast[0].high.substr(2)
        console.log(res.data.data);
      }).catch(function (error) {
        console.log(error);
      });

    },
    }
}