在vue项目添加live2d可交互的看板娘

先看效果图

在vue项目添加live2d可交互的看板娘_第1张图片

在vue项目添加live2d可交互的看板娘_第2张图片

接下来完成这个小功能!

第一步)

在index.html的head中添加

在vue项目添加live2d可交互的看板娘_第3张图片

第二步)

创建对应层级目录, 然后把这四个文件放进去,文件的链接会放在文章的最后

在vue项目添加live2d可交互的看板娘_第4张图片

 第三步)

在对应层级目录下复制进去这个index的vue文件

在vue项目添加live2d可交互的看板娘_第5张图片

 index.vue代码(直接创建个空的vue文件全复制进去,放到对应的目录下)






第四步)

在App.vue中引入这个index组件

在vue项目添加live2d可交互的看板娘_第6张图片

 这样就添加成功了!

其中waifu-tips.js中可以对配置项进行修改

 在vue项目添加live2d可交互的看板娘_第7张图片

在waifu-tips.json中可以对看板娘的交互信息进行修改

在vue项目添加live2d可交互的看板娘_第8张图片

 链接在下方

链接:https://pan.baidu.com/s/1yqD4n6lK4l1lefsF8WgQHw 
提取码:qwer

有问题的可以在下方评论联系,记住看清层级目录,一般来说是没问题的。

你可能感兴趣的:(vue.js,交互,javascript)