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

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

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

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

所有源代码全部开放，在 我的社区 中，有需要的朋友可以自助免费下载。

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

首先，请参考博客 https://blog.csdn.net/qq_41464123/article/details/115490056，完成 npm 和 vue 环境的配置。

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

新建终端，敲入 npm i 命令，如下图所示。

安装完成后，界面如下图所示。

此时输入 npm run serve 命令，运行项目，运行后如下图所示。

最后，爱心就出来了，如下图所示。

二、打包爱心

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

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

接着 npm 会将爱心项目编译，去生成爱心项目的 html 文件，如下图所示。

编译完成后，如下图所示。

三、发布上线

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

首先在 Nginx 官网 下载 Nginx。

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

接着在 Nginx 的根目录新建一个 txt 文档，如下图所示。

在 txt 文档输入以下命令。

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

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

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

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

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

四、总结

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