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工程中，每一個<Live2d />組件就是一個模型，有可配置的props來修改畫布大小、模型文件以及模型動作。

也就是說，對于一個vue工程，你可以很整潔地引入live2d模型，并且使用這個模型實現比看板娘更多更豐富的功能。

關于插件的具體安裝使用方法和參數api請查看github倉庫，插件倉庫地址：https://github.com/wseven7677/live2d4vue，歡迎大家使用、交流～

201909更新：

在這一年多時間非常感謝大家使用我的插件，從收到的反饋來看，插件還是有很多需要完善的地方，包括提供一個可運行的官方demo等等
主要是2019年我玩別的去了，沒怎么玩live2d了，導致遲遲沒有時間更新插件。。
（我剛才甚至搜到一位朋友在他的文章中提到live2d4vue的作者“杳無音信”了，嚇得我趕緊刷新一下存在感（不是））

也有看到其他關鍵詞是live2d、vue的插件，大家都很勤勞很厲害，不過我可能還是會按我的思路繼續做下去

總之再次感謝～2019年我還收獲好幾十個star，開心～至于插件更不更新還要看排期 。。
end

總結

以上是生活随笔為你收集整理的Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。