vue怎么调github

要使用GitHub来托管Vue项目，需要进行以下步骤：

1. 在GitHub上创建一个新的仓库：在GitHub上登录或注册账号，在页面右上角的加号按钮中选择”New repository”，填写仓库的名称和描述，然后点击”Create repository”按钮。

2. 将本地的Vue项目与GitHub仓库关联：在项目的根目录下打开命令行或终端窗口，执行以下命令：

“`
git init
git remote add origin 仓库的URL
“`

这样就将本地项目与GitHub仓库关联起来了。

3. 将代码提交到GitHub仓库：执行以下命令将代码提交到GitHub：

“`
git add .
git commit -m “提交的描述信息”
git push origin master
“`

这样就将本地的代码提交到了GitHub仓库的master分支上。

4. 查看代码是否提交成功：打开GitHub仓库的页面，点击”Code”页签，就可以看到刚才提交的代码文件了。

至此，就完成了将Vue项目提交到GitHub的操作。你可以通过Git命令继续进行代码的管理，例如创建分支、合并代码、回滚等操作。

要在Vue中调用GitHub API，可以按照以下步骤进行：

1. 创建一个GitHub帐户：首先，你需要在GitHub上创建一个帐户，如果还没有的话。访问 https://github.com/ 并遵循指示进行注册。

2. 创建一个新的GitHub仓库：登录到GitHub帐户后，点击右上角的“+”按钮，然后选择“New repository”创建一个新的仓库。为你的仓库命名，选择公开或私有，然后点击“Create repository”。

3. 获取GitHub API访问令牌：为了通过Vue应用访问GitHub API，你需要生成一个访问令牌。在GitHub仓库页面的导航栏中，点击“Settings”，然后选择“Developer settings”下的“Personal access tokens”。点击“Generate new token”，为你的令牌提供一个描述，然后勾选你需要的权限。最后，点击“Generate token”，并将生成的访问令牌复制到备忘录中。

4. 在Vue项目中安装axios：在命令行中导航到你的Vue项目目录，并运行以下命令来安装axios：
“`
npm install axios
“`

5. 添加axios到Vue实例：在Vue项目中的main.js文件中，添加以下代码来导入axios：
“`
import axios from ‘axios’
Vue.prototype.$http = axios
“`

6. 使用axios发送GET请求：现在，你可以在Vue组件中使用axios来发送GET请求。在需要访问GitHub API的组件中，使用以下代码发送请求并处理响应：
“`
this.$http.get(‘https://api.github.com/repos/你的用户名/你的仓库名’)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
“`
将“你的用户名”和“你的仓库名”替换为你在步骤2中创建的实际值。

这些步骤将允许你在Vue应用中调用GitHub API，并获取仓库的相关数据。你还可以使用其他GitHub API端点，根据你的需求进行调用和处理响应。

调用GitHub API 是一种获取和操作GitHub上数据的常见方法。在使用Vue进行GitHub API 调用之前，需要先申请一个GitHub API 的Access Token。

下面，我将为您详细介绍如何使用Vue调用GitHub API，包括安装Vue、创建Vue项目，以及使用axios进行API调用。

## 步骤一：安装Vue

首先，确保您的开发环境中已经安装了Node.js 和npm。然后，打开命令行工具，执行以下命令来安装Vue CLI：

“`
npm install -g @vue/cli
“`

安装完成后，可以使用 `vue –version` 命令来验证安装结果。

## 步骤二：创建Vue项目

接下来，使用Vue CLI 创建一个新的Vue项目。在命令行工具中执行以下命令：

“`
vue create github-api-demo
“`

然后，根据提示选择您需要的Vue配置选项。一般来说，选择默认配置即可。

创建完毕后，切换到项目目录：

“`
cd github-api-demo
“`

## 步骤三：安装axios

接下来，需要安装用于发送HTTP请求的axios。在项目目录下执行以下命令：

“`
npm install axios
“`

## 步骤四：使用axios调用GitHub API

在src目录下创建一个api文件夹，并在其中新建一个github.js文件。在该文件中，编写以下代码：

“`javascript
import axios from ‘axios’;

const BASE_URL = ‘https://api.github.com’;
const ACCESS_TOKEN = ‘YOUR-GITHUB-ACCESS-TOKEN’; // 替换成您自己的Access Token

const client = axios.create({
baseURL: BASE_URL,
headers: {
Authorization: `Bearer ${ACCESS_TOKEN}`
}
});

export default {
getUser: username => {
return client.get(`/users/${username}`);
},
getRepositories: username => {
return client.get(`/users/${username}/repos`);
}
}
“`

在上述代码中，我们使用axios创建了一个HTTP客户端，并设置了请求的基础URL和授权头部信息。在`getUser`和`getRepositories`方法中，我们使用client发送了GET 请求来获取用户和仓库信息。

## 步骤五：使用GitHub API

接下来，在Vue组件中使用GitHub API。我们在src目录下的App.vue文件中添加以下代码：

“`html

“`

在上述代码中，我们使用`v-model`绑定了输入框的值到`username`属性，并在`form`元素上添加了一个监听器，当表单提交时，调用`getUserInfo` 方法。在 `getUserInfo`方法中，我们调用`github.getUser` 获取用户信息，并将响应的数据保存到`user`属性中。

## 步骤六：运行和测试

最后，执行以下命令来启动Vue开发服务器：

“`
npm run serve
“`

在浏览器中打开 http://localhost:8080 即可看到一个简单的页面，输入GitHub用户名并点击搜索按钮，即可通过GitHub API 获取到该用户的信息并展示出来。

以上就是使用Vue调用GitHub API 的方法和操作流程。希望对您有所帮助！