在vue项目中添加看板娘

在个人网站中如何加入好看的看板娘组件

效果如下：

首先下载live2dw组件，地址：链接：https://pan.baidu.com/s/1K1hixvM9_2ySMV674KQDtQ 提取码：rs8g
接下来将live2dw导入到vue项目的static目录下

如上图所示
在public文件夹下的index.html中添加

<script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>

接下来在App.vue中添加如下：

<script>
export default {created() {setTimeout(() => {window.L2Dwidget.init({pluginRootPath: 'static/live2dw/',pluginJsPath: 'lib/',pluginModelPath: 'live2d-widget-model-haru_2/assets/',tagMode: false,debug: false,model: { jsonPath: 'static/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json' },display: { position: 'right', width: 150, height: 300 },mobile: { show: true },log: false})}, 1000)},
}
</script>

以上就是如何给自己的vue项目添加看板娘
最后说明一下如何更换人物，如图所示：

在vue项目中添加看板娘相关推荐

vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器
在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器 1.复制依赖文件 1.1 示例通过 webpack 插件自动复制依赖 1.1.1.编辑你的 webpack.config.js ...
在自己的网站中添加看板娘
关于给页面添加看板娘踩的坑经常在其他大佬的博客上看到看板娘,然后搞了好几天才明白一点点(终究还是太菜 -.-) 其实有好多大佬都发布了自己的看板娘源码,好多种版本,但其实还是用 live2d 做 ...
关于vue项目中添加less，less-loader不能运行的问题
在vue项目中,我们通常会在style样式中引用less,这样我们就需要下载less和less-loader依赖包, 运行命令 npm install less less-loader --save ...
在vue项目中添加特殊字体
这里的特殊字体,指的是一般用户电脑未安装到本地的字体,要引入这样的字体,首先需要把字体文件下载下来. 就像上图这样的,ttf格式的,然后在项目里添加它. 然后我们在font.css里用@font-fa ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
在vue项目中导入element-ui
在vue项目中添加插件导入并注册项目中需要的组件
fabricJs 在vue项目中的实战记录（四）添加文字以及文字的操作[字体大小、颜色、字间距、行间距、透明度、加粗、斜体、下划线、删除线、对齐方式、字体设置]
在阅读以下文章的基础上查看本篇笔记: 第一篇:fabricJs 在vue项目中的实战记录(一)引入以及初始化第二篇:fabricJs 在vue项目中的实战记录(二)fabricjs设置海报背景(图片 ...
JavaWeb项目中添加live2d模型
前言:之前个人博客中配置的live2d模型的API失效了,所以重新折腾了一下,在自己服务器配置了 live2d 的 API,在此记录一下 JavaWeb项目中添加live2d模型之前在个人博客中使用 ...

在vue项目中添加看板娘

在个人网站中如何加入好看的看板娘组件

在vue项目中添加看板娘相关推荐

最新文章

热门文章