第一个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 相关文章推荐
Confirmer JQuery确认对话框组件
Jun 09 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 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
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
学习PHP session的传递方式
2016/06/15 PHP
Open and Print a Word Document
2007/06/15 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python重要函数eval多种用法解析
2020/01/14 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
青年文明号申报材料
2014/12/23 职场文书
股东大会通知
2015/04/24 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python
Redis基本数据类型List常用操作命令
2022/06/01 Redis