Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型

Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型

前面的废话：

Live2d火过一阵，因为当我搜索“live2d 添加到网页上“的时候可以看到很多宅友已经给自己的博客首页加上了live2d看板娘并且发了博客跟大家分享了添加方法。

Live2d官方已经开源了网页上用的WebGL SDK，还提供了若干示例代码，鼓励开发者在更多场景下使用live2d。不过感觉最近十几个月感觉已经听说不到关于live2d的消息了，有一种逐渐变凉的气息啊。确实，目前live2d主流的应用场景似乎不是太多（？），手机端大多是二次元手游里的角色在使用，而网页上就是。。。看板娘，比如一些博客首页的，比如b站网页直播间的。

看板娘教程看多了以后就会发现，大家几乎都是将某个大神写好的一个什么，直接添加到自己博客的html代码中，用script一引入就完成了（有时甚至模型文件都是一样的，更不用说人物的动作、对话形式）。想来大家都是一时新鲜，体验一番即可，并不想费麻烦事去自己改写什么（好看又能调戏不就够了吗？？！！）。

本人因为如下原因：

• 并不是想添加看板娘
• 不想要批量生产的感觉
• 在vue工程中引入并自定义动作似乎不是很方便？

而决定自己包装一个vue插件，用于将live2d模型引入前端工程，展示在网页上并可以实现交互。我基于官方提供的WebGL SDK和示例代码制作了插件，目前已经实现了必要功能并发布啦，希望这个插件带来的便利性可以让更多人有机会发掘出live2d更多的玩法，给大家带来快乐～

正文：

插件名字叫作 live2d4vue （live2d for vue），可以使用npm很方便地安装在你的vue工程中，每一个组件就是一个模型，有可配置的props来修改画布大小、模型文件以及模型动作。

也就是说，对于一个vue工程，你可以很整洁地引入live2d模型，并且使用这个模型实现比看板娘更多更丰富的功能。

关于插件的具体安装使用方法和参数api请查看github仓库，插件仓库地址：https://github.com/wseven7677/live2d4vue，欢迎大家使用、交流～

201909更新：

在这一年多时间非常感谢大家使用我的插件，从收到的反馈来看，插件还是有很多需要完善的地方，包括提供一个可运行的官方demo等等
主要是2019年我玩别的去了，没怎么玩live2d了，导致迟迟没有时间更新插件。。
（我刚才甚至搜到一位朋友在他的文章中提到live2d4vue的作者“杳无音信”了，吓得我赶紧刷新一下存在感（不是））

也有看到其他关键词是live2d、vue的插件，大家都很勤劳很厉害，不过我可能还是会按我的思路继续做下去

总之再次感谢～2019年我还收获好几十个star，开心～至于插件更不更新还要看排期 。。
end