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 相关文章推荐
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 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
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
javascript 数组的方法集合
2008/06/05 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
python技能之数据导出excel的实例代码
2017/08/11 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
python返回数组的索引实例
2019/11/28 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
积极贯彻学习两会精神总结
2014/03/17 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
工作失误检讨书
2015/01/26 职场文书
社会实践活动报告
2015/02/05 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Python制作表白爱心合集
2022/01/22 Python