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

效果如下:
在这里插入图片描述
在这里插入图片描述

  • 首先下载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项目添加看板娘
  • 最后说明一下如何更换人物,如图所示:
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