nuxt引入组件和公共样式的操作

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上找一个顶部导航菜单写到组件页面。

 处理中心
 
  
  选项1
  选项2
  选项3
  
   
   选项1
   选项2
   选项3
  
 
 消息中心
 订单管理

使用组件

1.引入组件

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

2.注册组件

components: {
 MinorTopMenu
}

3.使用组件

4.页面代码截图

测试

打开页面，如下所示，说明组件使用成功

以上这篇nuxt引入组件和公共样式的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。