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


Posted in Javascript onNovember 05, 2020

1,引入组件

在components目录创建组件,在页面中引入组件

例如引入公共导航栏

创建组件components/Nav.vue

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

引入组件layouts/default.vue

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

2,引入公共样式

assets/css/common.css

在nuxt.config.js中引入

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

若引入less或者sass:

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

补充知识:在nuxt项目中使用component组件

编写组件页面

1.在components下新建一个新建组件页面,如下所示

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

2.新建完成之后初始页面的代码如下所示:

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

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>

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

使用组件

1.引入组件

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

2.注册组件

components: {
 MinorTopMenu
}

3.使用组件

<MinorTopMenu></MinorTopMenu>

4.页面代码截图

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

测试

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

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

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

Javascript 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 #Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 #Javascript
vue实现点击出现操作弹出框的示例
Nov 05 #Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 #Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 #Javascript
前端vue如何使用高德地图
Nov 05 #Javascript
You might like
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
python中import学习备忘笔记
2017/01/24 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python如何制作英文字典
2019/06/25 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
我的网上商城创业计划书
2013/12/26 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android