Vue.use做了什么？

Vue.use(js)

• 该js如果是对象
  • 该对象里面要有一个install方法
  • Vue.use就是调用里面的install方法
• 该js是一个function
  • Vue.use时function会直接执行

作用：

• 可以在Vue的原型加一些东西
• 注册全局组件等

使用

• 将hellow注册为全局组件
• 在原型中添加$num= 123

1. 在components中新建components.js

import HelloWorld from '@/components/HelloWorld.vue'
export default {
    
    
  install: function (Vue) {
    
    
    // 这里的Vue就是你调用install方法时传递过来的
    // 可以在Vue原型中加一些东西
    Vue.prototype.$num = 123
    // 注册全局组件
    Vue.component(HelloWorld.name, HelloWorld)
  }
}

2. 在main.js中调用

import Vue from 'vue'
import App from './App.vue'
import components from '@/assets/components.js'
Vue.use(components)
Vue.config.productionTip = false

new Vue({
    
    
  render: h => h(App)
}).$mount('#app')

3. Helloworld.vue

<template>
  <div>
    <h1>这里是HelloWord</h1>
    <h2>{
    
    {
    
     $num }}</h2>
  </div>
</template>

<script>
export default {
    
    
  name: 'HelloWorld'
}
</script>

<style></style>

结果:

• 该js为对象时，component.js写法不一样，其他均一样

export default function (Vue) {
    
    
  Vue.component(HelloWorld.name, HelloWorld)
  Vue.prototype.$num = 123
}

Vue.use(VueRouter)就是这么实现的

vue-router源码

  function install (Vue) {
    
    
    if (install.installed && _Vue === Vue) {
    
     return }
    install.installed = true;

    _Vue = Vue;

    var isDef = function (v) {
    
     return v !== undefined; };

    var registerInstance = function (vm, callVal) {
    
    
      var i = vm.$options._parentVnode;
      if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
    
    
        i(vm, callVal);
      }
    };

    Vue.mixin({
    
    
      beforeCreate: function beforeCreate () {
    
    
        if (isDef(this.$options.router)) {
    
    
          this._routerRoot = this;
          this._router = this.$options.router;
          this._router.init(this);
          Vue.util.defineReactive(this, '_route', this._router.history.current);
        } else {
    
    
          this._routerRoot = (this.$parent && this.$parent._routerRoot) || this;
        }
        registerInstance(this, this);
      },
      destroyed: function destroyed () {
    
    
        registerInstance(this);
      }
    });

    Object.defineProperty(Vue.prototype, '$router', {
    
    
      get: function get () {
    
     return this._routerRoot._router }
    });

    Object.defineProperty(Vue.prototype, '$route', {
    
    
      get: function get () {
    
     return this._routerRoot._route }
    });

    Vue.component('RouterView', View);
    Vue.component('RouterLink', Link);

    var strats = Vue.config.optionMergeStrategies;
    // use the same hook merging strategy for route hooks
    strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created;
  }

Object.defineProperty(Vue.prototype, '$router', {
  get: function get () { return this._routerRoot._router }
});

Object.defineProperty(Vue.prototype, '$route', {
  get: function get () { return this._routerRoot._route }
});

其核心就是以上两行代码在install方法中将$router和route挂载到Vue原型上