vue.use()原理和Vue插件的开发使用

参考：

https://cn.vuejs.org/v2/guide/plugins.html

https://juejin.im/post/5d8464a76fb9a06b3260ad30

https://www.cnblogs.com/adouwt/p/9211003.html

一、背景

1. 为什么在引入Vue-Router、ElementUI的时候需要Vue.use()？而引入axios的时候，不需要Vue.use()?  Vue.use()是为Vue插件（需要依赖vue才能实现）进行初始化的，而axios不用依赖vue也能执行，所以不需要使用Vue.use()进行初始化。
2. Vue-Router、ElementUI在Vue.use()分别做了什么？
3. Vue.use原理
4. 如何编写和使用一个Vue插件？

二、vue.use()原理

Vue.use是官方提供给开发者的一个api，用来注册、安装类型Vue插件的。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

1.vue.use的使用：

在main.js中调用:

Vue.use(ElementUi);
Vue.use(Vuex);
Vue.use(Router);

 

2.vue.use()原理：

1. 检查插件是否安装，如果安装了就不再安装
2. 如果没有没有安装，那么调用插件的install方法，并传入Vue实例

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    // 获取已经安装的插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // 看看插件是否已经安装，如果安装了直接返回
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // toArray(arguments, 1)实现的功能就是，获取Vue.use(plugin,xx,xx)中的其他参数。
    // 比如 Vue.use(plugin,{size:'mini', theme:'black'})，就会回去到plugin意外的参数
    const args = toArray(arguments, 1)
    // 在参数中第一位插入Vue，从而保证第一个参数是Vue实例
    args.unshift(this)
    // 插件要么是一个函数，要么是一个对象(对象包含install方法)
    if (typeof plugin.install === 'function') {
      // 调用插件的install方法，并传入Vue实例
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    // 在已经安装的插件数组中，放进去
    installedPlugins.push(plugin)
    return this
  }
}

 

3.创建vue插件

（1）创建plugins文件夹存放插件文件（loading和toast两个插件）

（2）代码：loading是通过组件的形式使用，生成在#app中。toast是通过js方法使用，调用后插入#app下方

loading.vue:

<template>
    <div class="nwd-loading" v-show="show">
        <div>{{text}}</div>
    </div>
</template>

<script>
    export default {
        props: ['show', 'text']
    }
</script>

loading.js:

import Loading from './loading.vue'
export default {
	install(Vue,options) {
		Vue.component('loading', Loading);
	}
}

 

toast.vue:

<template>
    <transition name="fade">
        <div class="toast" v-show="show">
            {{message}}
        </div>

    </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message: "提示框"
    };
  }
};
</script>

<style scoped>
.toast {
  position: fixed;
  top: 40%;
  left: 50%;
  margin-left: -15vw;
  padding: 2vw;
  width: 30vw;
  font-size: 4vw;
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5vw;
  z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.3s ease-out;
}
.fade-enter {
  opacity: 0;
  transform: scale(1.2);
}
.fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
</style>

toast.js:

import Toast from './toast.vue'

export default {
	install(Vue, options) {
		// 生成一个Vue子类
		const toast = Vue.extend(Toast);

		// 生成该子类的实例
		let toastInstance = new toast();
		console.log(toastInstance);

		// 将实例挂载到新创建的div上
		toastInstance.$mount(document.createElement('div'));

		// 将此div加入全局挂载点内部,#app下方
		console.log(toastInstance.$el);
		document.body.appendChild(toastInstance.$el);

		// 通过Vue注册一个原型方法
		// 所有实例共享这个方法
		Vue.prototype.$toast = (msg, duration = 2000) => {
			toastInstance.message = msg; 
			toastInstance.show = true;
			setTimeout(()=>{
				toastInstance.show = false;
			}, duration);
		}
	}	
}

main.js引入：

import Vue from 'vue'
import App from './App'
import router from './router'
import Loading from './plugins/loading/loading.js'
import Toast from './plugins/toast/toast.js'

Vue.use(Loading)
Vue.use(Toast)


Vue.config.productionTip = false

/* eslint-disable no-new */
var vue1 = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

HelloWorld.vue组件使用

<template>
  <div class="hello">
    <!-- 使用loading -->
    <loading :show="show" :text="msg"></loading>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      show:true,
      msg: 'I am loading'
    }
  },
  created() {
    // 使用toast
    this.$toast('司法局防辐射服', 30000);
  }
}
</script>

 

三、插件打包并发布

1.新建一个项目：test-toast

vue init webpack-simple 项目名
cd test-toast
npm install //安装依赖

2.将上面的toast.js和toast.vue放入src目录中,toast.js重命名为index.js

 3.修改webpack.config.js:

  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'testToast.js' //打包后的文件名
  },

4.打包：

npm run build

5.修改package.json:

//"private": true, //删除这行
//使用时默认寻找的文件
"main": "dist/testToast.js",

6.登录npm账号:

npm login

7.发布插件：

npm publish