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