第一个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 相关文章推荐
jQuery语法总结和注意事项小结
Nov 11 Javascript
javascript操作css属性
Dec 30 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
跟我学习javascript的循环
Nov 18 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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音乐采集(部分代码)
2007/02/14 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python安装selenium包详细过程
2019/07/23 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
利用python计算时间差(返回天数)
2019/09/07 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
摄影助理岗位职责
2014/02/07 职场文书
新年爱情寄语
2014/04/08 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
工会趣味活动方案
2014/08/18 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
个人政治思想总结
2015/03/05 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
安全生产学习心得体会
2016/01/18 职场文书
js Proxy的原理详解
2021/05/25 Javascript
php png失真的原因及解决办法
2021/11/17 PHP
Python 图片添加美颜效果
2022/04/28 Python