自己编写并发布一个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. 如何从0开发一个Vue组件库并发布到npm

    1.新建文件夹在终端打开执行 npm init -y 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等 { "name": "v ...

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

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

随机推荐

  1. .csv文件内容分隔符

    CSV文件默认以英文逗号做为列分隔符,换行符作为行分隔符.  如果不提供网页形式只用命令行或二进制程序输出数据到CSV,只需要将数据段按,分割,行按\n分割,写入到一个.csv文件即可.  但有时字段 ...

  2. ZBrush曲线功能介绍

    在ZBrush®中曲线功能是一个非常有用的工具.插入笔刷,曲线笔刷,拓扑和许多地方都会用到它.生成曲线的方式有很多种.可以使用重拓扑引导线,可以使用笔触菜单下曲线功能中的框架网格,可以使用ZBrush ...

  3. Java以流的方式将指定文件夹里的.txt文件全部复制到另一文件夹,并删除原文件夹中所有.txt文件

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...

  4. CF949B A Leapfrog in the Array 思维题,推理

    题意: Dima是一名初级程序员. 在他的工作中,他经常不断地重复以下操作:从数组中删除每个第二个元素. 有一天,他对这个问题的解决方案感到厌倦,他提出了以下华丽的算法. 假设有一长度为2n的数组,最 ...

  5. CGI与ISAPI的区别(转)

    一 CGI原理及其性能 1) CGI概念CGI即通用网关接口(Common Gateway Interface),它是一段程序,运行在服务器上,提供同客户端HTML页面的交互,通俗的讲CGI就象是一座 ...

  6. is == id 的用法;代码块;深浅copy;集合

    1 内容总览 is == id 用法 代码块 同一代码块下的缓存机制 (字符串驻留机制) 不同代码块下的缓存机制 (小数据池) 总结 集合(了解) 深浅copy 2 具体内容 id is == # i ...

  7. [USACO18FEB] Snow Boots G (离线+并查集)

    题目大意:略 网上各种神仙做法,本蒟蒻只想了一个离线+并查集的做法 对所有靴子按最大能踩的深度从大到小排序,再把所有地砖按照积雪深度从大到小排序 一个小贪心思想,我们肯定是在 连续不能踩的地砖之前 的 ...

  8. Layui父页面向子页面传参

    废话不多说!直接上代码! 父窗体js $('.mytable').on('click', '.editRow', function () { var table = $('#table_id_exam ...

  9. 2019-03-15 使用Request POST获取CNABS网站上JSON格式的表格数据,并解析出来用xlwt写到Excel中

    import requests import xlwt url = 'https://v1.cn-abs.com/ajax/ChartMarketHandler.ashx' headers={ 'Us ...

  10. LCA题集

    点的距离(模板题) 树中两点间的距离就是d[u] + d[v] - 2 * d[lca(u, v)] #include<bits/stdc++.h> #define REP(i, a, b ...