这个库不错:
http://yuche.github.io/vue-strap
里面有很多组件
我要是想把所有组件都给注册了,有什么好办法吗?
我现在是这么用的,很麻烦:
在main.vue中,一个一个的注册:
import {alert} from 'vue-strap'; Vue.component('alert', alert);
然后在自己的其它vue组件中,直接使用
但是这样好麻烦啊,有什么好办法吗?
import vux from 'vux-components/index.js' export default { components: vux }
更新:更建议使用 @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-
嘛 。。。可以改成你的项目名称什么的,算是命名空间的意思吧。
除了一些会多处用到的组件,如:弹窗、提示这种,适合全局注册,一般情况下还是按需引用,划分组件本来就是为了体现分治。
一般的使用案例是这样的:
import {tab, panel} from 'vue-strap'; export default { components: { tab, panel }, // ... }