GitHub：https://github.com/baiyuliang/Qrobot_Vue

Complete project structure:

Next, start modifying the project you just created!

Open main.js and introduce relevant plug-ins. The network request plug-in of this project is AXIos and THE UI is Vant.

The first method of using axios can be used in conjunction with vue-Axios:

import axios from "axios"
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios.create({
    baseURL: 'http://xxx.xxx.xxx'
}))
Copy the code

Call from the component’s methods:

  this.$http.get('/api/xxx').then(res= > {
       if (res.status === 200) {
             console.log(res.data)
       }
  })
Copy the code

The second approach, the one used in this project, is to wrap AXIos:

import axios from 'axios'

const request = axios.create({
    baseURL: 'https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat'.// Tencent chat API
    timeout: 8000
})

/ / request
request.interceptors.request.use(
    config= > {
        return config
    },
    error= > {
        return Promise.reject(error)
    }
)

/ / response to intercept
request.interceptors.response.use(
    response= > {
        console.log(response.data)
        const res = JSON.parse(response.data)
        console.log(res.ret)
        if(res.ret ! = =0) {
            return Promise.reject(new Error(res.msg || 'Error'))}else {
            return res
        }
    },
    error= > {
        return Promise.reject(error)
    }
)

export default request

Copy the code

Call:

import request from "@/api/base/request";
function getChatResponse(text) {
    return request({
        url:'? text='+text,
        method: 'get'})}Copy the code

This project is considering the actual development scenario, so the network request part is placed separately under the API folder, and each component of the network request will create a pair of APIxxx. js, to ensure a clear structure!

Vant puts the index.js reference in the UI folder!

main.js:

import Vue from 'vue'
import App from './App.vue'

require('@/ui/index')

Vue.config.productionTip = false

new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code

Now that the network and UI plug-ins are configured, the custom components and layout are complete!