vue中使用live2d,看板娘!
普通的html中,咱们要引入这个太简单了!新建一个页面,复制下边代码就可以出来了!<!DOCTYPE html><html lang="en"><head></head><body><div id="page_end_html"><script type="text/javascript" ...
普通的html中,咱们要引入这个太简单了!
新建一个页面,复制下边代码就可以出来了!
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="page_end_html">
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({"display": {
"superSample": 2,
"width": 200,
"height": 400,
"position": "right",
"hOffset": 0,
"vOffset": 0
}
});
</script>
</div>
</body>
</html>
在vue中,就不是这么用了。!
起初我以为需要,可以引入插件,于是找到了live2d4vue,这个东西已经是一年前的的,而且作者也杳无音信了。浪费了一番周折之后,找到了新的办法!
在具体讲这个之前,说一下这个的用处!
毫无用处,只为装逼!
懂了吧!
那么我现在给大家简单介绍一些,非常简单!
只需要三步!
1.到我的百度云盘中下载,这些个你的老婆,有好多!你们老婆作者的github地址,https://github.com/EYHN/hexo-helper-live2d 你们先去拜访一下老丈人,感兴趣可以star一下!
然后咱们看再看看,你的老丈人给你提供了,哪些个老婆。风格迥异,各取所需!
https://huaji8.top/post/live2d-plugin-2.0/!
我的网盘:https://pan.baidu.com/s/1cvkqdrn9UO9_Embw84i0Cg 不好使联系我qq289373410,本人帅的一批,非诚勿扰哦!
2.下载好以后,把live2dw这个文件复制到你的vue项目的static下,如图!
并在index.html中引入js
<script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>
3.这么快就最后一步啦!耐心看完哦!
在你的APP.vue文件中,在created中加入
created () {
setTimeout(() => {
window.L2Dwidget.init({
pluginRootPath: 'static/live2dw/',
pluginJsPath: 'lib/',
pluginModelPath: 'live2d-widget-model-koharu/assets/',
tagMode: false,
debug: false,
model: { jsonPath: '/static/live2dw/live2d-widget-model- koharu/assets/koharu.model.json' },
display: { position: 'left', width: 150, height: 300 },
mobile: { show: true },
log: false
})
}, 1000)
}
这里具体讲一下,
ok,大张旗鼓三步走结束,咱们看一下效果!
ok,又跟大家说再见的时候了,请爱惜自己的老婆,拜了个拜!
加入我们群
如果有需要,欢迎可以加入我们的QQ群!(QQ搜索 1074281704,加入我们的QQ群吧!)
有任何问题,也可以加入我们的QQ群,欢迎交(che)流(dan)!也欢迎参观我的博客www.aquestian.cn!
更多推荐
所有评论(0)