在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项目添加看板娘
• 最后说明一下如何更换人物，如图所示：