在vue项目中使用live2d
成品如图:

那么几步简单说明怎么用吧:
第一,先去github上下载相应的静态资源:
https://github.com/xiazeyu/live2d-widget-models
第二,将packge里面的静态资源放到你的vue项目的static下

第三、在入口文件html里面加入
<script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>
并在app.vue里面加入:
<script>
export default {
name: 'App',
created () {
setTimeout(() => {
window.L2Dwidget.init({
pluginRootPath: 'static/live2dw/',
pluginJsPath: 'lib/',
pluginModelPath: 'live2d-widget-model-z16/assets/',
tagMode: false,
debug: false,
model: { jsonPath: '../static/live2dw/live2d-widget-model-z16/assets/z16.model.json' },
display: { position: 'right', width: 300, height: 650 },
mobile: { show: true },
log: false
})
}, 1000)
},
}
</script>
注意上面有颜色的地方可以换模型
大功告成。
但是注意一件事:static文件夹必须和html在同一个文件夹下,不然会报错Unexpected token '<',很奇怪。。
在vue项目中使用live2d的更多相关文章
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- Vue项目中GraphQL入门学习与应用
1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...
随机推荐
- Android studio 运行打包 Ionic 项目
1.创建项目 ionic start myapp tabs 2.cd 到项目文件夹中 3.ionic cordova platfrom add android 执行这个命令后建议修改一下应用包名称,参 ...
- ISO/IEC 9899:2011 条款6.5.6——加法操作符
6.5.6 加法操作符 语法 1.additive-expression: multiplication-expression additive-expression + multipli ...
- Linux expect的安装与使用
Expect是在Tcl的基础上创建的,可以用来做一些Linux下无法做到交互的命令操作,可用于远程管理服务器. 一.安装Tcl: 1.下载源码包: wget http://nchc.dl.source ...
- [译]如何在GitHub仓库创建一个标签tag, 并推送到远程分支?
问: 我在GitHub上有一个仓库,我需要给他打个tag.我在shell打了tag,但是在Github上没有显示出来.我还要做其他什么么? 我在shell中使用的命令是: git tag 2.0 当我 ...
- RabbitMQ 入门教程(PHP版) 第四部分:路由(Routing)
路由(Routing) 在前面的第三部分教程中,我们实现了一个简单的日志系统.可以把日志消息广播给多个接收者. 本篇教程中我们打算新增一个功能——使得它能够只订阅消息的一个字集.例如,我们只需要把严重 ...
- bootstrap 自带字体颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 02点睛Spring MVC 4.1-@RequestMapping
转发地址:https://www.iteye.com/blog/wiselyman-2213907 2.1 @RequestMapping @RequestMapping是SpringMVC的核心注解 ...
- Python:实现图片裁剪的两种方式——Pillow和OpenCV
原文:https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还 ...
- Redis概述与基本操作
redis教程 概述 redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(strin ...
- 向多个git仓库提交
查看所有远程仓库 为了不用每次输密码,可以先配置ssh key 查看 添加远程仓库 git remote add origin1 git@other:YYYYYYYYYY/AA.git 向新的代码仓库 ...