nuxt導入コンポーネントと共通のスタイルの操作

1，コンポーネントを導入する
componentsディレクトリでコンポーネントを作成し、ページにコンポーネントを導入します。
たとえば、共通のナビゲーションバーを紹介します。
コンポーネントcomponents/Nav.vueを作成します。

コンポーネントを導入するlayouts/default.vue

2,共通のスタイルを導入する
asets/css/common.css
nuxt.co nfig.jsに導入されます。

lessまたはsassを導入すると:

補足知識：nuxtプロジェクトにcomponentコンポーネントを使用する
コンポーネントページを作成
1.componentsの下で新しいコンポーネントページを作成します。下記の通りです。

2.新規作成が完了したら、初期ページのコードを下記に示します。

3.次はelement-uiからトップナビゲーションメニューを探してコンポーネントページに書きます。

<el-menu
 :default-active="activeIndex2"
 class="el-menu-demo"
 mode="horizontal"
 @select="handleSelect"
 background-color="#545c64"
 text-color="#fff"
 active-text-color="#ffd04b">
 <el-menu-item index="1">    </el-menu-item>
 <el-submenu index="2">
  <template slot="title">     </template>
  <el-menu-item index="2-1">  1</el-menu-item>
  <el-menu-item index="2-2">  2</el-menu-item>
  <el-menu-item index="2-3">  3</el-menu-item>
  <el-submenu index="2-4">
   <template slot="title">  4</template>
   <el-menu-item index="2-4-1">  1</el-menu-item>
   <el-menu-item index="2-4-2">  2</el-menu-item>
   <el-menu-item index="2-4-3">  3</el-menu-item>
  </el-submenu>
 </el-submenu>
 <el-menu-item index="3" disabled>    </el-menu-item>
 <el-menu-item index="4"><a href="https://www.ele.me" rel="external nofollow" target="_blank">    </a></el-menu-item>
</el-menu>

コンポーネントを使う
1.コンポーネントの導入
imponents/Minor TopMenu.vue'
2.コンポーネントを登録する

components: {
 MinorTopMenu
}

3.コンポーネントを使う
＜Minor TopMenu＞＜Minor TopMenu＞
4.ページコードのスクリーンショット

テスト
次のようにページを開きます。コンポーネントの使用に成功しました。

以上のnuxtはコンポーネントと公共のスタイルを導入しました。つまり、小編集は皆さんに全部の内容を共有しました。参考にしてもらいたいです。よろしくお願いします。