时间:2021-05-26
插件的分类
插件的使用
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:
插件开发
Vue.js 的插件有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
其实无论采用什么方式,最终的目的则是在项目中可以使用,借助install 的Vue参数具体自己进行封装
从零开始的组件封装
需求: 封装一个微博表情的enoji插件
准备
node环境 vue环境 vue-cli脚手架 等等
创建工程
使用vue init 创建简单脚手架,简单修改就可以适合插件开发
开发目录如下:
插件实现
项目具体逻辑实现可以去这里查看源码
我们正常webpack的entry入口一般会设置为main.js 做一些依赖引入和视图挂载等的操作,当我们编写插件的时候理所当然的就会省去挂载这一步操作了。
这里我们可以将index.js作为我们的入口文件,暴露出去的则是一个有这install方法的插件对象
代码如下:
发布
发布之前检查一下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使用
效果:
源码
Weibo-Emoji(本地下载)
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤。 插件地址:https://github.
什么是VueTCB我自己平时经常会用到Vue来开发前端应用。所以,基于Vue的插件系统,封装了一个Vue插件。如何使用1.安装vue-tcb执行如下命令,安装v
本文介绍了vue引入swiper插件,分享给大家,希望对大家有帮助步骤一:安装vue,$npminstallvue步骤二:创建vue项目#全局安装vue-cli
【版本】vue-cli3webpack@4.33.0【步骤】1、安装插件vue-markdown-loadernpmivue-markdown-loader-D
本文实例讲述了AngularJS中的DOM操作用法。分享给大家供大家参考,具体如下:在angular中使用第三方插件时最好都封装到指令(directives)中