在vue項目中使用live2d

成品如圖：

 

 

 那么幾步簡單說明怎么用吧：

第一，先去github上下載相應的靜態資源：

https://github.com/xiazeyu/live2d-widget-models

第二，將packge里面的靜態資源放到你的vue項目的static下

 

 第三、在入口文件html里面加入

 <script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>

 

並在app.vue里面加入：

<script>
export default {
  name: 'App',
  created () {
      setTimeout(() => {
          window.L2Dwidget.init({
          pluginRootPath: 'static/live2dw/',
          pluginJsPath: 'lib/',
          pluginModelPath: 'live2d-widget-model-z16/assets/',
          tagMode: false,
          debug: false,
          model: { jsonPath: '../static/live2dw/live2d-widget-model-z16/assets/z16.model.json' },
          display: { position: 'right', width: 300, height: 650 },
          mobile: { show: true },
          log: false
          })
      }, 1000)
  },
}
</script>

 

注意上面有顏色的地方可以換模型

大功告成。

但是注意一件事：static文件夾必須和html在同一個文件夾下，不然會報錯Unexpected token '<'，很奇怪。。