尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

俄罗斯方块(Vue版)

俄罗斯方块(Vue版) hello大家好我是海瞳今天在Github上面发现了一个用Vue编写的俄罗斯方块游戏感觉挺有趣的。指路https://binaryify.github.io/vue-tetris/接下来我演示如何把代码下载到本地来运行并且在自己的服务器上部署这个俄罗斯方块这个项目。1、把代码下载到本地首先我们得到此项目的github开源地址去下载这里呢我把链接放在下面。指路https://github.com/Binaryify/vue-tetris?tabreadme-ov-file第一步我们点击Code点击后会出现一个弹窗点击Download ZIP就行了。2、项目安装依赖、运行(Run)当我们把项目下载到本地后就可以我们的操作了我们把他解压出来。这里呢我们就需要使用到开发工具了我自己用的是Webstorm其他开发工具也可以使用比如Visual Studio Code等其他开发开发工具。如果小伙伴们也想用的话可以访问我们的网站https://www.haiyu.icu 上面会有Webstorm包括它的全家桶安装教程。打开过后我们我们看到项目是一片红我们不要紧因为这是不代码的bug是因为我们还未给项目安装依赖。但是前提你的电脑需要下载node.js 来配置环境。node.js官网我放在下面了。下载长期维护版指路https://nodejs.org/en下完node.js后我们就可以开始接下来的操作了。我们打开编辑器的终端输入npm install回车来安装依赖。接下来就是漫长的等待了肯能会有点慢。大家可以看看这篇文章https://blog.csdn.net/qq_43684588/article/details/134554654来切换npm的源切换成国内的源我们输入上面命令后呢就需要等待了肯能会有点慢我们安装完成依赖后会出现一个node_modules的文件夹这个文件夹是用来存放文件所需要的依赖文件。到这里我们已经完成一大半了现在我们只需要启动该项目就可以看到项目的成果了我们点击用dev启动项目。启动后稍微稍等项目编译一下项目会自动在浏览器打开如果没有打开的话可以在浏览器输入localhost:8080/项目启动后就是下图所显示的效果。3、总结最近在逛github发现这个俄罗斯方块感觉还不错就拿出来分享。大家可以访问我的网站上面会有很多的代码资源分享谢谢大家观看指路https://www.haiyu.site
返回列表