git clone和npx degit区别

最新推荐文章于 2025-02-28 21:08:04 发布

Batman_curry

最新推荐文章于 2025-02-28 21:08:04 发布

阅读量1.4k

点赞数 13

CC 4.0 BY-SA版权

分类专栏：开发文章标签： git node.js

本文链接：https://blog.youkuaiyun.com/Batman_curry/article/details/144290940

开发专栏收录该内容

6 篇文章

订阅专栏

1、两者区别

实际上，npx degit 和 git clone 都能用来获取代码仓库中的模板或项目，但是它们的实现方式和用途有所不同。让我详细说明为什么在创建 uni-app 项目时使用 npx degit 更为合适，并探讨它的优势。

1. 使用 `git clone`

git clone 是 Git 命令，直接从远程 Git 仓库复制一个完整的项目副本到本地。其特点包括：

克隆整个 Git 仓库：会把 Git 仓库中的所有文件、提交历史等都克隆下来。
包括 Git 元数据：克隆下来的文件夹中会包含 .git 目录，记录了 Git 的历史信息、提交记录等。

缺点：

不必要的 Git 历史：如果你只是想要一个项目模板，通常不需要仓库的完整历史，只要项目的文件和代码。使用 git clone 会把整个 Git 历史记录也克隆下来，这会浪费存储空间。
稍微复杂：如果你只需要模板文件，而不关心 Git 历史或仓库的其它细节，克隆整个仓库会显得稍微“重”。

2. 使用 `npx degit`

npx degit 是一种轻量级的方式来获取 Git 仓库的某个项目模板，degit 是一个专门用于克隆模板的工具。它会下载指定的 Git 仓库中的最新代码，并且不包括 .git 目录，也不保留提交历史。

优势：

避免 Git 历史：degit 只会克隆指定的文件内容，不会克隆 .git 目录，从而避免了冗余的 Git 提交历史记录。这样克隆的代码更干净，节省了存储空间。
快速克隆：因为没有历史记录，degit 的克隆速度相对更快，适用于获取一个项目模板的场景。
适用于模板使用场景：degit 是为获取项目模板而设计的，特别适用于快速初始化项目，而不关心项目的版本历史。
简单易用：通过 npx degit，你不需要手动配置或安装 degit 工具，它会自动下载并执行。npx 使得执行命令变得更加简便，直接可以从远程 Git 仓库获取模板。

3. 具体比较：`npx degit` vs `git clone`

功能	`git clone`	`npx degit`
克隆内容	包括代码文件和 Git 提交历史（`.git` 文件夹）	只克隆项目文件，不包含 `.git` 文件夹
文件大小	包括 Git 历史，文件较大	不包含 Git 历史，文件较小
使用场景	用于获取整个 Git 仓库，包括所有历史记录	用于获取项目模板，不需要 Git 历史
速度	较慢（需要克隆整个 Git 历史）	较快（只克隆文件，不包含历史）
是否需要手动安装	需要安装 Git	无需安装，`npx` 自动执行
是否包含版本控制信息	包含（有 `.git` 文件夹）	不包含（没有 `.git` 文件夹）

4. 总结

如果你只是想从 GitHub 获取一个干净的项目模板，且不需要 Git 历史记录，npx degit 是更合适的选择。
如果你需要整个 Git 仓库，想要保留提交历史或希望以后拉取更新，使用 git clone 会更好。
对于 uni-app 的创建场景，npx degit 很适合，因为你只是想获取一个起始模板并开始开发，并不需要管理完整的 Git 历史记录。

因此，使用 npx degit 相对于 git clone，主要的优点在于 更快、更干净，特别适合用来初始化项目模板。希望这些解释能帮助你更好地理解为什么在创建 uni-app 项目时推荐使用 npx degit！如果还有其他问题，欢迎继续提问！😊

2、创建uni-app在VScode上

好的！既然你已经熟练使用 VScode，并且准备开始开发 uni-app 项目，下面我将一步步指导你如何在 VScode 中创建和设置一个简单的 uni-app 项目。

1. 安装 Node.js 和 cnpm

如果你已经安装了 Node.js 和 cnpm，可以跳过此步骤。否则，确保它们已正确安装：

Node.js：可以通过 Node.js 官网下载并安装。
cnpm：可以使用以下命令通过 npm 安装 cnpm：
```
npm install -g cnpm
```

2. 使用 VScode 创建 uni-app 项目

在 VScode 中，打开终端并按照以下步骤操作：

步骤 1: 初始化 uni-app 项目

打开 VScode，进入你想要存放 uni-app 项目的文件夹。
打开 VScode 的终端，运行以下命令来创建一个新的 uni-app 项目：
```
npx degit dcloudio/uni-preset-vue my-uni-app
```
这会从 GitHub 克隆一个带有 Vue.js 配置的 uni-app 项目模板到 my-uni-app 文件夹中。

步骤 2: 进入项目目录

创建完成后，进入项目目录：
```
cd my-uni-app
```

步骤 3: 安装依赖

安装项目所需的依赖，使用 cnpm 替代 npm 安装（更快）：
```
cnpm install
```
注意：如果你没有安装 cnpm，可以使用 npm 安装：
```
npm install
```

3. 运行项目

步骤 1: 启动项目

你可以通过 VScode 提供的终端来运行项目。执行以下命令来启动开发环境：
```
npm run dev
```
这个命令会启动一个本地开发服务器，通常会在 localhost:8080 上打开项目页面。

步骤 2: 打开浏览器查看效果

如果一切正常，浏览器会自动打开，显示你的 uni-app 项目的欢迎页面。

4. 使用 VScode 进行开发

步骤 1: 配置 uni-app 插件

为了提高开发效率，你可以在 VScode 中安装一些插件，尤其是 uni-app 的相关插件：

打开 VScode，点击左侧的扩展（Extensions）图标。
搜索并安装以下插件：
- Vetur（提供 Vue 文件语法支持）
- uni-app（提供 uni-app 特定的开发支持）

步骤 2: 编辑项目代码

你可以在 src/pages/index/index.vue 文件中开始修改你的页面。比如，修改首页的标题和内容：

<template>
  <view class="container">
    <text>欢迎使用 uni-app！</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

步骤 3: 页面预览

在修改代码后，你可以实时看到修改效果，刷新浏览器页面或者使用 uni-app 的开发工具查看效果。

5. 了解项目结构

创建好的 uni-app 项目大致会包含以下目录结构：

my-uni-app/
│
├── src/                # 源码目录
│   ├── pages/          # 页面目录
│   │   └── index.vue   # 首页
│   ├── components/     # 组件目录
│   └── App.vue         # 根组件
│
├── package.json        # 项目配置文件，记录依赖、脚本等
├── unpackage.json      # uni-app 配置文件
└── vue.config.js        # Vue 配置文件（可选）