第一个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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
js实现简易ATM功能
Oct 27 Javascript
详解Vite的新体验
Feb 22 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实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
Servlet的生命周期
2013/08/25 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
会计员岗位职责
2014/03/15 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
导游词之唐山景点
2019/12/18 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
Django Paginator分页器的使用示例
2021/06/23 Python
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电