vue中使用看板娘

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

3.在index.html中添加<script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>
4.在App.vue中添加如下代码：

<script>
export default {
    name: 'App',
    data() {
        return {
            // model: 'miku',
            // model: 'koharu',
            // model: 'hibiki',
            // model: 'haru_2',
            model: 'haru_1',
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.live2dInit()
        })
    },
    methods: {
        live2dInit() {
            window.L2Dwidget.init({
                pluginRootPath: 'static/live2dw/',
                pluginJsPath: 'lib/',
                pluginModelPath: `live2d-widget-model-${this.model}/assets/`,
                tagMode: false,
                debug: false,
                model: {
                    jsonPath: `/static/live2dw/live2d-widget-model-${this.model}/assets/${this.model}.model.json`,
                },
                display: { position: 'right', width: 150, height: 300 },
                mobile: { show: true },
                log: false,
            })
        },
    },
}
</script>

效果图如下：


更换人物：
修改data中的model值为下图对应值，既可更换人物，刷新页面可以看到效果

参考文章：https://blog.csdn.net/weixin_45089791/article/details/104693807