从 Vue 到 React，Vite 帮你快速搭建 GitHub Repositories 项目！

answerball
352 阅读8分钟

引言

亲爱的读者，今天我们要来一次技术双城记，一边是 Vue 的温柔乡，一边是 React 的自由风，我们将借助 Vite，搭建一个简单的 GitHub Repositories 项目，帮你快速学习如何使用 Vue 和 React 构建组件，同时还要对比一下这两位技术大佬，帮助你更好地理解它们的异同。准备好了吗？让我们开始这场编程之旅吧！

环境准备：Vite，我的工程小天使

首先，我们要给自己搭建一个友好的开发环境。Vite 是我们的忠实工程化助手，它不仅速度快，还让一切变得简单明了。无论你是 Vue 党还是 React 粉，Vite 都能帮你快速启动项目，提升开发效率。

安装 Vite

  1. 全局安装 Node.js：你需要在机器上安装最新版本的 Node.js，Vite 依赖于它。
  2. 初始化项目：接着，打开终端，输入以下命令来初始化你的项目：
# 选择 Vue 或 React 模板
npm init vite
# 然后输入项目包的名字例如我这里就是：React_repos 和 Vue_repos
# 让后根据需要选则需要的框架 vue 或者 react
# 最后选择Javascript

不管是 Vue 还是 React，Vite 都会为你生成一个简单的模板，帮助你快速启动。

生成如下的两个项目文件

image.png

src目录就是我们之后开发组件的核心区域了

在完成上述的操作我们还得，执行一个命令：

npm i

将依赖的包导入进去，在一般情况下我们开源项目是不会将包一起上传到git上的，因为包的所占的空间太大不利于我们在开发中的协作，所以我们一般会将所需要的包放在package.json中，当我们拿到外界的项目时我们都会首先执行npm i将依赖的包导入项目中(这也是我们需要养成的习惯)。

Vue 与 React：是“同一个世界”吗？

虽然 Vue 和 React 都是前端框架，但它们之间有不少区别。让我们深入挖掘一下这两位技术巨头的异同，看看它们如何构建出这个 GitHub Repositories 项目。

Vue 和 React 的相同点

  1. 组件化思想：Vue 和 React 都非常强调组件化。项目中的每一个功能模块都可以拆分成组件，简化开发和维护。无论是轮播图，还是 GitHub Repositories 组件，都可以封装成独立的模块。
  2. 响应式：Vue 和 React 都采用了响应式数据绑定的思想。当数据变化时，视图会自动更新，开发者不需要手动去操作 DOM，避免了繁琐的操作。
  3. 现代前端框架：Vue 和 React 都是前端开发的主力框架，它们都有完善的生态和强大的社区支持。你不必担心遇到问题没有人能解答。
  4. 工程化工具：Vue 和 React 都有专属的工程化工具链，Vue 有 Vue CLI，而 React 通常结合 Vite、Create React App 等工具来进行开发和构建。

Vue 和 React 的区别

  1. 文件结构：

    • Vue：Vue 是“三段式”的，文件后缀为 .vue，包括 template（HTML 部分）、script（JavaScript 部分）、style（CSS 部分）。这种方式让组件的逻辑、样式和视图都聚集在一个文件里，开发和维护起来非常方便。
    • React：React 使用 JSX 来定义组件，它将 HTML 和 JavaScript 结合在一起。组件就是一个 JavaScript 函数，返回 JSX，表现为一个“HTML-like”的结构。

  2. 模板和样式：

    • Vue：模板部分是 HTML，CSS 样式在组件内部，JS 逻辑通过 Vue 特有的 API 进行控制。
    • React：模板部分是 JSX，CSS 通常使用外部的 .css 文件，React 更强调通过 className 来控制样式。

  3. 学习曲线：

    • Vue：Vue 是非常适合初学者的框架，它的 API 丰富、易学，很多开发者认为它比 React 更加“上手容易”。
    • React：React 对于 JS 的要求更高，理解起来可能略微复杂，尤其是在管理状态（如 Redux）和生命周期时，但它的灵活性和纯粹性也让许多开发者对其青睐有加。

让我们开始！构建 GitHub Repositories 项目

我们今天要做的是一个展示 GitHub 仓库列表的简单项目。通过该项目，你将学习如何使用 Vue 和 React 创建一个组件，并用 API 获取数据。首先，让我们从 Vue 开始。

1. Vue 版本：用 Vue 快速展示 GitHub 仓库

在 Vue 中，我们将使用 Vite 来快速创建项目结构。以下是你需要的代码：

项目结构

回顾一下我们的vue的项目结构吧！

image.png

index.html

这个文件是整个web应用程序的切入点，在这上面有有一个id为app的挂载点

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js

这个文件负责初始化 Vue 实例并将其挂载到 DOM 中

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

// 根组件
createApp(App).mount('#app');

App.vue

这个通常是作为一个父组件，它不会负责组件的细节，负责将细分的组件有机结合起来。负责将小组件结合成一个大组件。这也就体现了vue的组件化的思想。

<template>
  <div>
    <Repos />
  </div>
