圣诞节来啦，快把这个动态爱心送个那个TA

太过爱你忘了你带给我的痛 2023-09-24 15:48 8阅读 0赞

> **作者主页**：[Designer 小郑][Designer]  
> **作者简介**：Java全栈软件工程师一枚，来自浙江宁波，负责开发管理公司OA项目，专注软件前后端开发（Vue、SpringBoot和微信小程序）、系统定制、远程技术指导。CSDN学院、蓝桥云课认证讲师，全栈领域优质创作者，在校期间参加PAT乙级考试获得满分，三年ACM竞赛经验，斩获国奖两项，省奖五项。热爱技术、专注业务、开放合作、乐于分享，期待你我共同成长！  
> **主打方向**：Vue、SpringBoot、微信小程序

今天是**圣诞节**，过完圣诞马上就是元旦，新的一年马上开始啦！

不管是什么节日，都要用心认真生活哦！

本期给各位朋友带来的是**使用Vue画出动态闪烁爱心**！话不多说直接上图！

![在这里插入图片描述][48039661ee034cee821c664843fb3c4b.gif_pic_center]

![在这里插入图片描述][ae204a998be342509eb6c40ce89b215c.png_pic_center_pic_center]  
所有源代码全部开放，在 [我的社区][Link 1] 中，有需要的朋友可以自助免费下载。

### 一、第一步：运行爱心项目 ###

