「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」

如何参与一个开源项目

如何参与一个开源项目，提交我的第一次PR？

以vue-devui为例，步骤如下

fork仓库
生成和配置SSH公钥
clone个人仓库代码
本地启动项目
本地开发和提交代码
设置upstream和同步源仓库最新代码
提交PR

但每个项目会有所不同，那怎么办？

其实在项目的根目录下有个README文档，里头一般会有贡献指南之类的东西，它会教我们如何参与该项目

举例：我们要给掘金贡献Markdown主题

我们可以到项目的根目录的文档中去看，就可以看到贡献步骤：

使用默认模板创建一个公开的仓库（点击绿色的 Use this template 按钮）
将其中的 juejin.scss 替换为自己创作的样式，目前支持 Sass，Less 和 CSS
使用主题开发工具在本地预览主题效果
Fork 此仓库并克隆到本地，在 themes.js 文件中指明样式文件的路径，ref 为 commit hash，highlight 为默认的代码高亮主题（可选）
在 README.md 中「社区主题」章节中添加你的主题和作者信息
提交 pull request (注意：commit 信息要使用 'feat: ' 和 'fix: ' 形式，否则无法触发自动化发布流程)
提交 PR 前请 rebase，确保 commit 记录的整洁
如果是修复样式 bug，请在 PR 中给出明确的描述信息
注意考虑样式的稳定性和兼容性
并非所有 PR 的主题都会入选，挑选和审核会有一定周期

HTTPS和SSH克隆方式有什么不同

HTTPS和SSH两种克隆方式的主要区别在于：

HTTPS只需要复制链接，然后到git Bash输入clone命令即可将项目克隆到本地，但是每次fetch和push代码都需要输入账号和密码；而使用SSH，默认每次通信无需输入账号密码，但需要在克隆之前先配置和添加好SSH key，添加SSH key的前提是，你必须是这个项目的拥有者

Git常用命令

全局配置Git用户名和邮箱

git config --global user.name "xxx"
git config --global user.email "xxx@xx.com"

添加单个文件或者多个文件到暂存区

git add xx1 xx2

添加当前更改的所有文件到暂存区

git add .

提交暂存的更改，并新开编辑器进行编辑

git commit

提交暂存的更改，并备注信息

git commit -m "message..."

等同于 git add . && git commit -m的命令

as const是什么，有什么作用？

TS 3.4中引入as const，被称为const 断言，它的作用是让里头的所有东西变成只读

但需要注意：它只是一个障眼法，并非真的不能改

如何同步源仓库最新代码

为了同步源仓库最新代码，我们为本地项目配置一个远程仓库，但地址是链接源仓库

git remote add upstream git@gitee.com:devui/vue-devui.git

通过git remote -v查看远程仓库，会发现多了两个

$ git remote -v
origin  git@gitee.com:jcodelife/vue-devui.git (fetch)
origin  git@gitee.com:jcodelife/vue-devui.git (push)
upstream    git@gitee.com:devui/vue-devui.git (fetch)
upstream    git@gitee.com:devui/vue-devui.git (push)

通过git pull将远程源仓库最新代码同步到本地分支，即可

git pull upstream dev

dev表示的本地代码分支

vite-svg-loader是什么，如何使用？

vite-svg-loader是一个Vite 2.x的轻量级插件，用于单独引入svg文件文件，引入后就像使用Vue组件那样

基本使用如下

首先安装插件

npm install vite-svg-loader --save-dev

然后配置到vite.config.js

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

准备好svg文件后，导入svg

import IconOpen from './assets/open.svg'

最后，可以跟Vue组件一样使用svg文件了，比如

<template>
  <IconOpen />
</template>

汇总最近遇到的几个问题