成品如图:

那么几步简单说明怎么用吧:

第一,先去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的更多相关文章

  1. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  2. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  3. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  4. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  5. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  6. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  7. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

随机推荐

  1. Android studio 运行打包 Ionic 项目

    1.创建项目 ionic start myapp tabs 2.cd 到项目文件夹中 3.ionic cordova platfrom add android 执行这个命令后建议修改一下应用包名称,参 ...

  2. ISO/IEC 9899:2011 条款6.5.6——加法操作符

    6.5.6 加法操作符 语法 1.additive-expression: multiplication-expression additive-expression    +    multipli ...

  3. Linux expect的安装与使用

    Expect是在Tcl的基础上创建的,可以用来做一些Linux下无法做到交互的命令操作,可用于远程管理服务器. 一.安装Tcl: 1.下载源码包: wget http://nchc.dl.source ...

  4. [译]如何在GitHub仓库创建一个标签tag, 并推送到远程分支?

    问: 我在GitHub上有一个仓库,我需要给他打个tag.我在shell打了tag,但是在Github上没有显示出来.我还要做其他什么么? 我在shell中使用的命令是: git tag 2.0 当我 ...

  5. RabbitMQ 入门教程(PHP版) 第四部分:路由(Routing)

    路由(Routing) 在前面的第三部分教程中,我们实现了一个简单的日志系统.可以把日志消息广播给多个接收者. 本篇教程中我们打算新增一个功能——使得它能够只订阅消息的一个字集.例如,我们只需要把严重 ...

  6. bootstrap 自带字体颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 02点睛Spring MVC 4.1-@RequestMapping

    转发地址:https://www.iteye.com/blog/wiselyman-2213907 2.1 @RequestMapping @RequestMapping是SpringMVC的核心注解 ...

  8. Python:实现图片裁剪的两种方式——Pillow和OpenCV

    原文:https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还 ...

  9. Redis概述与基本操作

    redis教程 概述 redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(strin ...

  10. 向多个git仓库提交

    查看所有远程仓库 为了不用每次输密码,可以先配置ssh key 查看 添加远程仓库 git remote add origin1 git@other:YYYYYYYYYY/AA.git 向新的代码仓库 ...