【vue】学习记录

下载源码

使用ssh形式在github上下载vue3的源码到本地
此处选择旧版本tag，然后yarn install下载依赖然后就出现了第一个问题，

➜  vue-next git:(master) yarn install
yarn install v1.22.17
info No lockfile found.
$ node ./scripts/preinstall.js
This repository requires using pnpm as the package manager  for scripts to work properly.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

最后查到问题是这样的
首先，使用 git clone xxx 会下载最新版本的文件，然后这个时候vue3已经使用pnpm了，没有yarn.lock文件了，而且最新版用的是pnpm来管理。

可以看到，这个preinstall里写的，如果不上pnpm开头的命令，就会弹出警告，并且终止进程。

我非要用yarn

（这里我试试删了这行，然后再用yarn来install看看行不行，反正是备用测试代码）

又说我node版本过低，这个vue3的node要16.5以上，还好我安装过nvm，这个时候为了测试到底行不行，我打算就死磕到底，所以安装一个node，之前写过一篇如何安装nvm等，此时刚好可参考。

查看nvm的可下载版本后，选择了16.13.1，符合提示，然后等了半天

为了以后方便，给两个版本设置一个别名，我这里就直接叫15和16，此处项目环境为16，但其他项目没有单独设置之前默认为15

然后根据提示进行选择版本，估计是官方没有对yarn进行设置的原因，毕竟我这里是强行用yarn来安装依赖，如下，看情况是成功了，试试能不能用

运行 yarn dev

然后可以发现功能一切正常，舒服了，不过有警告还是不舒服，所以下面还是用其他办法

回到之前的话题，使用旧版本，不钻牛角尖去在新版本默认pnpm下强行用yarn

所以我以为下载了旧版本的代码，实际上却是最新版的代码，此时使用pnpm的命令应该是可以的，我在文件里也看到了pnpm.lock。

解决办法，回滚到旧版本，使用git checkout xxx 此处的xxx是旧版的提交commit号,比如f0cf14bcc56c387372932e7d730f838ece17fe5f，

然后就可以进行yarn install了，之后使用yarn dev进行打包，并阅读源码即可。

托管到github

此时的本地仓库关联的还是vue的官方仓库地址，在本地阅读源码后应该会有各种调试的文件，所以打算把这个仓库托管到自己的github账号里面，

首先git remote -v 可以看到当前的git信息

可以看到 origin还是vue的官方地址，所以第一步是要断开其中的连接，
输入git remote remove origin ,此处我再次查看origin，发现已经没有了，说明已经是断开了

然后就要托管到自己的代码仓库里了，不过此时我还没有新建一个仓库，我先去github里新建一个

很明显，应该是push一个已经存在的项目，直接使用红框中的命令即可

git remote add origin git@github.com:voiceu-zuixin/vue3-learning.git
因为此时还是之前tag的分支，不是vue里面的主分支master，现在主分支也变成了main，先切到main
git checkout -b main

然后 git add -A 将所有的修改后的文件添加到暂存区，

其实到这里直接用vscode的可视化界面操作就行，但是为了练习git的命令，继续使用命令来完成，

输入 git commit -m 'vue3-learning-test1' 进行提交，然后使用 git push origin main 进行推送

结果遇到了错误，好像是vue源码里设置了commit-msg hook，只能进行某种格式的提交，我也是第一次见到这种，涨知识了。按照报错提示进行下一步吧，参考链接

所以跟着提示走就行，经过查阅参考贴，注意冒号后面有空格使用以下命令进行提交
git commit -m 'fix(vue3-learning): commit-test1'

然后再进行push即可

成功后的仓库截图