情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有

在线制作

您可以通过快捷入口直接在线制作,并分享给热心网友

快捷入口

获取贵宾注册码

关注微信公众号FancyPig,输入2601获取注册码

图片[3]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

相关阅读

如果你也想搭建一个类似的在线制作网页的平台,可以参考下面的教程

交互式情人节页面

下面的需要您自己部署,先看演示效果

这个部署本身来自于vue框架,因此需要一些技术手段咯

你需要先下载Vscode(下载好安装后打开就行了),并安装node环境(详细操作步骤点这里),完成后打开vscode

打开文件夹,选择chat-want-to-say

图片[11]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

新建终端

图片[12]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

然后安装依赖,你可以使用yarn install或者npm install,前者速度会快一些

图片[13]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

这里显示已经安装好依赖了

图片[14]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

我们现在只需要yarn dev或者npm run serve就可以查看演示版了

图片[15]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog
图片[16]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

详细的修改参数您可以参考下方

相关设置都修改好之后,我们可以进行打包了,使用yarn build或者npm run build

打包好的文件会存在dist路径下

图片[17]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

上传到服务器里就好了

图片[18]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog
图片[19]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

如果你不会打包,也可以直接用我们的打包版本,然后手动修改options/production路径下的chat.json文件便可以修改里面的对话了

图片[20]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

相关源码下载

其他创意分享

你的源码写好之后上传到服务器上,可以尝试绑定一个中文域名

例如猪猪侠.cn,瞬间气质爆表了,当然群内很多用户都未满18岁,无法进行备案,而我们之前推荐的学生机是国内的,均需要进行备案。

因此,我们推荐大家可以使用国外的Vultr服务器,使用上面的链接可以白嫖100美元(相当于可以白嫖10-12个月)两者可以配合起来使用

炫酷文字动画页面

效果图

图片[21]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog
点击原图播放

在线演示

工具下载

使用方法

本教程也将使用到vscode,因此您可以参考上面的教程中安装vscode及nodejs

打开文件夹,选择typeMonkey.js-master

图片[22]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

选择终端>新建终端

图片[23]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

然后安装依赖,可以使用yarn install或者npm install

图片[24]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

测试环境也是npm run serve,最终打包npm run build

如果你不会上述操作,你可以直接使用打包版本,修改.lrc文件

图片[25]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

lrc通常是歌词,我们其实加载的就是歌词,你可以修改里面的文案

图片[26]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

最终效果就可以看到了

图片[27]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

常见问题

如果出现MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装 .NET Framework 2.0 SDK;2) 安装 Microsoft Visual Studio 2005;或 3) 如果将该组件安装到了其他位置,请将其位置添加到系统路径中。

请运行下面命令安装windows相关组件

温馨提示:如果终端里运行不了你可以从cmd中运行

runas /noprofile /user:Administrator cmd
npm install --global --production windows-build-tools
图片[28]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog

希望今天的教程对你有所帮助,记得点赞评论哦

© 版权声明
THE END
喜欢就支持一下吧
点赞27赞赏 分享
评论 共13条

请登录后发表评论