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>