</template>

<script setup>
import Repos from './components/Repos.vue';
</script>

Repos.vue

这个就是我们要实现功能的核心区域了。

<template>
  <!-- 根容器 -->
  <div class="github-repos">
    <!-- 标题 -->
    <h2>Github Repositories</h2>

    <!-- 如果正在加载，则显示 "Loading..." -->
    <p v-if="loading">Loading...</p>

    <!-- 列表渲染：遍历 repos 数组，为每个仓库生成一个列表项 -->
    <ul>
      <li v-for="(repo, index) in repos" :key="repo.id">
        <!-- 使用仓库的 HTML URL 创建链接，并在新标签页中打开 -->
        <a :href="repo.html_url" target="_blank" rel="noopener noreferrer">{{ repo.name }}</a>
        <!-- 显示仓库作者信息 -->
        <span>作者：{{ repo.owner.login }}</span>
      </li>
    </ul>

    <!-- 如果加载完成且没有仓库数据，则显示提示信息 -->
    <p v-show="!loading && repos.length === 0">没有repos</p>

    <!-- 如果有错误发生，则显示错误信息 -->
    <p v-show="error">{{ error }}</p>
  </div>
</template>

<script setup>
// 导入 Vue 的组合式 API 函数
import { ref, onMounted } from 'vue';

// 定义响应式变量
const repos = ref([]); // 用于存储从 GitHub API 获取的仓库列表
const loading = ref(true); // 表示是否正在加载数据
const error = ref(null); // 用于存储可能发生的错误信息

// 在组件挂载后执行异步函数来获取仓库数据
onMounted(async () => {
  try {
    // 发送请求到 GitHub API 获取用户仓库数据
    const response = await fetch('https://api.github.com/users/123Glh/repos');
    
    // 检查 HTTP 响应状态是否正常
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    // 解析 JSON 数据并更新 repos 变量
    const data = await response.json();
    repos.value = data;
  } catch (err) {
    // 捕获任何发生的错误，并将错误信息存储在 error 变量中
    error.value = err.message;
  } finally {
    // 无论成功还是失败，最后都将 loading 设置为 false
    loading.value = false;
  }
});
</script>

<style scoped>
/* 样式仅应用于当前组件 */
.github-repos {
在这里可以添加你想要的样式，我就不写在这了^_^
</style>

成果图：

image.png

2. React 版本：React 搭建 GitHub Repositories

接下来，我们来看看 React 版本。React 的结构和 Vue 略有不同，我们将看到 JSX 的威力。(其实你看完之后就会感到react不就是和vue一样的吗?)

项目结构

image.png

index.html

这里也是在html这个切入文件里面设置了一个挂载点。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx

这里也是创建了一个createRoot实例，并将其挂载到DOM元素上。再引入了App.vue这个根组件，后续我们写的组件一般都是为App.vue提供需求的。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

App.jsx

这就是相当于一个父组件的容器，包含了许多个子组件。

import Repos from './components/Repos';

function App() {
  return (
    <div>
      <Repos />
    </div>
  );
}

export default App;

Repos.jsx

这也就是咱们本次我们要编写的核心代码，我们在后续的团队开发开发中，也就是承担开发像下面这些功能的角色。

import { useState } from 'react'
import './repos.css'
function Repos() {
  // vue templtae ? 
  // js 区域 
  // 使用一个响应式数据状态
  // 返回数组 解构，数组的第一项是当前的状态，数组的第二项是修改状态的方法
  const [repos, setRepos] = useState([])
  const [loading, setLoading] = useState(true);

  fetch('https://api.github.com/users/123Glh/repos')
    .then(res => res.json())
    .then(data => {
      // console.log(data)
      setLoading(false);
      setRepos(data)
    })
  return (
    // html? react 发明了 JSX 语法 js 写HTML
    // JS  
    <div className="github-repos">
      <h2>Github Repositories</h2>
      {loading && <p>loading...</p>}
      <ul>
        {
          repos.map(repo => (
            <li key={repo.id}>
              <a href={repo.html_url} target="_blank">{repo.name}</a>
              <span>作者：{repo.owner.login}</span>
            </li>
          ))
        }
      </ul>
      {!loading && repos.length === 0 && <p>没有repos</p>}
    </div>
  )
}

export default Repos

成果图：

image.png

总结：Vue 和 React，谁更适合你？

通过这个简单的 GitHub Repositories 项目，我们不仅了解了如何使用 Vue 和 React 构建组件，还对这两种技术进行了比较。对于初学者来说，Vue 的学习曲线更为平缓，且易于上手；而对于追求灵活性的开发者，React 则提供了更多的自由度。

选择哪一个框架，最终取决于你个人的开发需求和喜好。Vite 无论在哪个框架中都能提供极速构建体验，帮助你更专注于编写业务代码。

希望这篇文章让你对 Vue 和 React 在 GitHub Repositories 项目中的实现有了更深的理解。记得选择你最喜欢的框架来开启下一段编程旅程，别忘了分享给你的朋友哦！

avatar
文章
阅读
粉丝