Vue,Vue Cli,VueCli axios

VueCli axios安裝與使用

安裝vue-axios

axios 官網

1
npm install --save axios@0.26.1 vue-axios@3.4.1

在main.js
引入axios ＝>使用 VueAxios, axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'//引入axios
import VueAxios from 'vue-axios'//引入VueAxios

Vue.use(VueAxios, axios)
Vue.config.productionTip = false

axios.defaults.headers.post['Content-Type'] = ['application/json;charset=UTF-8']

/* eslint-disable no-new */
export const app = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在App.vue測試

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
import axios from 'axios'
export default {
  name: 'App',
  data () {
    return {
      info:[],
    }
  },
  created()  {
    this.getWeatherApi();
    this.getLists();
  },

  methods:{
    getWeatherApi(){
      const api =`${process.env.API_PATH}/data/2.5/forecast?q=Taipei,tw&APPID=${process.env.APP_ID}&lang=zh_tw&units=metric`;
      axios
      .get(api)
        .then(res => (
          this.info = res, console.log('info',this.info)
        ))
    },
    getLists (){
      const api ='https://api.coindesk.com/v1/bpi/currentprice.json';
      this.$http.get(api).then((res) => {
        console.log(res.data);
      });

    }
  },

}
</script>

axios 設置與使用