在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 ...
随机推荐
- Python3基础 函数 多值参数 元组与字典形式(键值对分别指出)
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- Linux下文件乱码问题
通常编码会在windows环境下进行,当把windows下的代码拷贝到linux环境时,会出现 error: “build.sh /bin/bash^M: 坏的解释器:没有那个文件或目录” 等等类似问 ...
- Python3实战——爬虫入门
一.安装库 使用conda安装: conda install requests 如果出现解析环境问题,需要激活conda环境: https://www.cnblogs.com/jdemarryme/p ...
- windows驱动程序中的预处理含义
#pragma code_seg(“PAGE”) 作用是将此部分代码放入分页内存中运行. #pragma code_seg() 将代码段设置为默认的代码段 #pragma code_seg(&q ...
- Spring cloud微服务安全实战-6-9sentinel之熔断降级
来讲一下降级规则 服务会互相调用,服务A会有一些服务之间的依赖. 假设服务D的响应时间变长了.A调用D就会卡住了. 熔断,某一个服务出现问题,会把服务拖死.如果A出现,会把依赖A的那些服务拖死. 主要 ...
- Qt编写气体安全管理系统18-数据库设置
一.前言 作为一个管理系统,数据库肯定是不可或缺的,Qt内置的sqlite数据库已经是够用的,而且本人亲测数据量能支持亿级别,而不是像网上很多人说的千万级别,我模拟过一亿多条数据,依然能够很好的查询, ...
- java.net.NoRouteToHostException: Cannot assign requested address 问题分析(端口被用完的解决方法)
问题: 错误原因: 由于liunx 分配的客户端连接端口用尽,无法建立socket连接所致,虽然socket正常关闭,但是端口不是立即释放,而是处于 TIME_WAIT 状态,默认等待60s后释放.查 ...
- 深入理解ElasticSearch(PDF版 内含目录)
深入理解ElasticSearch 介绍: 本书涵盖了Elasticsearch的许多中高级功能,并介绍了缓存.ApacheLucene库以及监控等模块的内部运作机制.其中,还涉及一些实用案例,比如配 ...
- F5 BIG-IP – Useful SNMP oids to monitor
I have collected some of the most interesting OIDs (in my scenario im using LTM and APM modules) fro ...
- Python - Django - 组件
网站中通常会有一个导航条,如下图 这个导航条在很多页面都会存在 可以把导航条做成一个组件,让要显示导航条的网页包含 导航条组件 nav.html: <h1>假装这是一个导航条</h1 ...