live2d看板娘分享我的老婆系列 , Vue实现看板娘!!!

最近在网上看到一个很可爱的插件老婆???不行啊,我也要整一个!!!但是…最后通过各种操作,终于搞定了,因为掉进很多坑,我想和大家分享一下如何正常的写出老婆.这种类型的看板娘在网上有很多,不过也不劳烦大家去找了,我直接把网上下的换成百度云连接了兄弟们一起用吧链接：https://pan.baidu.com/s/1bpI38CM6eFHfRdTEM-CYbw提取码：8wf1连接用不...

Ryan_black

3305人浏览 · 2019-12-12 23:26:15

Ryan_black · 2019-12-12 23:26:15 发布

文章目录

1.前言
2.流程

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>

第三步:运行程序!打开页面!!!

在这里插入图片描述

哇!!!老婆!!!

兄弟萌!学会了吗?!!

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^