vue/nuxtjs的components使用关于命名的一点小问题

没学vue直接入手nuxtjs，遇到坑还是挺多的。现在知识基本都是即学即用，没有多少时间去积累，现在遇到，记录一波坑。

假如我在pages的index页面下要使用一个navbar的组件，当然这样做是为了减少代码的冗余。为了直白我用基础代码代替。

首先到components下建立一个Navbar.vue文件
然后内容就随意丢个样式上去，我使用的是bootstrap样式。

<template>
    <div>
    <b-navbar toggleable="lg" type="light" variant="light">
        <b-navbar-brand href="#">NavBar</b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
            <b-nav-item href="#">Link</b-nav-item>
            <b-nav-item href="#" disabled>Disabled</b-nav-item>
        </b-navbar-nav>

        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
            <b-nav-form>
            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
            </b-nav-form>

            <b-nav-item-dropdown text="Lang" right>
            <b-dropdown-item href="#">EN</b-dropdown-item>
            <b-dropdown-item href="#">ES</b-dropdown-item>
            <b-dropdown-item href="#">RU</b-dropdown-item>
            <b-dropdown-item href="#">FA</b-dropdown-item>
            </b-nav-item-dropdown>

            <b-nav-item-dropdown right>
            <!-- Using 'button-content' slot -->
            <template v-slot:button-content>
                <em>User</em>
            </template>
            <b-dropdown-item href="#">Profile</b-dropdown-item>
            <b-dropdown-item href="#">Sign Out</b-dropdown-item>
            </b-nav-item-dropdown>
        </b-navbar-nav>
        </b-collapse>
    </b-navbar>
      
    </div>
</template>

然后呢回到index.vue文件来写代码了

<template>
    <div>
      <navbar />
      
    </div>
</template>

<script>
import Navbar from '~/components/Navbar.vue'

export default {
  components: {
    Navbar
  }
}
</script>

<style>

</style>

这样基本就是可以刷新出样式，那么坑就是在这个命名上，之前我用了驼峰命名，然后一直使用不到样式。

后来才知道，在下面注册样式那个位置，如果使用的是驼峰命名法，例如：

export default {
  components: {
    NavBar
  }
}

那么使用样式的时候就要使用连接线：

<nav-bar />

如果是正常我喜欢的命名方法：

export default {
  components: {
    Navbar
  }
}

那么便可以直接使用：

<navbar />

这里我现在想想应该也不是什么坑吧，只是我去学习的老师或者别个博客作者的个人爱好风格和我的风格不一样，造成冲突而已。总归记录便好，希望也能够帮助和我一样的初学者。