Vue.use( plugin ) 注册插件

//引自官方api
Vue.use( plugin )
参数：

{Object | Function} plugin

用法：

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
如果插件是一个函数，它会被作为 install 方法。
install 方法调用时，会将 Vue 作为参数传入。

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

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

可以看到官方概念解释的是挺清楚了，下面看个实例，来真正掌握它。

看下项目的目录，这不是非得跟我一样。

项目目录

这是最终实现的效果图，带着事物最终的样子去写代码，会让你在前进的道路上，走得更远一些！

最终效果图，麻雀虽小，五脏俱全

下面是位于相关文件里的代码实现：

<!-- src/plugins/button/src/index.vue (文件)-->
<template>
  <button class="create-btn primary">
    <span>
      <slot></slot>
    </span>
  </button>
</template>

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

<style scoped>
  /* 创世按钮的样式 */
  .create-btn {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
  }
  .primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
</style>

// src/plugins/button/index.js(文件)
// 导入CreateButton对象
import CreateButton from './src/index'

// 给CreateButton对象添加install方法，参数为Vue
CreateButton.install = function(Vue) {
  // 给Vue注册名为'CreateButton'的全局组件
  Vue.component(CreateButton.name, CreateButton)
}
// 导出该对象
export default CreateButton

在 main.js 文件中注册我们的定义好的插件

// main.js
import Vue from 'vue'
import App from './App.vue'
import CreateButton from './plugins/button/index.js' //导入插件
// 使用VUe.use，传入CreateButton即完成注册，它的作用是调用CreateButton对象的install方法
Vue.use(CreateButton)

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

然后我们可以在我们的项目中进行应用。

下面在App.vue文件中应用：

<!-- App.vue -->
<template>
  <div id="app">
    <Create-Button>创世按钮</Create-Button>
  </div>
</template>

<script>
export default {}
</script>

<style>
#app {
  text-align: center;
}
</style>

最终得到了位置网页中央的创世按钮。