vue项目中添加live2d添加动画人、动物

效果展示：

官方配置文档：l2dwidget.js.org/docs/class/…

第一步先去下载插件素材：github.com/xiazeyu/liv… 第二，将packge里面的静态资源放到你的vue项目的static下

第三步：在入口文件html里面引入js文件

<script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>
所需js如果找不到可去这里下载https://github.com/jensonjing/l2dwidge

第四步：在app.vue里面加入以下代码即可

//配置文件
const config = {
  pluginRootPath: 'static/live2dw/',//插件在站点上的根目录(相对路径)
  pluginJsPath: 'assets/libs/',//脚本文件相对与插件根目录路径
  pluginModelPath: 'live2d-widget-model-hijiki/assets/',//模型文件相对与插件根目录路径
  tagMode: false,//标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false,//调试, 是否在控制台输出日志
  name:{
    canvas:'MId'//自定义cavas标签的id（可不需要）
  },
  model: {
    jsonPath: '../../static/live2dw/live2d-widget-model-hijiki/assets/hijiki.model.json', //主文件路径
    scale:1,//模型与canvas的缩放
  },
  display: { 
    superSample: 2, // 超采样等级
    position: 'right', //显示位置：左或右
    width: 100,// canvas的长度
    height: 150,//canvas的高度
    hOffset:-20,//canvas水平偏移
    vOffset:-40,//canvas垂直偏移

  },
  react:{//透明度条件
    opacityDefault:1,//默认透明度
    opacityOnHover: 0.5//鼠标移上透明度
  },
  dev:{
    border:false,//在canvas周围显示边界
  },
  mobile: { 
    show: true,//是否在移动设备上显示
    scale:0.5,//移动设备上的缩放
    motion: true, // 移动设备是否开启重力感应
  },
  log: false,
  dialog:{
    enable:false,//显示人物对话框
    hitokoto:false,//使用一言API
  }
};
L2Dwidget.init(config)