第一个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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
javascript回调函数详解
Feb 06 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 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 文件上传全攻略
2010/04/28 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
中止javascript执行的方法
2014/02/14 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
python正则表达式之作业计算器
2016/03/18 Python
Python 探针的实现原理
2016/04/23 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python绘制立方体的方法
2018/07/02 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
比赛口号大全
2014/06/10 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
利用python做表格数据处理
2021/04/13 Python