怎么使用其它人写好的vue组件比较好？

Question

这个库不错:
http://yuche.github.io/vue-strap

里面有很多组件
我要是想把所有组件都给注册了，有什么好办法吗？

我现在是这么用的，很麻烦：

在main.vue中，一个一个的注册：

import {alert} from 'vue-strap';
Vue.component('alert', alert);

然后在自己的其它vue组件中，直接使用<alert></alert>

但是这样好麻烦啊，有什么好办法吗？

Answer 1

除了一些会多处用到的组件，如：弹窗、提示这种，适合全局注册，一般情况下还是按需引用，划分组件本来就是为了体现分治。

一般的使用案例是这样的：

import {tab, panel} from 'vue-strap';

export default {
    components: {
        tab,
        panel
    },
    // ...
}

Answer 2

更新：更建议使用 @JustGo 的姿势，按需加载；牺牲掉编码上的方便性，带来的是代码的可控、恰到好处。

---

由于 vue 并没有提供批量注册的接口，所以要借助循环什么的：

import * as strap from 'vue-strap'

for (let name in strap) {
    if (name != 'default' && strap.hasOwnProperty(name)) {
        Vue.component(
            'my-' + name.replace(/[A-Z]/g, function(char) {
                return '-' + char.toLowerCase();
            }),
            strap[name]
        );
    }
}

上面的代码将会把 vue-strap 注册为类似：

my-alert
my-carousel
my-slider
my-accordion
my-affix
my-aside
my-checkbox-btn
my-checkbox-group
my-datepicker
my-dropdown
my-modal
my-option
my-panel
my-popover
my-progressbar
my-radio-group
my-radio-btn
my-select
my-tab
my-tabset
my-tooltip
my-typeahead
my-navbar
my-spinner

的名称。

为什么要加 my- 。。。因为其中的 option、select 之类的，vue 不允许注册和原生组件重名的组件名。

至于 my- 嘛 。。。可以改成你的项目名称什么的，算是命名空间的意思吧。

Answer 3

import vux from 'vux-components/index.js'

export default {
    components: vux
}