manlili blog

Vue插件的开发流程

发表于 | 分类于

这篇文章主要是介绍如何给vue添加插件，方便更多人去使用这个框架,废话不多说，直接进去正题
本项目源代码的gitHub地址:传送门

搭建vue项目

首先我为了方便并没有自己一步步去搭建vue的项目，因为我们的目的是如何开发插件，而不是如何搭建框架，这里我是使用vue作者开发的vue-cli快速搭建项目，使用方法如下

node环境安装

https://nodejs.org/en/download/

安装vue-cli

1
npm install -g vue-cli

使用vue-cli初始化项目

1
vue init webpack-simple vue-plugin-research

然后根据提示安装项目

进入目录

1
cd vue-plugin-research

安装依赖

1
npm install

运行项目

1
npm run dev

访问项目

打开浏览器，输入http://localhost:8080/

插件类型

我们先来看官网的文件说明传送门
大概就是官网实例中写的那样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 一些逻辑……
  }
  // 2. 添加一个全局资源(asset)
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 一些逻辑……
    }
    ...
  })
  // 3. 注入一些组件选项
  Vue.mixin({
    created: function () {
      // 一些逻辑……
    }
    ...
  })
  // 4. 添加一个实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 一些逻辑……
  }
  // 5.添加一个模板
  Vue.component('模板引用名', 模板路径)
}

实现alert插件

这个插件主要是是用方法1: 添加全局方法或属性
首先在src文件下面建个components文件夹，专门用来盛放自己写的各种插件，然后我又在components文件夹建了一个alert文件夹，再在alert文件夹建立index.js用来盛放我准备要写的alert插件内容，下面来看下index.js里面的代码

1
2
3
4
5
6
7
8
9
const alert = {
	install (Vue, options) {
		Vue.alert = function () {
			window.alert('这是全局方法alert')
		}
	}
}
export default alert

接着需要在main.js引入这个插件和使用这个插件

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App.vue'
//使用方法1创建alert插件
import alert from './plugins/alert'
Vue.use(alert)
//注意这里是alert使用的方式,因为alert是Vue全局方法
Vue.alert() 
new Vue({
  el: '#app',
  render: h => h(App)
})

到此为止，我们已经实现了一个具体的插件，就发可以发布到npm或者其他社区上面

运行项目命令

1
npm run dev

访问项目地址
打开浏览器，输入http://localhost:8080/

实现numberFilter插件

这个插件主要是是用方法2: 添加一个全局资源
首先在src文件下面建个components文件夹，专门用来盛放自己写的各种插件，然后我又在components文件夹建了一个numberFilter文件夹，再在numberFilter文件夹建立index.js用来盛放我准备要写的numberFilter插件内容，下面来看下index.js里面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
const numberFilter = {
	install(Vue, options) {
		Vue.filter('number', function (val) {
			if (val < 10) {
				return '0' + val
			}else {
				return val
			}
		})
	}
}
export default numberFilter

接着需要在main.js引入这个插件

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
//使用方法2创建numberFilter组件
import numberFilter from './plugins/numberFilter'
Vue.use (numberFilter)
new Vue({
  el: '#app',
  render: h => h(App)
})

上面就实现了numberFilter插件绑定在Vue上面，然后在具体的地方html使用，我这里是在App.vue里面实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--使用方法2创建numberFilter插件-->
<template>
	<div id="app">
		{{num | number}}
	</div>
</template>
<script>
	export default {
		data () {
			return {
				num: 7   //将这行注释掉将发现页面显示的是3,是因为我在doubleNumber插件里面定义了这个变量
			}
		}
	}
</script>

到此为止，我们已经实现了一个具体的插件，就发可以发布到npm或者其他社区上面

运行项目命令

1
npm run dev

访问项目地址
打开浏览器，输入http://localhost:8080/

实现sendUbt插件

这个插件主要是使用方法3：注入一些组件选项
首先在src文件下面建个components文件夹，专门用来盛放自己写的各种插件，然后我又在components文件夹建了一个sendUbt文件夹，再在sendUbt文件夹建立index.js用来盛放我准备要写的sendUbt插件内容，下面来看下index.js里面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
const sendUbt = {
	install (Vue, options) {
		Vue.mixin ({
			methods: {
				sendUbt: function () {
					console.log('ubt has sended')
				}
			}
		})
	}
}
export default sendUbt

接着需要在main.js引入这个插件

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
//使用方法3创建sendUbt组件
import sendUbt from './plugins/sendUbt'
Vue.use (sendUbt)
new Vue({
  el: '#app',
  render: h => h(App)
})

