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

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

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

1.新建alerts.vue和alerts.js文件

alerts.vue


这个很简单!接下来是重头戏了!

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

此处注意文件的路径,不要弄错了;

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

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

3.调用方法


在任意组件里调用,均可!

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

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

如有错误,请指正!

你可能感兴趣的:(vue2.0,自己开发一个全局定义的公用组件(插件))