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>
第三步:運行程序!打開頁面!!!
哇!!!老婆!!!
兄弟萌!學會了嗎?!!
