vue中使用live2d，看板娘！

客官°小女子只卖身不卖艺 2024-04-17 05:58 59阅读 0赞

普通的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中，就不是这么用了。！

起初我以为需要，可以引入插件，于是找到了[live2d4*vue*][live2d4_vue]，这个东西已经是一年前的的，而且作者也杳无音信了。浪费了一番周折之后，找到了新的办法！

在具体讲这个之前，说一下这个的用处！

毫无用处，只为装逼！![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxMzUwMTc4MDguZ2lm][]

懂了吧！

那么我现在给大家简单介绍一些，非常简单！

只需要三步！

1.到我的百度云盘中下载，这些个你的老婆，有好多！你们老婆作者的github地址，[https://github.com/EYHN/hexo-helper-live2d][https_github.com_EYHN_hexo-helper-live2d]  你们先去拜访一下老丈人，感兴趣可以star一下！

然后咱们看再看看，你的老丈人给你提供了，哪些个老婆。风格迥异，各取所需！

[https://huaji8.top/post/live2d-plugin-2.0/][https_huaji8.top_post_live2d-plugin-2.0]!

我的网盘：[https://pan.baidu.com/s/1cvkqdrn9UO9\_Embw84i0Cg][https_pan.baidu.com_s_1cvkqdrn9UO9_Embw84i0Cg]   不好使联系我qq289373410，本人帅的一批，非诚勿扰哦！![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxNDA2MDk5ODQuZ2lm][]

2.下载好以后，把live2dw这个文件复制到你的vue项目的static下，如图！

![format_png][]

并在index.html中引入js

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)
    }

这里具体讲一下，![format_png 1][]

ok，大张旗鼓三步走结束，咱们看一下效果！

![20190825144435708.gif][] 这个是我媳妇

ok，又跟大家说再见的时候了，请爱惜自己的老婆，拜了个拜！

![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxNDMzMzIyNTQuZ2lm][]

### 加入我们群 ###

如果有需要，欢迎可以加入我们的QQ群！（QQ搜索 1074281704，加入我们的QQ群吧！）  
有任何问题，也可以加入我们的QQ群，欢迎交（che）流（dan）！也欢迎参观我的博客[www.aquestian.cn][]！

[live2d4_vue]: https://github.com/wseven7677/live2d4vue
[aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxMzUwMTc4MDguZ2lm]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxMzUwMTc4MDguZ2lm
[https_github.com_EYHN_hexo-helper-live2d]: https://github.com/EYHN/hexo-helper-live2d
[https_huaji8.top_post_live2d-plugin-2.0]: https://huaji8.top/post/live2d-plugin-2.0/
[https_pan.baidu.com_s_1cvkqdrn9UO9_Embw84i0Cg]: https://pan.baidu.com/s/1cvkqdrn9UO9_Embw84i0Cg
[aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxNDA2MDk5ODQuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxNDA2MDk5ODQuZ2lm
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxNDE0NTUxOTIucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxNDIzNDQ3NjAucG5n?x-oss-process=image/format,png
[20190825144435708.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/3268c3fd68274dc6b348a6cdb94cfc55.gif
[aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxNDMzMzIyNTQuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDgvMjAxOTA4MjUxNDMzMzIyNTQuZ2lm
[www.aquestian.cn]: http://www.aquestian.cn/