Vue cli installation and basic use of axios

 

Vue cli is a very convenient scaffold, which can be installed according to the rookie tutorial

Address: http://www.runoob.com/vue2/vue-install.html

Just follow the rookie tutorial all the way. If there is no npm or cnpm (Taobao image), please go to the node official website to download and install node. For the rest, see the related tutorials

 

 

 

After installation, go to the corresponding folder to install axios related dependencies

(-- save and - dev are not connected together, there will be some small problems)

npm install axios --save-dev

 

Write in main.js (global)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

//axios.defaults.withCredentials=true / / global request header, which is a common way to carry cookie s
// Axios. Defaults. Headers ['x-requested-with '] ='xmlhttprequest' / / another example
Vue.prototype.$axios = axios
Vue.config.productionTip = false

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

If only partial import is needed, it can be directly imported into the corresponding file

 

There are two methods (formats) used by axios:

Method 1:

<script>
export default {
      data(){
          return{
              info:[]
          }
      },
      methods:{

      },
      mounted(){
           //get or post, API is the interface address
           this.$axios.get('api',{
                 params:{  //params is not required for post: this part
                       //Request parameters
                 }
           }).then(res => {  //res is the return result
               //Your next operation example:
                this.info = res.data  //Store data
           }).catch(err => { //If the request fails, the error message will be captured
                 //err.response can get the error data returned by the server       
           })
      } 
}
</script>

Method two:

<script>
export default {
      data(){
          return{
              info:[]
          }
      },
      methods:{

      },
      mounted(){
           //get or post, API is the interface address
           this.$axios({
               method:'post',
               url:'api',
               data:{  //get here should be params
                  //Request parameters
               },
               //withCredentials:true, / / carry cookie s locally
               headers:{} //If you need to add a request header, you can write it here
           }).then(res => {  //res is the return result
               //Your next operation example:
                this.info = res.data  //Store data
           }).catch(err => { //If the request fails, the error message will be captured
                 //err.response can get the error data returned by the server       
           })
      } 
}
</script>

The above is how to use axios. The installation tutorial is from rookie