1，引入元件

在components目錄建立元件，在頁面中引入元件

例如引入公共導航欄

建立元件components/Nav.vue

引入元件layouts/default.vue

2，引入公共樣式

assets/css/common.css

在nuxt.config.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.引入元件

import MinorTopMenu from '~/components/MinorTopMenu.vue'

2.註冊元件

components: {
 MinorTopMenu
}

3.使用元件

<MinorTopMenu></MinorTopMenu>

4.頁面程式碼截圖

測試

開啟頁面，如下所示，說明元件使用成功

以上這篇nuxt引入元件和公共樣式的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。