nuxt引入組件和公共樣式的操作
更新時間：2020年11月05日 10:35:54 作者：騎著代碼去流浪
這篇文章主要介紹了nuxt引入組件和公共樣式的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1，引入組件
在components目錄創(chuàng)建組件，在頁面中引入組件
例如引入公共導航欄
創(chuàng)建組件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 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引入組件和公共樣式的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue組件代碼分塊和懶加載講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue+xlsx實現(xiàn)表格的導入導出功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue如何把組件方法暴露到window對象中，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了使用vant?自定義彈框全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
使用proxy實現(xiàn)一個更優(yōu)雅的vue【推薦】
Proxy 用于修改某些操作的默認行為，等同于在語言層面做出修改，所以屬于一種“元編程”。這篇文章主要介紹了用proxy實現(xiàn)一個更優(yōu)雅的vue,需要的朋友可以參考下2018-06-06
這篇文章主要為大家介紹了Vue插槽解決父子組件通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了iview在vue-cli3如何按需加載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細介紹了vue使用watch監(jiān)聽props的一些小建議,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
vue-cli history模式實現(xiàn)tomcat部署報404的解決方式
這篇文章主要介紹了vue-cli history模式實現(xiàn)tomcat部署報404的解決方式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09