Vue实战：打造GitHub搜索案例，两小时巩固并深化你的Vue知识

2023-03-02 20:04:47

深入剖析 GitHub 搜索案例：使用 Vue 和 Vuex 构建一个动态的搜索应用程序

简介

Vue.js 是一个功能强大的前端框架，因其简洁性、响应性和强大的生态系统而备受推崇。为了展示 Vue 的实际应用，我们将引导您构建一个 GitHub 搜索案例。通过这个项目，您将掌握 Vue 的核心概念，包括组件、数据绑定和生命周期钩子，同时深入了解 Vuex 状态管理和 GitHub API。

项目概览

GitHub 搜索案例允许用户输入搜索词，并显示与之匹配的 GitHub 仓库列表。我们将利用 Vuex 来管理搜索词和仓库数据，并通过 GitHub API 获取仓库信息。

步骤详解

1. 项目搭建

使用 Vue CLI 创建一个新的 Vue 项目：

vue create github-search

2. 安装依赖项

安装所需的依赖项：

npm install vue-router vuex axios

3. 创建路由

定义页面跳转的路由：

import VueRouter from 'vue-router'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Search
    }
  ]
})

4. 创建仓库列表组件

显示搜索结果的组件：

<template>
  <ul>
    <li v-for="repo in repos" :key="repo.id">
      {{ repo.full_name }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['repos'],
}
</script>

5. 创建搜索组件

接受搜索词并触发搜索的组件：

<template>
  <form @submit.prevent="search">
    <input type="text" v-model="searchQuery">
    <button type="submit">搜索</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    search() {
      this.$router.push({
        path: '/',
        query: { q: this.searchQuery }
      })
    }
  }
}
</script>

6. 创建 Vuex 存储

管理搜索词和仓库数据的 Vuex 存储：

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    searchQuery: '',
    repos: []
  },
  mutations: {
    setSearchQuery(state, query) {
      state.searchQuery = query
    },
    setRepos(state, repos) {
      state.repos = repos
    }
  },
  actions: {
    search({ commit, state }) {
      axios.get(`https://api.github.com/search/repositories?q=${state.searchQuery}`)
        .then(res => commit('setRepos', res.data.items))
    }
  }
})

7. 组合组件

将所有组件集成到一个完整的应用程序中：

<template>
  <div>
    <search></search>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  components: { Search }
}
</script>