使用tabbar时候报错

[chenEdgar]

项目开发环境：node v5.9.0; npm v3.7.3; mint-ui v0.1.17
使用vue 官方模板 webpack standard
使用mint-ui组件，按照实例给出的使用方式，选择了按需加载组件的方式。

使用代码如下：
main.js:

import Vue from 'vue'
import App from './App'
import 'mint-ui/lib/style.css'
/* eslint-disable no-new */
new Vue({
el: 'body',
components: {App}
})

App.vue:
template

script
import {tabbar} from 'mint-ui'
export default {
components: {
tabbar
}
}

错误提示为:
[Vue warn]: Unknown custom element: - did you mean ? HTML is case-insensitive, remember to use kebab-case in templates.

google下，发现同样的问题，不过这个项目不使用了vuex，原因是vuex的错误。
注;我的项目中没有使用vuex

把tabbar替换成我自己的.vue 模板，可以正确在渲染。
在build 文件中，可以找到mint-ui的样式，说明mint-ui样式已经引入；
注：build 文件中出现了变量没有被编译的问题

[chenEdgar]

问题补充:
template
`

`

[QingWei-Li]

@chenEdgar

1. import {tabbar} from 'mint-ui' 组件是首字母大写的，也就是引入要是 Tabbar http://mint-ui.github.io/docs/#!/en/tabbar
2. 如果你要用按需加载，需要使用 babel-plugin-component，否则本质上还是整个包引入了

[chenEdgar]

谢谢。
1： 已经使用了babel-plugin-component 插件；
2：将组件的首字母大写了，还是提示相同错误。

修改后的代码代码如下：
template;

script

错误提示

[QingWei-Li]

我刚才没注意到你是以对象的形式引入的组件，所以

components: { Tabbar } 会被 babel 翻译成 components: { Tabbar: Tabbar }，也就是说你在模板里还是以 <tabbar> 的名字调用组件

[chenEdgar]

刚才说到编译后的文件存在变量的额问题，官网给出的例子引用的css文件中也是存在这个问题的

[QingWei-Li]

如果已经使用了 component 插件，就不用手动引入全部样式文件了，插件会自动引入对应组件的样式文件
样式变量的问题我一会修复，一会发新版

[chenEdgar]

谢谢，组件引用的问题解决了。整理如下。

1. 要按照规则办事，引用的组件名需要首字母大写；
2. 组件间可能存在依赖关系。 如tabbar 依赖 tabItem组件
3. template中引用组件有两种方式
   1. 按照官网给出的注册组件的方式，template中引用的时候需要加 ‘mt-’前缀；
   2. 以对象的形式注册组件， template中引用的时候直接使用注册的组件名；

注：按需加载组件需要使用babel-plugin-component，还有，还有，按需加载不要全局引如mint-ui.css.

注：阅读文档要心要细。