上面就实现了sendUbt插件绑定在Vue上面，然后在具体的地方html使用，我这里是在App.vue里面实现的

1
2
3
4
5
6
<!--使用方法3创建ubt插件-->
<template>
	<div id="app">
		<button @click="sendUbt">点击我发送ubt,注意观察console</button>
	</div>
</template>

到此为止，我们已经实现了一个抽象的插件，当然，把ubt统计的代码不同完整就算一个完整的插件了，然后就发可以发布到npm或者其他社区上面

运行项目命令

1
npm run dev

访问项目地址
打开浏览器，输入http://localhost:8080/

实现doubleNumber插件

这个插件主要是是用方法4: 添加一个实例方法
首先在src文件下面建个components文件夹，专门用来盛放自己写的各种插件，然后我又在components文件夹建了一个doubleNumber文件夹，再在doubleNumber文件夹建立index.js用来盛放我准备要写的doubleNumber插件内容，下面来看下index.js里面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const doubleNumber = {
	install (Vue, options) {
		Vue.prototype.doubleNumber = function (val) {
			if (typeof val === 'number') {
				return val*2
			}else {
				return Number(val) * 2
			}
		}
		
		Vue.prototype.num = 3
	}
}
export default doubleNumber

接着需要在main.js引入这个插件

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
//使用方法4创建doubleNumber 插件
import doubleNumber from './plugins/doubleNumber'
Vue.use(doubleNumber)
new Vue({
  el: '#app',
  render: h => h(App)
})

上面就实现了doubleNumber插件绑定在Vue上面，然后在具体的地方html使用，我这里是在App.vue里面实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
	<div id="app">
		<div>
			{{num}}
		</div>
		<button @click="double">点击我数字加倍</button>
	</div>
</template>
<script>
	export default {
		data () {
			return {
				num: 1   //将这行注释掉将发现页面显示的是3,是因为我在doubleNumber插件里面定义了这个变量
			}
		},
		methods: {
			double () {
				this.num = this.doubleNumber(this.num)
			}
		}
	}
</script>

上面需要注意的是我在Vue显式原型上面定义了一个变量num，当插件提供一个属性时，组件里没这个属性，就用插件的属性；组件有，就用组件自己的。
到此为止，我们已经实现了一个具体的插件，就发可以发布到npm或者其他社区上面

运行项目命令

1
npm run dev

访问项目地址
打开浏览器，输入http://localhost:8080/

实现loading插件

这个插件主要是是用方法5: 添加一个模板，创建的一个loading插件
首先在src文件下面建个components文件夹，专门用来盛放自己写的插件，这里我又在components文件夹建了一个loading文件夹，用来盛放我准备要写的loading组件，下面来看下文件目录
图

loading插件模板

loading.vue是用来写这个组件的模板、样式，下面来看下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
    <div class="loading-wrap">
    	<h4>组件一:loading组件展示</h4>
        <div class="loading-cont">
        	Loading...
        </div>
    </div>
</template>
<script>
//	控制2秒后消失
	setTimeout(function () {
		document.querySelector('.loading-cont').setAttribute('style', 'display: none')
	}, 2000)
</script>
<style>
	.loading-cont {
		width: 100px;
		height: 100px;
		line-height: 100px;
		background-color: rgba(0, 0, 0, .5);
		border-radius: 5px;
		padding: 5px;
		text-align: center;
		color: #fff;
		margin: 0 auto;
	}
</style>

loading挂载在Vue上面

这里介绍的loading组件是在index.js暴露出调用的方法，下面来看下index.js的内容

1
2
3
4
5
6
7
8
import loadingComponent from './loading.vue'
const loading = {
	install (Vue, option) {
		Vue.component('Loading', loadingComponent)
	}
}
export default loading

注意上面主要使用了ES6的语法的export,import语法，这个不懂得的话，请自行百度，我想说的千万别把CMD和ES6语法搞混，当然如果以前就不会CMD，不妨自行研究一下。

使用loading插件

通过调用全局方法 Vue.use()使用插件，我这里是在main.js实现，来看下具体代码

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App.vue'
import Loading from './plugins/loading'
Vue.use(Loading)
new Vue({
  el: '#app',
  render: h => h(App)
})

上面就实现了Loading组件绑定在Vue上面，然后在具体的地方html使用，我这里是在App.vue里面实现的

1
2
3
4
5
<template>
  <div id="app">
    <Loading></Loading>
  </div>
</template>

到此为止，我们已经实现了一个具体的插件，就发可以发布到npm或者其他社区上面

运行项目命令

1
npm run dev

访问项目地址
打开浏览器，输入http://localhost:8080/

请我喝杯果汁吧！