vue cli如何连接后端

Vue CLI可以通过axios等HTTP客户端库来连接后端。以下是一些步骤：

1. 安装axios库

在终端中输入以下命令来安装axios库：

npm install axios --save

2. 创建一个API模块

在src目录下创建一个api目录，并在其中创建一个index.js文件。

在index.js文件中，可以使用axios库来定义与后端通信的API方法。例如：

import axios from 'axios'

export default {
  // 获取用户列表
  getUsers() {
    return axios.get('/api/users')
  },

  // 获取单个用户
  getUser(id) {
    return axios.get(`/api/users/${id}`)
  },

  // 创建用户
  createUser(user) {
    return axios.post('/api/users', user)
  },

  // 更新用户
  updateUser(id, user) {
    return axios.put(`/api/users/${id}`, user)
  },

  // 删除用户
  deleteUser(id) {
    return axios.delete(`/api/users/${id}`)
  }
}

在这个例子中，我们定义了5个方法来获取、创建、更新和删除用户。这些方法使用了axios库来发送HTTP请求到后端API。

3. 在组件中使用API

在Vue组件中，可以使用API模块来调用后端API。例如：

import api from '@/api'

export default {
  data() {
    return {
      users: []
    }
  },

  mounted() {
    api.getUsers()
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在这个例子中，我们在组件的mounted钩子函数中调用了API模块中的getUsers方法，并将返回的用户列表保存到组件的数据中。

这就是使用Vue CLI连接后端的基本步骤。需要注意的是，在实际的项目中，可能需要对API模块进行更复杂的配置和封装，以满足具体的业务需求。