论如何成为一名优雅的git仌&&查看vue实战项目的方法 - 雨中的博客

不会吧不会吧~听说你还不会在github上拉取大佬的代码?作为一名老CV攻城狮,在github上寻找现有的源代码答案应付作业🙈拉取并借鉴大佬们的优秀代码作为学习参考可以说是家常便饭了,这可是一项必备技能哦😮。如果你也很想成为一名像我这样优秀的git仌,就赶紧来食用这篇文章吧~

github搜索优秀代码仓库

当然,首先你得有一个git账号啦,这样才能在github上浏览搜索别人的代码啦,如果没有,就赶紧去注册一个吧~这里我已我自己的账号为例,首先我们先要搜索到一个优秀的代码仓库,搜索方式如下图(一定要选ALL GitHub上搜索,要不你可就看不到别人的代码仓库了):

这里搜索的是有关zhainanlib的东东,然后我们就发现搜到了有关这个名字的优秀的源代码仓库,好巧不巧,正好是我的这个libvue实战仓库(真的只是巧合😂),点进去发现就是下图这个亚子了。

这里首先注意红色线圈中的区域,他显示了我们现在在的分支(当前就为master分支),以及仓库一共有多少个分支,和多少个标签。有时候我们进去发现,哎,就一个readme介绍文档,没有代码,就有可能是作者大大把代码放在了别的分支,切换其他分支就好了。

拉取代码

有时候可能我们不仅仅是想要在浏览器上查看代码,而是需要将代码下载到本地运行查看效果,所以这时候就需要用到绿色圈圈所画的区域了,点击后发现有几个选项。

其中我们一般用一下这三种方法就可以啦:

  1. gitclone建立本地仓库并clone代码(优先使用)
  2. 用GitHub Desktop查看
  3. 下载zip压缩包

这里我只介绍第一种方法,后两种方法前者需要下载Git桌面,后者有🙌9⃣,有兴趣可以查看网上相关博客。那么首先我们需要先将这个仓库的链接复制下来,就是上图的那个https开头的字符串,然后在一个电脑的合适地方建立一个空文件夹并命名,名称随意。

这里我在桌面建立了一个名为lib的文件夹并进入,然后右键点击鼠标,选择git bash here选项打开终端,(如果没有的话,需要首先安装git,下载地址https://git-scm.com, 自己看着下吧🍺),然后在里面输入

1
git clone 链接			//刚刚复制的那个字符串

就会自动拉取代码啦,如果下载顺利的话,应该就会成功在你建立的文件夹下看到文件了!

电脑本地查看vue实战项目

这里主要是讲讲怎么运行查看一个vue项目,这里以刚刚下载的zhainanlib为例,我们下载好了以后(下载可能会有点慢,耐心等待哦),打开VSCODE,然后选择打开文件夹选项,选择刚刚下载的文件夹,注意一定要一直进入文件夹直至打开到最后一个文件夹出现如下文件列表。

❌错误做法:

没有打开至里面的文件夹,上图显示的是library文件夹下的zhainanlib文件夹里的内容,所以你会发现大纲下方没有一个叫NPM脚本的栏目,说明还需要继续向里打开文件夹。

✅正确做法:

出现如下的情况就说明你打开对啦,此时红圈部分标志的应该是ZHAINANLIB文件夹,其下方大纲底下有一个NPM脚本的栏目,至于里面的这么多文件千万不要乱动,你只需要点击“🔧dev”(鼠标悬停这个选项右方会出现一个三角状小播放按钮)”等待项目加载后再终端处出现如下信息。

就是点那个小三角运行项目,然后等待项目准备完毕后终端里就会看到这个信息了,他说明现在这个项目已经运行在了本地的http://localhost, 端口下了,接下里你只需要按住左Ctrl+鼠标点击链接或者复制链接在浏览器上输入就可以查看项目啦🍻,祝玩耍愉快~

【拓展】移动设备查看vue项目

总是有小伙伴喜欢在移动设备查看页面效果,并且又不会控制台查看的方法,那么这里就教一个建立本地小服务器(没错,就是你的电脑当服务器)来供移动设备查看吧~

首先我们需要更改端口地址,你也不用听懂这句话什么意思,改就完事了,首先打开config文件夹下的index.js文件我们可以看到有一个host选项,现在写的是localhost即本地端口的意思,这里我们要改成我们的ip地址(注意,换地方了就需要更改ip)。

那么怎么知道自己所在的ip地址呢,简单,打开cmd窗口(不会请自行搜索),输入ipconfig后会出现下图这么一大堆数据(❗❗❗一定要注意,要电脑服务器处于联网状态,并且貌似是由于学校网安全限制,校园网暂时无法实现访问,请让电脑服务器和移动端都使用移动数据热点或者非学校网的宽带局域网❗❗❗),这里找到Lan Wlan字段的IP地址,注意如果你安装了vxbox虚拟机会另有一个ip,就像我这个的第一个ip,他是虚拟机使用的,不要搞错了,一定要看的是WLAN的,如果,你没有安装过虚拟机,那就应该只有一个ip地址,复制ip地址。

然后回到刚刚的那个index文件,将原先的那个host选项注释掉(别删,用注释方便以后修改回来)。然后新写一个host选项并把复制的ip写上,然后ctrl+s保存修改,将刚刚浏览器上的项目运行窗口关掉,再点击那个NPM脚本栏目下的dev选项运行项目(如果提示已经正在运行就选重启项目)。

如果顺利的话,应该会出现下面这个提示:

此时就是说明已经运行在这个网址上了,然后电脑还是点击链接就可以查看项目,也可以选择在移动端上的浏览器上输入这个你得那个ip链接查看项目demo,或者如果懒得输入的话,将这个链接复制并在浏览器上搜索草料网输入复制的链接,他就会在线生成二维码,拿你得手机的扫一扫(没有就下一个)就可以打开这个项目进行体验啦!

下面是我的移动设备显示图。

great~优雅至极,学会了快去显摆吧😺!本次分享就到这里啦!

镇站之宝分享

客官等等,别急着走😂~想必你一定尝试clone我的zhainanlib项目了吧,哈哈哈,那你一定体验到了网速慢的折磨了吧,这里分享一个chrome插件,只要装了这个插件,网速至少提升10倍!(本站长以自己的头发担保😥),如果你还不会给自己的chrome安装插件,请参考本篇文章。

那么下载链接就是这个了,只要安装了上面的插件,则github下载按钮旁会多出一个加速绿色按钮:两个加速通道任选一个即可,clone就用刚刚的方法即可。

使用这个按钮下提供的clone选项再次尝试clone我的那个项目应该在5分钟之内就可以关联到本地仓库啦😉。




©2020 - 2021 By wenchong
津ICP备2021004286号

本站总访问量为 访客数为

本站使用 Volantis 作为主题|借助hexo强力驱动|由腾讯云提供云服务