在线制作
您可以通过快捷入口直接在线制作,并分享给热心网友
快捷入口
获取贵宾注册码
关注微信公众号FancyPig
,输入2601
获取注册码
![图片[3]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214045525382.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
相关阅读
如果你也想搭建一个类似的在线制作网页的平台,可以参考下面的教程
交互式情人节页面
下面的需要您自己部署,先看演示效果
这个部署本身来自于vue
框架,因此需要一些技术手段咯
你需要先下载Vscode(下载好安装后打开就行了),并安装node环境(详细操作步骤点这里),完成后打开vscode
打开文件夹,选择chat-want-to-say
![图片[11]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214050237680.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
新建终端
![图片[12]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214050258922.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
然后安装依赖,你可以使用yarn install
或者npm install
,前者速度会快一些
![图片[13]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214050342685-1024x165.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
这里显示已经安装好依赖了
![图片[14]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214050938619.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
我们现在只需要yarn dev
或者npm run serve
就可以查看演示版了
![图片[15]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214051026177.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
![图片[16]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214051115498-1024x543.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
详细的修改参数您可以参考下方
相关设置都修改好之后,我们可以进行打包了,使用yarn build
或者npm run build
打包好的文件会存在dist
路径下
![图片[17]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214051906242.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
上传到服务器里就好了
![图片[18]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214052008439-1024x563.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
![图片[19]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214051940663-1024x587.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
如果你不会打包,也可以直接用我们的打包版本,然后手动修改options/production
路径下的chat.json
文件便可以修改里面的对话了
![图片[20]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214052639735.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
相关源码下载
其他创意分享
你的源码写好之后上传到服务器上,可以尝试绑定一个中文域名
例如猪猪侠.cn
,瞬间气质爆表了,当然群内很多用户都未满18岁,无法进行备案,而我们之前推荐的学生机是国内的,均需要进行备案。
因此,我们推荐大家可以使用国外的Vultr服务器,使用上面的链接可以白嫖100美元(相当于可以白嫖10-12个月)两者可以配合起来使用
炫酷文字动画页面
效果图
![图片[21]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214054025362.gif)
在线演示
工具下载
使用方法
本教程也将使用到vscode,因此您可以参考上面的教程中安装vscode及nodejs
打开文件夹,选择typeMonkey.js-master
![图片[22]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214054312727.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
选择终端>新建终端
![图片[23]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214054405408.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
然后安装依赖,可以使用yarn install
或者npm install
![图片[24]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214054436173-1024x296.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
测试环境也是npm run serve
,最终打包npm run build
如果你不会上述操作,你可以直接使用打包版本,修改.lrc
文件
![图片[25]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214061745186-1024x237.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
lrc通常是歌词,我们其实加载的就是歌词,你可以修改里面的文案
![图片[26]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214061837308.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
最终效果就可以看到了
![图片[27]-情人节,程序员的三种表达方式,温馨/炫酷/神秘感全都有-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2022/02/20220214061826760.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
常见问题
如果出现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](https://static.iculture.cc/wp-content/uploads/2022/02/20220214060927404.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
希望今天的教程对你有所帮助,记得点赞评论哦
- 最新
- 最热
只看作者