> 首先，请参考博客 [https://blog.csdn.net/qq\_41464123/article/details/115490056][https_blog.csdn.net_qq_41464123_article_details_115490056]，完成 npm 和 vue 环境的配置。

安装完成 `npm` 和 `vue` 脚手架后，使用 `VSCode` 打开源代码文件夹，如下图所示。

![在这里插入图片描述][befef814464a44abb556af9e4c31663b.png_pic_center]  
新建终端，敲入 `npm i` 命令，如下图所示。  
![在这里插入图片描述][c7bde1c14f2048aeaf9d8875ef5aba3a.png_pic_center]  
安装完成后，界面如下图所示。  
![在这里插入图片描述][f21eaa40ff284825862d20e0b5f7f3fa.png_pic_center]  
此时输入 `npm run serve` 命令，运行项目，运行后如下图所示。

![在这里插入图片描述][fd2be6ea589a4637906ea3906d82747d.png_pic_center]  
最后，爱心就出来了，如下图所示。

![在这里插入图片描述][06dfd170d79e42b0b671bf29f1c7e53d.png_pic_center]

### 二、打包爱心 ###

> 爱心运行后只能在 Node.js 环境下运行哦，但是那个 TA 的电脑上没有 Node.js，所以你需要编译后放在 Nginx 中！

按下 `CTRL` \+ `C`，结束刚刚运行的爱心项目，然后输入 `npm run build` 编译命令。

![在这里插入图片描述][a3fa665219544eadba464faba5e18f39.png_pic_center]  
接着 `npm` 会将爱心项目**编译**，去生成爱心项目的 `html` 文件，如下图所示。

![在这里插入图片描述][824c68dd1b6e4d96b1b18ea1e5ce17fe.png_pic_center]  
编译完成后，如下图所示。

![在这里插入图片描述][683173ac896446f5a941ff30aa970c13.png_pic_center]

### 三、发布上线 ###

> 有了 html 文件后，就可以放在 Nginx 下发布啦！

首先在 [Nginx 官网][Nginx] 下载 `Nginx`。

下载后将第二步生成的 `html` 文件拷贝到 `Nginx` 的 `html` 目录下，如下图所示。

![在这里插入图片描述][96e276384b6d44c780378711b6625a47.png_pic_center]  
接着在 `Nginx` 的根目录新建一个 `txt` 文档，如下图所示。

![在这里插入图片描述][c2dca9ee375945448dbb648e3f6de19d.png_pic_center]  
在 `txt` 文档输入以下命令。

start nginx
    explorer "http://localhost:8080"

接着重命名为 `启动.cmd`，如下图所示。

![在这里插入图片描述][615c08d55d8f448da244b42a3d54a15c.png_pic_center]

最后**双击启动**即可，最终效果如下图所示。

![在这里插入图片描述][725bd9338ce94b53bbae2dca8e896786.png_pic_center]

> 此时小伙伴可能会问了，搞了 Nginx 还是在电脑本地呀！

聪明的小伙伴应该发现了，`Nginx` 不需要任何的环境依赖，只要把 `Nginx` 这个文件夹复制到服务器的任何一个文件夹，然后启动，这样 **TA 就可以通过公网 IP 看到这个项目**啦！

### 四、总结 ###

本文讲解了如果运行现有的爱心项目，并将其部署发布，让那个 TA 看到你的用心，希望对各位朋友有帮助！

![在这里插入图片描述][3a01dc60e62c415b812015851343f1c0.png_pic_center]

[Designer]: https://blog.csdn.net/qq_41464123
[48039661ee034cee821c664843fb3c4b.gif_pic_center]: https://img-blog.csdnimg.cn/48039661ee034cee821c664843fb3c4b.gif#pic_center
[ae204a998be342509eb6c40ce89b215c.png_pic_center_pic_center]: https://img-blog.csdnimg.cn/ae204a998be342509eb6c40ce89b215c.png#pic_center#pic_center
[Link 1]: https://bbs.csdn.net/topics/611312717
[https_blog.csdn.net_qq_41464123_article_details_115490056]: https://blog.csdn.net/qq_41464123/article/details/115490056
[befef814464a44abb556af9e4c31663b.png_pic_center]: https://img-blog.csdnimg.cn/befef814464a44abb556af9e4c31663b.png#pic_center
[c7bde1c14f2048aeaf9d8875ef5aba3a.png_pic_center]: https://img-blog.csdnimg.cn/c7bde1c14f2048aeaf9d8875ef5aba3a.png#pic_center
[f21eaa40ff284825862d20e0b5f7f3fa.png_pic_center]: https://img-blog.csdnimg.cn/f21eaa40ff284825862d20e0b5f7f3fa.png#pic_center
[fd2be6ea589a4637906ea3906d82747d.png_pic_center]: https://img-blog.csdnimg.cn/fd2be6ea589a4637906ea3906d82747d.png#pic_center
[06dfd170d79e42b0b671bf29f1c7e53d.png_pic_center]: https://img-blog.csdnimg.cn/06dfd170d79e42b0b671bf29f1c7e53d.png#pic_center
[a3fa665219544eadba464faba5e18f39.png_pic_center]: https://img-blog.csdnimg.cn/a3fa665219544eadba464faba5e18f39.png#pic_center
[824c68dd1b6e4d96b1b18ea1e5ce17fe.png_pic_center]: https://img-blog.csdnimg.cn/824c68dd1b6e4d96b1b18ea1e5ce17fe.png#pic_center
[683173ac896446f5a941ff30aa970c13.png_pic_center]: https://img-blog.csdnimg.cn/683173ac896446f5a941ff30aa970c13.png#pic_center
[Nginx]: https://nginx.org/download/
[96e276384b6d44c780378711b6625a47.png_pic_center]: https://img-blog.csdnimg.cn/96e276384b6d44c780378711b6625a47.png#pic_center
[c2dca9ee375945448dbb648e3f6de19d.png_pic_center]: https://img-blog.csdnimg.cn/c2dca9ee375945448dbb648e3f6de19d.png#pic_center
[615c08d55d8f448da244b42a3d54a15c.png_pic_center]: https://img-blog.csdnimg.cn/615c08d55d8f448da244b42a3d54a15c.png#pic_center
[725bd9338ce94b53bbae2dca8e896786.png_pic_center]: https://img-blog.csdnimg.cn/725bd9338ce94b53bbae2dca8e896786.png#pic_center
[3a01dc60e62c415b812015851343f1c0.png_pic_center]: https://img-blog.csdnimg.cn/3a01dc60e62c415b812015851343f1c0.png#pic_center