前言（PS:本教程使用的Vue項目）

接上一篇簡單版的Live2D看板娘的教程，這次使用高級一點點的，花里胡哨的還有很多，可自行百度，簡直眼花繚亂，我這也是剛研究的，后面還搞出什么花樣了，再發后續。。。好了好了，步入正題吧，開肝~

一、下載文件

要玩看板娘，需要一些寫好的資源文件，下載地址我提供我的
百度網盤鏈接:https://pan.baidu.com/s/17BCwplSrAPDUc9zlEVgiyA

提取碼: 5418
也可以掃下面這個二維碼

在這里插入圖片描述

二、使用步驟

1.引入文件

將下載好的文件放入到項目目錄下的static文件夾下，沒有該文件夾的放到與index.html同級的存放靜態資源文件目錄下如public下。

在這里插入圖片描述

2.引入js

將所需的js在index.html頁面引入即可，注意js的路徑，如果有問題得改成你自己的路徑，不要犯這種傻哦：

<!-- 看板娘 -->
  <script type="text/javascript" src="./static/live2dw/lib/L2Dwidget.min.js"></script>

3.修改app.vue

將如下代碼寫入app.vue中，具體參數也寫在里面了：

 export default {
    name: 'App',
    /*看板娘初始化 參數說明 model 模型的配置 json 文件資源路徑，可以支持網絡路徑，此處使用的是相對路徑 scale 模型縮放系數 display 模型布局 position 位置 width 寬度 height 高度 hOffset 水平偏移量 vOffset 垂直偏移量 mobile 移動端配置 show 顯示/隱藏 scale 縮放比例 react 模型矩形框樣式 opacity 透明度 opacityDefault 默認透明度 opacityOnHover 鼠標懸浮透明度 */
    created() {
        setTimeout(() => {
            window.L2Dwidget.init({
                pluginRootPath: '../static/live2dw/',
                pluginJsPath: 'lib/',
                pluginModelPath: 'live2d-widget-model-haru_2/assets/', //中間這個haru_2就是你的老婆,想換個老婆,換這個就可以了
                tagMode: false,
                debug: false,
                model: { jsonPath: '../static/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json' }, 
                display: { position: 'left', width: 350, height: 800 },  //調整大小,和位置
                mobile: { show: true },   //要不要盯着你的鼠標看
                log: false,
            })
        }, 1000)
    }
  }