1.前言
最近在网上看到一个很可爱的插件
老婆???
不行啊,我也要整一个!!!但是…
最后通过各种操作,终于搞定了,因为掉进很多坑,我想和大家分享一下如何正常的写出老婆.
这种类型的看板娘在网上有很多,不过也不劳烦大家去找了,我直接把网上下的换成百度云连接了兄弟们一起用吧
链接：https://pan.baidu.com/s/1bpI38CM6eFHfRdTEM-CYbw
提取码：8wf1
连接用不了还有二维码呢!!!
连接里面
2.流程
流程正式开始!!!
我使用的是Vue-cli脚手架,我搭建的项目是长这样的:
我们需要放点东西进去:
首先是我们的public共享文件夹
把我们的老婆们!拷进去!
第二步:拷贝我的代码!!!
有什么不懂的请看注释,我觉得注释应该没写错,如果写错了还请见谅!!!
APP.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name : 'app',
created () { //页面钩子函数:页面加载完成后触发
setTimeout(() => { //定时器,created执行一秒后触发
window.L2Dwidget.init({
pluginRootPath: 'live2dw/', //指向你的目录
pluginJsPath: 'lib/', //指向你的目录
pluginModelPath: 'live2d-widget-model-nico/assets/', //中间这个koharu就是你的老婆,想换个老婆,换这个就可以了
tagMode: false,
debug: false,
model: { jsonPath: '/live2dw/live2d-widget-model-koharu/assets/koharu.model.json' }, //中间这个koharu就是你的老婆,想换个老婆,换这个就可以了
display: { position: 'right', width: 150, height: 300 }, //调整大小,和位置
mobile: { show: true }, //要不要盯着你的鼠标看
log: false
})
}, 300) //页面加载完成之后多久触发(好像是这个)
}
}
</script>
<style>
</style>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 需要用的样式导入 -->
<link rel="stylesheet" type="text/css" href="assets/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>my_project</title>
</head>
<body>
<noscript>
<strong>We're sorry but eui002 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<script src="/live2dw/lib/L2Dwidget.min.js"></script>
<audio id="a1"></audio>
<div id="app">
<!-- 该处展示live2d模型 -->
<div class="waifu" style=" position:fixed;bottom:0;right:70px;">
<!-- 该处是对话框 -->
<div class="waifu-tips" style="width: 80%;"></div>
<!-- 该处是live2d -->
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<!-- 该处是工具 -->
<div class="waifu-tool">
<!-- <span class="fui-home"><img src="./assets/image/zhuye.png" alt=""></span> -->
<span class="fui-chat"><img src="./assets/image/chat.png" alt=""></span>
<span class="fui-eye"><img src="./assets/image/role.png" alt=""></span>
<span class="fui-user"><img src="./assets/image/huanzhuang.png" alt=""></span>
<span class="fui-photo"><img src="./assets/image/paizhao.png" alt=""></span>
<span class="fui-info-circle"><img src="./assets/image/info.png" alt=""></span>
<span class="fui-cross"><img src="./assets/image/close.png" alt=""></span>
</div>
</div>
</div>
</body>
</html>
第三步:运行程序!打开页面!!!
哇!!!老婆!!!
兄弟萌!学会了吗?!!
