vue-組件中如何使用外部插件

以axios爲例使用外部插件分爲三步

1. 裝包（安裝外部插件）

   npm i axios //到相應目錄下執行該命令    

2. 導包（在單文件組件中導入外部插件）

   import axios from "axios"

3. 用包（在相應代碼位置使用）

   使用和之前同樣，該怎麼用仍是怎麼用

axios({
url:"xxx"
}).then(res=>{
})

DEMO

<template>
  <div>
    <input type="text" v-model="searchValue" />
    <button @click="getMusic">點我</button>
    <ul>
      <li v-for="(item, index) in songs" :key="index">{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
// 使用axios   1:安裝axios，npm i axios   2:導包  import axios from "axios"  3:使用
// 導包
import axios from "axios";
export default {
  data() {
    return {
      searchValue: "", //input框的值
      songs: []
    };
  },
  methods: {
    getMusic() {
      // 使用，之前怎麼用，如今還怎麼用
      axios({
        url: "https://autumnfish.cn/search?keywords=" + this.searchValue,
        method: "get"
      }).then(res => {
        this.songs = res.data.result.songs;
        window.console.log(this.songs);
      });
    }
  }
};
</script>
<style>
</style>