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

项目完整结构：

接下来，开始着手修改刚刚创建完成的项目！

打开main.js，引入相关插件，本项目的网络请求插件为axios，ui为vant。

关于axios的使用，第一种办法可以结合vue-axios使用：

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

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

在组件的methods中调用：

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

第二种办法，也就是本项目所使用的的方法：对axios进行封装：

import axios from 'axios'

const request = axios.create({
    baseURL: 'https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat',//腾讯闲聊api
    timeout: 8000
})

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

//response拦截
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

调用：

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

本项目是考虑到实际开发场景，因此将网络请求部分单独放在api文件夹下，且每个组件中的网络请求都会创建对用的ApiXXX.js，保证结构清晰！

vant则放在ui文件夹下的index.js引用！

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')

网络和ui插件已经配置完成，接下来就是自定义组件以及布局的完成！

下一篇