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.Rungit 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源码相关推荐

Vue源码学习: 关于对Array的数据侦听
摘要我们都知道Vue的响应式是通过Object.defineProperty来进行数据劫持.但是那是针对Object类型可以实现, 如果是数组呢? 通过set/get方式是不行的. 但是Vue作者使 ...
VUE源码解析-1- 初始篇：vue定义路径查找
从这里开始,记录VUE源码分析. 1. 将 vue 源码拉到本地,方便分析 vue 源码地址来自全球最大同性交流网站-- gitHub:https://github.com/vuejs/vue 我们 ...
大前端-Vue源码分析
Vue源码解析-响应式原理以下内容来自拉勾教育大前端训练营笔者在学习过程中对笔记进行的一个整理心得体会嘿嘿嘿~~~ 首先说说拉勾教育大前端训练营的课程视频吧,课程的质量是真的很好哦,并且已经 ...
第一记: JS变量类型判断（VUE源码解读）
学习摘要 : 以前总是对js变量类型的判断模糊不清楚,今天看到vue源码后才恍然大悟原来大神都是这样弄的,所以加以总结,写的不好的请大神们多多吐槽吐槽!!!!!! Vue 源码 /* 获取值的原始类型 ...
vue源码-对于「计算属性」的理解
vue源码-对于「计算属性」的理解这是我最近学习vue源码的一个个人总结和理解,所以可能并不适合每一位读者本文的整体脉络如下,首先尽可能去掉细节,对计算属性源码的大致实现有一个了解,然后举一例子, ...
Vue源码探究-事件系统
Vue源码探究-事件系统本篇代码位于vue/src/core/instance/events.js 紧跟着生命周期之后的就是继续初始化事件相关的属性和方法.整个事件系统的代码相对其他模块来说非常简短 ...
[Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎 ...
vue源码之响应式数据
分析vue是如何实现数据响应的. 前记现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...