这篇文章主要介绍Vue插件如何实现从封装到发布，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
我们拥有十多年网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供成都网站制作、成都网站建设、
外贸营销网站建设、微信开发、微信小程序、
手机网站制作、
H5网站设计、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。
插件的分类
插件的使用
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
//... options
})```
也可以传入一个选项对象：
``` javascript
Vue.use(MyPlugin, { someOption: true })插件开发
Vue.js 的插件有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
//5.直接注册组件
Vue.use();
}其实无论采用什么方式，最终的目的则是在项目中可以使用，借助install 的Vue参数具体自己进行封装
从零开始的组件封装
需求： 封装一个微博表情的enoji插件
准备
node环境 vue环境 vue-cli脚手架 等等
创建工程
使用vue init 创建简单脚手架，简单修改就可以适合插件开发
vue init webpack-simple weibo-emoji
cd weibo-emoji
npm install
开发目录如下:
插件实现
项目具体逻辑实现可以去这里查看源码
我们正常webpack的entry入口一般会设置为main.js 做一些依赖引入和视图挂载等的操作,当我们编写插件的时候理所当然的就会省去挂载这一步操作了。
这里我们可以将index.js作为我们的入口文件，暴露出去的则是一个有这install方法的插件对象
代码如下:
import weiboEmoji from './compontent/weibo_emoji'
const emoji = {
install(Vue, options) {
Vue.component(weiboEmoji.name, weiboEmoji);
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(emoji);
}
export default emoji发布
发布之前检查一下webconfig配置：
entry: './src/index.js',// 入口
output: {
path: path.resolve(__dirname, './dist'),//打包输出目录
publicPath: '/dist/',// 静态资源前缀
filename: 'vue-weibo-emoji.js', //打包生成文件的名字
library: 'WeiboEmoji', //umd 打包的时候模块的名字
libraryTarget: 'umd',//打包方式 amd
umdNamedDefine: true //打包未定义的时候使用默认名字
},检查发布配置：
"name": "weibo-emoji", // 打包的项目名，也就是modemodules里面的文件夹名字 也就是import from之后跟的名字
"main": "dist/vue-weibo-emoji.js", // 是访问到nodemodules依赖，实际引入的文件 相当于入口
"repository": {// 仓库 貌似仓库内容也不影响发布内容，填对就行
"type": "git",
"url": "https://github.com/icebluesky2666/weibo-emoji"
},
"description": "A Weibo emoji plugn",// 描述
"version": "1.0.2",// 版本
"author": "jhqin",// 作者
"license": "MIT",// license 类型对于多次发布，必须每次的版本号都不同
最后：
npm build
npm login
npm publish
使用
import WeiboEmoji from 'weibo-emoji'
Vue.use(WeiboEmoji)
效果：
以上是“Vue插件如何实现从封装到发布”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻名称：Vue插件如何实现从封装到发布-创新互联
文章出自：
http://www.cdkjz.cn/article/gdcjp.html
