在即时聊天中经常会发送emoji表情，本次就以在git上一个现成的vue插件例子来给大家一步一步讲解如何用一个调试好的vue组件来制作插件，再上传到npm官网提供给大家下载使用。本次讲解主要目的是讲清楚vue插件的创建步骤，所以涉及到业务处理的地方会尽量简洁。
git地址：github.com/DCzajkowski…
1.首先安装vue-cli，通过vue create vue-emoji-input初始化一个vue项目。components文件夹下初始化想要创建的组件，目录结构如下：
在emoji-pick文件夹中，简化了emoji表情选择器的实现，实现效果如图：
我们可以点击emoji按钮来触发表情选择面板。点击表情后，会自动添加到输入框中。模版中首先是触发按钮的一个具名插槽，可以控制表情面板的显示。下边就是从插件的库文件夹lib引入emojis表情，再把emoji表情逐个渲染到表情面板上，可以通过panelWidth等props参数来控制面板的宽高位置。
<template>
<div style="position:relative;display:inline-block;">
<slot
name="emoji-invoker"
:events="{ click: (e) => toggle(e) }">
</slot>
<div
v-if="display.visible"
v-click-outside="hide">
<div class="emojipanel" :style="`width:${panelWidth}px;height:${panelHeight}px;bottom:${posBottom}px;left:${posLeft}px`">
<span
v-for="(emoji, emojiName) in emojis"
:key="emojiName"
:title="emojiName"
style="margin:0 4px 0 0;font-size: 18px;"
@click="insert(emoji)"
>{{ emoji }}</span>
</div>
</div>
</div>
</template>
当点击表情的时候，会触发insert方法，冒泡到父组件中。
insert(emoji) {
this.$emit('emoji', emoji)
}
在app根节点中引入子组件，在父组件中通过insert方法来为输入框中追加emoji表情：
2.在调试好了组件以后，在组件文件夹中添加vue插件的注册方法。vue的插件是用一个类来定义的，其中有一个函数名为install的方法专门为vue提供插件注册的功能：
import EmojiPicker from './EmojiPicker.vue'
const EmojiPickerPlugin = {
install(Vue, options = {}) {
Vue.component('emoji-picker', EmojiPicker)
},
}
export default EmojiPickerPlugin
3.通过webpack对插件进行打包，并且解析ES6语法。 首先在组件的文件夹中初始化node项目：
npm init
然后安装打包时用到的包：
npm install --save-dev webpack-cli babel-core babel-loader @babel/preset-env vue-loader css-loader
此处一定要用--save-dev来安装开发时依赖，如果按照默认的安装了线上依赖，那么每次用户下载npm包的时候都会自动下载node_modules文件夹。
添加webpack打包配置文件如下：
var path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'main.js',
library: 'es6Module',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ["@babel/preset-env"]
}
},
{
test: /\.css$/,use: ["vue-style-loader", "css-loader"]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#source-map',
plugins:[
new VueLoaderPlugin()
]
}
entry: './main.js'是刚才添加的组件入口文件。output配置的是打完包的文件的目录和入口文件，入口文件为dist/main.js。 在package.json文件中，通过main配置项来配置import引入到项目后的入口，即dist/main.js。
{
"name": "emoji-pick",
"version": "1.0.0",
"description": "a emoji picker",
"main": "dist/main.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --hide-modules"
},
"keywords": [
"emoji",
"input"
],
"author": "yang",
"license": "MIT",
" devDependencies": {
"@babel/preset-env": "^7.6.2",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"vue-loader": "^15.7.1",
"webpack-cli": "^3.3.9"
}
}
现在执行打包命令：
npm run build
即可生成打包文件夹dist。
4.添加类型声明
之后需要在插件文件夹中建立"@types"文件夹，新建"index.d.ts"文件，输入：
declare module '组件名';
来进行组件声明，不然引用的时候会报错。
5.生成了打包文件夹以后，我们就可以上传到npm代码仓库中了
先在网站上注册账号https://www.npmjs.com （邮箱验证，注册的时候记得邮箱最好填写QQ邮箱，不然不会通过）
在组件文件夹中执行如下命令：
（1）npm adduser
（2）然后要求输入用户名、密码、注册时填的邮箱。
（3）然后输入npm publish即可（发布成功有邮件通知，每次更改package.json的version版本号）
如果publish的时候返回错误" You do not have permission to publish "可能是因为组件名已经被占用了，到npm官网检查一下，换个没用过的组件名。并且将package-lock、类型声明文件index.d.ts、main.js文件全都换成新的插件名。
6.之后就可以通过npm install "插件name" 来安装vue插件了
全局注册：
import { EmojiPicker } from '插件名'
Vue.use(EmojiPicker)
在组件中可以直接通过main.js文件中注册的插件名，作为template中的标签名来使用。
还可以通过vue-cli的命令直接打包，不用webpack。 大家感兴趣可以再研究下这个命令：vue-cli-service build --target lib --name myLib [entry]
目前组件已经上传到npm，名字为emoji-pick-test，大家感兴趣可以下载下来在node_modules中看下源码。
如果您对本文感兴趣想关注更多技术文章，请关注作者公众号，更多好文章为您呈现～
