作者主页：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 看到你的用心，希望对各位朋友有帮助！
精彩链接
您阅读本篇文章共花了：
发表评论