第一个Vue插件从封装到发布


Posted in Javascript onNovember 22, 2017

前言

这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤。

插件地址:https://github.com/leichangchun/vue-area-select     欢迎指正

准备

Vue官网插件部分的介绍虽然很简单,但是还是好好刷一遍的。由于此插件较为简单,主要用到以下两个点:

1 . Vue的插件需要有一个公开方法install

2 . 通过全局方法 Vue.use() 使用插件,在下文有栗子

创建工程

初始化工程

vue init webpack-simple projectName
cd projectName
cnpm install //安装依赖

创建开发组件目录如下

第一个Vue插件从封装到发布

开发插件

插件入口index.js需要引入插件组件,写install方法

import vueAreaSelect from './components/vue-area-select' //引入组件
const areaSelect = {
 install (Vue, options) {
 Vue.component(vueAreaSelect.name, vueAreaSelect) //全局组件
 }
}

export default areaSelect //导出

vue-area-select.vue是插件的具体实现部分,就不过多介绍,详见源码。

调试时的引用方式是引入index.js文件

//引入
import areaSelect from './index.js'

Vue.use(areaSelect)


//.vue中 使用

<vue-area-select></vue-area-select>

调试完成后,需要build,然后再npm发布。build的时候需要先修改webpack.config.js中的配置,然后 npm run build 打包文件

// entry: './src/main.js', //npm run dev时 demo调试的入口
 entry: './src/index.js', //打包时 插件入口
 output: {
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 // filename: 'build.js'
 filename: 'vue-area-select-lei.js', //打包生成文件的名字
 library:'AreaSelect', //reqire引入的名字
 libraryTarget:'umd',
 umdNamedDefine:true
 }

此时,插件开发部分已经完成。之后就需要npm发布。

NPM发布

先配置package.json,需要加入以下几项

"private": false,
 "main": "dist/vue-area-select-lei.js", //import引入时默认寻找的文件
 "repository": { //仓库地址
 "type": "git",
 "url": "https://github.com/leichangchun/vue-area-select"
 },

然后npm login 登录账号   npm publish发布插件

第一个Vue插件从封装到发布

插件的方式使用

npm install vue-area-select-lei --save //安装
//插件的方式引入使用
import areaSelect from 'vue-area-select-lei'
Vue.use(areaSelect)

 效果如下:

第一个Vue插件从封装到发布

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
详细分析单线程JS执行问题
Nov 22 #Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
Angular实现双向折叠列表组件的示例代码
Nov 21 #Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 #Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 #Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 #Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 #Javascript
You might like
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
8种常用的Python工具
2020/08/05 Python
python 下载文件的多种方法汇总
2020/11/17 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
捐款倡议书范文
2014/02/02 职场文书
20年同学聚会感言
2014/02/03 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
男方婚前保证书
2015/02/28 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书