vue安装yang_手摸手教你制作自己的vue插件

        在即时聊天中经常会发送emoji表情，本次就以在git上一个现成的vue插件例子来给大家一步一步讲解如何用一个调试好的vue组件来制作插件，再上传到npm官网提供给大家下载使用。本次讲解主要目的是讲清楚vue插件的创建步骤，所以涉及到业务处理的地方会尽量简洁。

参考git地址：

https://github.com/DCzajkowski/vue-emoji-picker

        1.首先安装vue-cli，通过vue create vue-emoji-input初始化一个vue项目。components文件夹下初始化想要创建的组件，目录结构如下：

        在emoji-pick文件夹中，简化了emoji表情选择器的实现，实现效果如图：

        我们可以点击emoji按钮来触发表情选择面板。点击表情后，会自动添加到输入框中。

        代码模版中首先是触发按钮的一个具名插槽，可以控制表情面板的显示。下边就是从插件的库文件夹lib引入emojis表情ÿ