因为最近在学习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后再进行深度的学习,这里只是我个人的学习记录,仅作参考,如有错误,欢迎各位大佬指正,期待和大家一起进步!
拜了个拜拜~~