很多人学习的时候会在网上搜索一些项目源码,然后通过看别人的源代码,然后再通过调试运行去学习、理解其中的各个关节的内容,github就会成为很多人下载源码的首选。但是很多人下载下来之后不知道该如果开始看这个源码,很多新入门的小朋友会摸不着头脑。下面我就分享一些如何启动下载下来的项目,如何看懂别人的项目源码。

首先,关于下载之后运行项目这个问题,我在之前的文章里有说明,但是我今天可能要再重复一边。我们下载下来的代码,一般是一个压缩包,解压之后,很多人就不知道怎么办了,看到一堆的文件就一脸懵,也不知道该怎么运行这个代码。尤其是刚学习进来的人,不知道进来之后要下载依赖关系。也就是如果你发现你下载的项目文件夹里没有一个node_modules的文件和dist文件夹,那说明你下载的项目时一个打包过之后的项目,这个项目不是说不完整,而是它是经过打包压缩过的项目,所以很多内容需要你自己安装之后才能启动项目。那我们应该如何安装这些所谓的依赖关系呢?首先,打开你的项目文件夹,找到你项目文件夹里面的README.md文件,查看里面的内容。里面有一些项目说明,如果里面是一堆你看不懂的代码,那恭喜你,你马上就会看懂了。我以一个刚下载好的项目为例,供大家参考。

这个是我今天刚刚从github上下载的一个vue的项目,解压之后发现里面有好几个文件夹,看上去并不像我平时打包完成之后的项目。

然后打开README.md看看项目说明是怎么一回事。

发现,哦,原来里面不止一个项目(赚了)。既然说明里说可以直接看chapter3,那就打开chapter3看看,以下就是chapter3的文件目录。

(第一张图是原文件文件夹内容,第二张图是依赖关系下载完成后,对比原文件,发现多了一个node_modules文件夹)。

打开里面的README.md文件。

看,其实在大多说的README.md文件中会直接写清楚你该如何使用运行这个项目的。首先,你要在这个项目文件夹下打开Git Bash Here,然后输入里面的第一个行命令npm install,回车。这个过程其实是为了安装该项目的依赖关系,时间可能会比较长,但是不要担心,耐心等待。安装的这个过程中,可能一开始你从git工具上看不出有什么变化,有些同学就会觉得是不是没有响应,这个时候先不要慌,去看你的文件夹,你会发现,文件夹里出现了一个node_modules的文件夹,这个就说明这个项目所需要的依赖关系正在下载,只不过因为下载的内容比较多,所以会耗时长。我们可以打开package.json查看,devDependencies里面的就是我们需要的依赖的包,如果你发现里面的内容多,那么下载慢就是正常的,如果所需要的依赖不多,时长就会相应的缩短。

当git工具相应的出现一个新的$的时候,说明我们这个项目所需要的依赖关系已经全部下载完成了,打开你的node_modules文件夹,你就会发现里面出现了许多的文件夹。这就是在package.json文件中devDependencies的内容了。

接下来,就是运行项目了,这个就是README.md文件里的第二行命令了npm run dev,在git工具中输入这个命令,回车。哇,出现了一堆的building modules .......,不用管,直到出现 I  Your application is running here: http://localhost:8080

说明程序可以运行了。这个时候要怎么办呢?打开浏览器,在地址栏输入localhost:8080,回车,你就看到运行的程序啦。

是不是很简单啊。所以只要你读懂了README.md文件,那么你就基本可以无障碍的打开这个项目,进行运行调试。通过对代码的部分测试修改,来理解代码中的程序的各个部分的内容,是如何控制着程序的运行的。

好久不更新了,我总觉得很麻烦,但是现在还是发现,每天记录一下新的学习的内容,然后总结自己的学习心得,可以让我们进步的更快。

写这个的时候在想,也不知道会不会误导大家,毕竟我自己理解的内容如果不对,可能会给大家传递错误的消息,不过,如果有朋友发现我的内容有不对的地方,欢迎指正,共同进步哇。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