自己编写并发布一个Vue组件

1. 几种开源协议的介绍

https://blog.csdn.net/techbirds_bao/article/details/8785413

2.开始编写组件

新建plugin文件夹:

指定 组件、入口文件和package.json文件,

看一下各个文件内容:

1.package.json 是npm init生成的:

2.loading.vue 是编写的组件文件:

在loading.js中, 使用了

3.loading.js 是指定的入口文件:

import LoadingComponent from './loading.vue'
// 新建一个loading.js文件,引入我们的loading.vue文件
console.log(`==================================`)
console.log(`==================================`)
let $vm
export default {
install (Vue, options) {
if (!$vm) {
const LoadingPlugin = Vue.extend(LoadingComponent)
// 通过Vue.extend创建一个构造器LoadingPlugin
$vm = new LoadingPlugin({
el: document.createElement('div')
})
// 通过new LoadingPlugin新建一个vm实例 挂载到div元素上
document.body.appendChild($vm.$el)
// 通过document.appendChild将其插入到DOM节点中
}
// 创建了$vm实例后,我们可以访问该实例的属性和方法比如通过$vm.show就可以改变
// loading组件的show值来控制其显示隐藏
$vm.show = false
let loading = {
show (text) {
$vm.show = true
$vm.text = text
},
hide () {
$vm.show = false
}
}
if (!Vue.$loading) {
Vue.$loading = loading
}
// 最后我们通过Vue.mixin或者Vue.prototpye.$loading 来全局添加$loading事件
// 其又包含了show和hide两个方法,我们可以在页面中使用this.$loading.show()
// 来显示加载 使用this.$loading.hide()来关闭加载
Vue.mixin({
created () {
this.$loading = Vue.$loading;
}
})
}
}

如何发布到npm上:

1.npm login

2.npm publish (根据官网文档在72小时内可以npm unpublish)

使用:

新建一个项目

npm install test__my__plugin

然后在main.js中 import a from 'test__my__plugin'

Vue.use(a)

然后this.$loading.show('my text')

自己编写并发布一个Vue组件的更多相关文章

  1. 如何创建并发布一个 vue 组件

    步骤 创建 vue 的脚手架 npm install -g @vue/cli vue init webpack 绑定 git 项目 cd existing_folder git init git re ...

  2. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  3. 如何开发和发布一个Vue插件

    前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...

  4. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  5. 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"

    如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...

  6. 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  7. 从0到1发布一个Vue Collapse组件

    需求背景 最近在项目中遇到了一个类似Collapse的交互需求,因此到github上找了一圈关于Vue Collapse的相关轮子,但是多少都有些问题.有的是实现问题,例如vue2-collapse, ...

  8. 利用webpack打包自己的第一个Vue组件库

    先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...

  9. 从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)

    自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...

随机推荐

  1. 数据分析:中国高校更名历史 Python

    上周领了新任务,做国内高校改名历史的统计,这个挺有意思,以下是我任务完成过程,和大家分享. 一. 数据收集 数据需求:目前已有高校校名,各高校改名历史记录 高校校名数据来源:尝试从高校排名网站(iPI ...

  2. WebSocket connection to,Error during WebSocket handshake: Unexpected response code: 404

    使用标准的JSR 356注解时,需要使用tomcat 8.x版本,如果使用tomcat 7.x的版本,则需要继承WebSocketServlet,否则会报WebSocket connection to ...

  3. ActiveRecord中andFilterWhere使用

    查询数据库时 $model; if(!empty($name)) { $model->andWhere(['name'=>$name]); } 可以用andFilterWhere,自动的把 ...

  4. [HDU 2602]Bone Collector ( 0-1背包水题 )

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 水题啊水题 还给我WA了好多次 因为我在j<w[i]的时候状态没有下传.. #includ ...

  5. 中国25位最具影响力的IC人物

    当今许多企业的领导者几乎已经成为其企业的代名词,而在芯片业,我们听说的更多的是“龙芯”.“国芯”,他们的领导者的声音却鲜有传出.芯片业透出的强烈的民族色彩,也使这些隐身的企业家们的注意力更聚集在研发上 ...

  6. 数以百万计美元的融资YO是什么东东?

    给自己做个广告哈,新栏目"面试"已经推出,回复"面试"就可以获取. 这两天最火的应用是什么.非yo莫属,堪称史上最简单的社交应用,仅仅能向好友发送一个yo. 出 ...

  7. ●POJ 1269 Intersecting Lines

    题链: http://poj.org/problem?id=1269 题解: 计算几何,直线交点 模板题,试了一下直线的向量参数方程求交点的方法. (方法详见<算法竞赛入门经典——训练指南> ...

  8. BeyondCompare使用一段时间后会因“许可证密钥已被撤销:3281-0350“而无法使用

    解决方式: 1.用任意文本编辑软件打开“C:\Users\[Your User Name]\AppData\Roaming\Scooter Software\Beyond Compare 3\BCSt ...

  9. Nginx配置文件具体配置解释

    Nginx配置文件具体配置解释   #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错 ...

  10. 10.nginx+ffmpeg上搭建HLS切片

    1.首先介绍一下HLS协议: (1)简介 这个协议是由苹果公司提出并推广使用的,维基百科介绍如下: HTTP Live Streaming(缩写是HLS)是一个由苹果公司提出的基于HTTP的流媒体网络 ...