git的初次使用及查看vue源码

本文主要是介绍git的初次使用及查看vue源码，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

因为最近在学习vue，在安装调试vue源码时使用到了git，防止忘记，所以进行记录。因为直接看见的vue源码是经过自动打包的，不便于我们查看和调试。（当然，你要是非要看我也不拦着，hhhh~）

需要的工具：vscode、node环境

安装git步骤

• 下载git：https://git-scm.com/downloads
• 运行下载好的git的.exe文件。

注意：正常来说一路选择“Next”即可，但要记住将git安装到了哪个文件夹，后面会用到git的路径。

开头：

结尾：

• 找到安装的Git下的git-core文件夹（Git\mingw64\libexec\git-core）和bin（Git\bin）文件夹，记录好他们的绝对路径。

注意：形如D:\vue3\Git\mingw64\libexec\git-core

• 配置path：选择环境变量后，选择“系统变量”中的path，将上一步记录的2个文件夹路径添加到path中，注意是添加，添加后一路选择“确定”（不然会没有保存，就添加无效）。
  

• 在终端（windows系统下是cmd界面）中输入git查看是否安装成功。（下图表示安装成功）
  

配置vue步骤

• 在GitHub上找到vue源码：https://github.com/vuejs/vue-next
  

使用git clone方式

• 在cmd界面使用 cd 进入到要使用源码的文件夹下，输入以下代码git clone https://github.com/vuejs/vue-next.git即可。
• 使用vscode打开刚刚下载的vue-next文件夹，选择主目录下的package.json文件夹右键选择在集成终端中打开，使用yarn install安装文件所需的相关依赖。

注意：因为vue-next是依赖yarn的，可以在主目录下看见有个文件夹叫yarn.lock。yarn不是node自带的安装工具，所以要安装yarn，安装命令npm install yarn -g：-g是全局的意思

• 再随便右键某个文件，选择在集成终端中打开，输入git init初始化一个本地代码仓库，再使用git add .将仓库添加到文件下，输入git commit -m "name"提交项目。

注意：输入git add . 之后，会报如下警告：warning: LF will be replaced by CRLF in node_modules/.bin/marked.
The file will have its original line endings in your working directory
意思就是说node_modules/.bin/marked文件中的换行方式将会CRLF（CRLF：CarriageReturn LineFeed，中文意思是回车换行）代替。（LF：LineFeed，中文意思是换行）。详情可看：https://blog.csdn.net/qq_37185371/article/details/103665191

• 提交成功的提示信息：create mode 100644 LICENSE
create mode 100644 README.md
create mode 100644 __tests__/Transition.spec.ts
create mode 100644 __tests__/TransitionGroup.spec.ts
create mode 100644 __tests__/e2eUtils.ts…即创建了一堆的文件.

注意：name随便写就好。第一次使用git的话会报如下错误：

Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '**电脑信息**.(none)')

意思就是：请告诉它你是谁。

解决方法：
git config -global user.email "邮箱地址"
git config -global user.name "名称"

使用了-global这个参数就意味着你这台机器上所有的Git仓库都会使用这个配置，如果想单独设置，可以不加-global这个参数。因为git是分布式管理控制系统，所以提交项目时它要识别你的身份。可参考https://blog.csdn.net/weixin_44544742/article/details/108328537

直接下载 .zip文件方式

• 下载后解压
• 解压后在vscode中打开，步骤同git clone方式。

查看源代码

• 提交项目完成后，将终端切换到packages.json的那个终端页面，即在最开始打开的那个终端页面，使用命令yarn dev即可进行打包。
• 打包成功后可以查看vue-next的目录packages/vue下有一个dist文件夹，文件夹里有一个vue.global.js文件，该文件就是vue使用cdn方式引入的那个 打包后的 文件。
• 在packages/vue/examples文件夹中创建自己的文件夹，然后正常写入我们的vue代码。
• 此时运行到浏览器，打开控制台进行调试，就发现代码停在了我们打的debugger处。但是此时查看代码都在生成的vue.global.js文件中。但这样查看并不方便，所以我们需要将实现的细节映射到具体的文件中去。
• 在主目录下的packages.json中的"dev": "node scripts/dev.js"后添加--sourcemap。即"dev": "node scripts/dev.js --sourcemap"。然后重新打包运行就可以了。

注意：在浏览器打开后即可看见对应的文件，将鼠标悬浮在文件上即可显示具体的文件路径。

git可以了解，vue源码的细节也可在学习完vue后再进行深度的学习，这里只是我个人的学习记录，仅作参考，如有错误，欢迎各位大佬指正，期待和大家一起进步！
拜了个拜拜~~

这篇关于git的初次使用及查看vue源码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！