How to use external plug-ins in Vue components


Take Axios for exampleThere are three steps to using external plug-ins

  1. Package (install external plug-in)

    NPM I Axios / / run the command in the corresponding directory

  2. Import package (import external plug-ins in a single file component)

    import axios from “axios”

  3. Use the package (in the corresponding code location)

    Use the same as before, how to use or how to use



    <input type="text" v-model="searchValue" />
    < button @ Click = "getmusic" > Click me < / button >
      <li v-for="(item, index) in songs" :key="index">{{}}</li>
//Use Axios 1: install Axios, NPM I Axios 2: import Axios from "Axios" 3: use
//Guide Package
import axios from "axios";
export default {
  data() {
    return {
      SearchValue: the value of the // input box
      songs: []
  methods: {
    getMusic() {
      //How to use it before and how to use it now
        url: "" + this.searchValue,
        method: "get"
      }).then(res => {
        this.songs =;

Recommended Today

Deep understanding of HTTP protocol

*Foreword: I’d like to share with you an article about my experience since I developed it, Let’s share a personal understanding of HTTP* -MaojialešŸ˜Š What are the methods of HTTP? HTTP 1.0 defines three request methods: get, post and head HTTP1.1 adds five request methods: options, put, delete, trace and connect What are the specific […]