人间蒸发
2019-08-25 14:33:38
沙雕程序员(六)—— vue中使用看板娘-----装逼利器,Interesting!!!
普通的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/!
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,又跟大家说再见的时候了,请爱惜自己的老婆,拜了个拜!
评论