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 />

這裏我現在想想應該也不是什麼坑吧，只是我去學習的老師或者別個博客作者的個人愛好風格和我的風格不一樣，造成衝突而已。總歸記錄便好，希望也能夠幫助和我一樣的初學者。