用html5看板娘,记在nuxt.js中引入一个萌哒哒的看板娘（Live2d模型）

在vue中引入看板娘很简单，网上资源也很多

那么在nuxt中如何引入呢？这个问题我试了好多好多方法，像vue一样引入全局组件。。。都不行，最后找到了一个方法。

其实就是运用nuxt中的app.html属性，然后像在html中引入live2d一样。

1、将看板娘需要的静态资源引入static文件夹，为什么引到这里，因为这里的资源webpack不会编译，具体到官网中查看。

2、在根目录下新建一个app.html文件，就是nuxt的模板，每一个生成的html页面都依照这个格式，里面放入script标签就会自动加载具体如下

根目录下

app.html中：

L2Dwidget.init({

"display": {

"superSample": 2,

"width": 200,

"height": 300,

"position": "right",

"hOffset": 0,

"vOffset": 0

}

});

这样就可以在nuxt项目中显示啦

显示效果

用html5看板娘,记在nuxt.js中引入一个萌哒哒的看板娘（Live2d模型）相关推荐

nuxt.js中的静态图片显示不出来解决方法
nuxt.js中的静态图片显示不出来解决方法 <script> export default {data() {return {imgList: [{ name: "图1&quo ...
webpack 在js中引入静态图片
原文链接: webpack 在js中引入静态图片上一篇: gif 屏幕录制下一篇: js 使用默认参数达到强制参数的目的在js中引入静态文件在自己实现一个tab组件时遇到这个问题,点击不同的t ...
在js中让一个text输入框的默认日期是今天
在js中让一个text输入框的默认日期是今天日期:<input type="text" name="" id="tiss_rq" s ...
js中写一个函数，第一秒打印1，第二秒打印2
js中写一个函数,第一秒打印1,第二秒打印2 1.用let块级作用域 for(let i = 0;i<5;i++){setTimeout(()=>{console.log(i);},100 ...
JS中定义一个二维数组
JS中定义一个二维数组方法一 var _TheArray = [["0-1","0-2"],["1-1","1-2"] ...
html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面
1.项目简介 Nuxt.js是目前比较热门的服务端渲染SSR框架.凭借其更好的SEO.更快的内容到达时间(*首屏渲染速度快*) 加之基于Vue.js技术开发,更易于上手,获得了很多技术开发者的青睐. ...
Nuxt.js 中定制 error.vue 错误缺省页
一.介绍在Nuxt.js项目中,当接口报错或后台数据返回异常时,前端展示就会呈现接口报错的信息,这会给用户非常不好的体验.所以当出现404.500等应用错误时,我们可以在项目的根目录下创建layou ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
Three.js中引入dat.gui库实现界面组件控制动画速度变量
场景 Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/arti ...

用html5看板娘,记在nuxt.js中引入一个萌哒哒的看板娘（Live2d模型）

用html5看板娘,记在nuxt.js中引入一个萌哒哒的看板娘（Live2d模型）相关推荐

最新文章

热门文章