vue项目配置看板娘

这个博主讲的不错,很清楚,但是我实操时无法找到资源,一直报404找不到模型,苦恼了我很久也没解决,之后发现了 Evgo的项目,这就简单多了

最简单的引入Vue看板娘教程

一、项目引入

这里使用的是来自Evgo老哥的 vue-live2d

使用简单,直接引入就好。具体的可以看老哥的文档

二、简单实现

在你的项目引入(如果失败就搭个梯子,或者n'p换国内镜像)

npm install vue-live2d

接着在想要引入看板娘的组件下

import live2d  from 'vue-live2d'

components: {
    live2d
  },
  data () {
    return {
      direction: 'right',
      style: '',
      width: 500,
      height: 500,
      size: 350,
      tips: {
        mouseover: [{
          selector: '.vue-live2d',
          texts: ['这样可以修改默认语句']
        }]
      }
    }
  }
 

三、部分参考文档

 更多的你们可以去github上面看作者的介绍

 GitHub - evgo2017/vue-live2d: vue live2d 看板娘(Demo: https://evgo2017.com/repo/vue-live2d)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/522326.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

03-JAVA设计模式-工厂模式详解

工厂模式 工厂设计模式是一种创建型设计模式,它提供了一种封装对象创建过程的机制,将对象的创建与使用分离。 这种设计模式允许我们在不修改客户端代码的情况下引入新的对象类型。 在Java中,工厂设计模式主要有三种形式:简单工厂…

每日OJ题_优先级队列_堆③_力扣692. 前K个高频单词

目录 力扣692. 前K个高频单词 解析代码 力扣692. 前K个高频单词 692. 前K个高频单词 难度 中等 给定一个单词列表 words 和一个整数 k ,返回前 k 个出现次数最多的单词。 返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率&#xff0c…

潜水后可以戴耳机吗?精选四款防水游泳耳机,不惧水压挑战

随着生活水平的提高,人们越来越注重健康与休闲娱乐。潜水作为一项集运动、探险和乐趣于一身的活动,近年来受到了越来越多的关注。然而,在享受潜水带来的乐趣的同时,我们也希望能够在水下保持与外界的联系,例如欣赏音乐…

经济学 赋税

赋税: 1.为政府服务提供金钱来源 2. 用于保护环境 3.帮助国家使用财政和货币政策,推动经济增长 4.再分配社会财富的一种方式,平衡富人和穷人的贫富差距 5.帮助我们支付市场自身可能无法实现的服务,比如公共安全,国…

【MySQL】解决修改密码时报错:--skip-grant-tables option

首先我们先了解到为何会出现如上报错: 是因为我们在第一次配置MySQL中的my.cnf时,我们添加了–skip–grant-tables 选项 跳过验证身份的选项 所以,我们第一次登录成功后想要修改密码会出现如下报错: [hxiZ0jl69kyvg0h181cozuf5Z…

如何高效学习Python编程语言

理解Python的应用场景 不同的编程语言有不同的发展历史和应用场景,了解Python主要应用在哪些领域对于学习它会有很大帮助。Python最初是一种通用脚本语言,主要用于系统级任务自动化。随着时间的推移,它逐步成为数据处理、科学计算、Web开发、自动化运维等众多领域的主要编程语…

Vue - 3( 15000 字 Vue 入门级教程)

一:初识 Vue 1.1 收集表单数据 收集表单数据在Vue.js中是一个常见且重要的任务,它使得前端交互变得更加灵活和直观。 Vue中,我们通常使用v-model指令来实现表单元素与数据之间的双向绑定,从而实现数据的收集和更新。下面总结了…

深入浅出 -- 系统架构之负载均衡Nginx反向代理

一、Nginx反向代理-负载均衡 首先通过SpringBootFreemarker快速搭建一个WEB项目:springboot-web-nginx,然后在该项目中,创建一个IndexNginxController.java文件,逻辑如下: Controller public class IndexNginxControl…

卷积神经网络实战

构建卷积神经网络 卷积网络中的输入和层与传统神经网络有些区别,需重新设计,训练模块基本一致 1.首先读取数据 - 分别构建训练集和测试集(验证集) - DataLoader来迭代取数据 # 定义超参数 input_size 28 #图像的总尺寸28*28…

优雅强大的前端管理模板——Soybean Admin

公众号:【可乐前端】,每天3分钟学习一个优秀的开源项目,分享web面试与实战知识,也有全栈交流学习摸鱼群,期待您的关注! 每天3分钟开源 hi,这里是每天3分钟开源,很高兴又跟大家见面了&#xff0…

python 03序列(列表和元组)

列表 1.创建 x[1,2,3,4,5,6,7,8,9,10] print(x) 或者是 y[a,b,c,d,e,f,g,h] print(y) 2.访问 (1)取出一个元素 x[0] #取出第0号,即List里第一个元素 (2)取出多个连续元素 通过两个索引值实现,第一…

专题【双指针】【学习题】刷题日记

题目列表 11. 盛最多水的容器 42. 接雨水 15. 三数之和 16. 最接近的三数之和 18. 四数之和 26. 删除有序数组中的重复项 27. 移除元素 75. 颜色分类 167. 两数之和 II - 输入有序数组 2024.04.06 11. 盛最多水的容器 题目 给定一个长度为 n 的整数数组 height 。有 n 条垂…

MATLAB - mpcobj = mpc(model,ts,P,M,W,MV,OV,DV) 函数

系列文章目录 前言 模型预测控制器使用线性工厂、干扰和噪声模型来估计控制器状态并预测未来的工厂输出。控制器利用预测的设备输出,解决二次规划优化问题,以确定控制动作。 有关模型预测控制器结构的更多信息,请参阅 MPC 预测模型。 一、语法…

SpringMVC--概述 / 入门

目录 1. SpringMVC简介 2. 配置&入门 2.1. 开发环境 2.2. 创建maven工程 2.3. 手动创建 web.xml 2.4. 配置web.xml 2.4.1. 默认配置方式 2.4.2. 扩展配置方式 2.5. 创建请求控制器 2.6. 创建springMVC的配置文件 2.7. 测试 HelloWorld 2.7.1. 实现对首页的访问…

OJ在线比赛系统(人员管理、赛题发布、在线提交、题目审核、成绩录入)

系统功能设计 技术栈:springboot,jdk8,vue3,element-plus,mybatis-plus 1.java后端系统 首先需要学生通过前端注册页面和java后端系统将个人信息写入数据库,包含学号、姓名、班级以及需要爬取网站的相关信息(例如AtCoder账号信…

智谱清言 HTTP调用 + postman使用

官方教程 接口鉴权 非SDK用户鉴权 官方网站 第一步 获取您的 API Key 第二步 使用 JWT 组装 用户端需引入对应 JWT 相关工具类,并按以下方式组装 JWT 中 header、payload 部分 1、header 具体示例 {“alg”:“HS256”,“sign_type”:“SIGN”} alg : 属性表…

批量导入svg文件作为图标使用(vue3)vite-plugin-svg-icons插件的具体应用

目录 需求svg使用简述插件使用简述实现安装插件1、配置vite.config.ts2、src/main.ts引入注册脚本3、写个icon组件4、使用组件 需求 在vue3项目中,需要批量导入某个文件夹内数量不确定的svg文件用来作为图标,开发完成后能够通过增减文件夹内的svg文件&a…

ICLR 2024 | 联邦学习后门攻击的模型关键层

ChatGPT狂飙160天,世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 联邦学习使多个参与方可以在数据隐私得到保护的情况下训练机器学习模型。但是由于服务器无法…

论文阅读——MVDiffusion

MVDiffusion: Enabling Holistic Multi-view Image Generation with Correspondence-Aware Diffusion 文生图模型 用于根据给定像素到像素对应关系的文本提示生成一致的多视图图像。 MVDiffusion 会在给定任意每个视图文本的情况下合成高分辨率真实感全景图像,或将…

亚信安慧AntDB:开启数据洞察的新视野

AntDB一直秉承着“技术生态”的理念,不断进行技术创新和功能增强,以保持与先进数据库系统的竞争力。作为一款致力于提升数据库处理性能和稳定性的系统,AntDB在技术上始终保持敏锐的洞察力,不断汲取国内外先进技术的精华&#xff0…