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

自己编写并发布一个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')