nuxt引入組件和公共樣式的操作
更新時(shí)間：2020年11月05日 10:35:54 作者：騎著代碼去流浪
這篇文章主要介紹了nuxt引入組件和公共樣式的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
1，引入組件
在components目錄創(chuàng)建組件，在頁(yè)面中引入組件
例如引入公共導(dǎo)航欄
創(chuàng)建組件components/Nav.vue
引入組件layouts/default.vue
2，引入公共樣式
assets/css/common.css
在nuxt.config.js中引入
若引入less或者sass：
補(bǔ)充知識(shí)：在nuxt項(xiàng)目中使用component組件
編寫組件頁(yè)面
1.在components下新建一個(gè)新建組件頁(yè)面，如下所示
2.新建完成之后初始頁(yè)面的代碼如下所示：
3.下面從element-ui上找一個(gè)頂部導(dǎo)航菜單寫到組件頁(yè)面。
<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">我的工作臺(tái)</template> <el-menu-item index="2-1">選項(xiàng)1</el-menu-item> <el-menu-item index="2-2">選項(xiàng)2</el-menu-item> <el-menu-item index="2-3">選項(xiàng)3</el-menu-item> <el-submenu index="2-4"> <template slot="title">選項(xiàng)4</template> <el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item> <el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item> <el-menu-item index="2-4-3">選項(xiàng)3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a rel="external nofollow" target="_blank">訂單管理</a></el-menu-item> </el-menu>
使用組件
1.引入組件
import MinorTopMenu from '~/components/MinorTopMenu.vue'
2.注冊(cè)組件
components: {
MinorTopMenu
}
3.使用組件
<MinorTopMenu></MinorTopMenu>
4.頁(yè)面代碼截圖
測(cè)試
打開頁(yè)面，如下所示，說明組件使用成功
以上這篇nuxt引入組件和公共樣式的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)選項(xiàng)卡案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue3生命周期鉤子函數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue元素樣式實(shí)現(xiàn)動(dòng)態(tài)改變方法介紹
vue通過js動(dòng)態(tài)修改元素的樣式，如果是固定的幾個(gè)樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個(gè)class2022-09-09
element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解
今天小編就為大家分享一篇element-ui使用導(dǎo)航欄跳轉(zhuǎn)路由的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
VUE+elementui組件在table-cell單元格中繪制微型echarts圖
這篇文章主要介紹了VUE+elementui組件在table-cell單元格中繪制微型echarts圖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue中添加與刪除，關(guān)鍵字搜索功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
Vue 中的插槽在開發(fā)組件的過程中其實(shí)是非常重要并且好用的。下面這篇文章主要給大家介紹了關(guān)于vue具名插槽基本使用的相關(guān)資料，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了graphQL在前端vue中使用過程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue.set() (this.$set)的用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06