vue2.0,自己开发一个全局定义的公用组件（插件）

今天，在群里看到有朋友问这样一个问题：“我在项目里，怎么能做一个全局调用的组件，不用每一次都import，注册组件？”看到这个问题，我思考了一下，讲一下我的思路！

这个问题里，所说的组件，在我看来也可以叫做“插件”，为什么这么说呢？因为这个和vue-resource之类的插件开发的思路是一样的？只是一个放到的是本地，一个是通过“npm install vue-resource ”下载下来的？换一个思路，如果我把自己开发的组件放到网上，是不是别人可以直接用我开发的插件呢？回答是：“必须的”！

所以我就来做一个公共的组件：同样的开发环境vue-cli;这个就不说了！！！

新建alerts.vue和alerts.js文件

alerts.vue

<template>
  <div class="alerts">
      <h2>开发自定义组件//公共组件可直接在任意地方调用</h2>
       <button @click="clicks()">点击我试一下</button>  
  </div>
</template>
<script>
    export default {
        data() {
            return {}
        },
     methods:{
          clicks(){
              alert("我是公共的组件！（插件）")
          }
    },
 }
</script>

这个很简单！接下来是重头戏了！
alerts.js

const alertsComponent = require('./alerts.vue'); //引入
const alerts = {
    install: function(Vue) {
        Vue.component('alerts', alertsComponent)
    }
};
module.exports = alerts;

此处注意文件的路径，不要弄错了；

在main.js里引用，和调其他插件的方法一样

main.js

import alerts from './components/alerts/alerts'  //注意路径
Vue.use(alerts);

调用方法

<alerts></alerts>

在任意组件里调用，均可！

我的github，如果有用，不要吝啬，请给个star；在里面可以找到此例子的源码哦！

https://github.com/sky-xsk/vue2.0-start-

如有错误，请指正！

访客的ip和所在地址： 访问时间: 当前时间: