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

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

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

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

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

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

根目录下

app.html中：

{{HEAD}}

{{APP}}

L2Dwidget.init({

"display": {

"superSample": 2,

"width": 200,

"height": 300,

"position": "right",

"hOffset": 0,

"vOffset": 0

}

});

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

显示效果