编写组件页面

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 href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>

使用组件

1.引入组件

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

2.注册组件

components: {
MinorTopMenu
}

3.使用组件

<MinorTopMenu></MinorTopMenu>

4.页面代码截图

测试

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


说明:本文为原创作品,若有参考会在文中提及,如有遗漏,涉及侵权,请联系本人,将立即修正。

在nuxt项目中使用component组件的更多相关文章

  1. nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案

    node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...

  2. 项目中调用ExcelCom组件时的配置流程

    异常提示如下:         Microsoft Office Excel 不能访问文件“*.xls”. 可能的原因有:        1 文件名称或路径不存在.       2 文件正被其他程序使 ...

  3. Flask项目中整合各组件

    一.介绍 主要介绍flask_sqlalchemy.flask_script.flask_migrate这三个组件该如何整合到flask项目中,以及如何使用. # 安装组件 pip3 install ...

  4. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

  5. 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

    在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...

  6. [原]Unity3D深入浅出 - 认识开发环境中的Component(组件)菜单

    Component(组件)是用来添加到GameObject对象上的一组相关属性,本质上每个组件都是一个类的实例,比如在Cube上添加一个Mesh网格,即面向对象的思维方式可以理解成Cube对象里包含了 ...

  7. 【工作细节记录】维护项目中前端JS组件丢失后,应如何维护开发之启发

    事因: 我所维护的项目为旧项目,接手项目后并没有什么开发文档留下,导致很多时候一出现问题就需要自己去研究整个过程. 项目中一直使用一个"$.download()"的方法进行文件下载 ...

  8. vue项目中使用地图组件

    一.引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一 ...

  9. 解决在 WP8/ WP8.1 项目中 引用 C++ 组件时出现的 System.TypeLoadException 错误

    本文为个人博客备份文章,原文地址: http://validvoid.net/wp-cpp-typeloadexception/ 使用 Visual Studio 2013 update 4 在 WP ...

随机推荐

  1. 重置密码解决MySQL for Linux

    重置密码解决MySQL for Linux错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor ...

  2. 多线程分页处理批量数据--jdbc方式

    /** * 同步数据信息到ES * @return */ public boolean syncNhReportSeessToEs(){ long begin = System.currentTime ...

  3. vmware安装密钥

    VMware虚拟机已升级至14版本,之前的12版本的秘钥已经无法使用,在此分享一下VMware Workstation 14永久激活密钥: CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ...

  4. MySQL5.7查看数据存储位置

    在MySQL客户端执行如下命令查看MySQL的数据存放位置: mysql> show global variables like "%datadir%"; +-------- ...

  5. iframe重定向让父页面跳转

    情景描述 我们在使用一些后台程序的html模板(比如H-ui)的时候,这些html前端程序是iframe版的, 也就是说在使用的时候,每当我点击左侧导航栏的一个按钮,在右侧就会弹出一个菜单栏,在显示的 ...

  6. iOS-UINavigationController多控制器管理

    UINavigationController 7.8.1 添加子控制器进栈 UINavigationController *nav = [[UINavigationController alloc]  ...

  7. c#关于Dictionary中自定义Key

    Dictionary 描述 字典 Dictionary 通过 Hash 桶算法进行O(1)查找数据,在 Hash 碰撞达到一定次数后会自动进行 Resize,也会在数组大小不足的时候会自动进行Resi ...

  8. redis的发布与订阅机制

    Redis 发布/订阅机制原理分析 Redis 通过 PUBLISH. SUBSCRIBE 和 PSUBSCRIBE 等命令实现发布和订阅功能. 这些命令被广泛用于构建即时通信应用,比如网络聊天室(c ...

  9. js 实现数字格式化(货币格式)几种方法

    // 方法一 function toThousands(num) { var result = [ ], counter = 0; num = (num || 0).toString().split( ...

  10. [Android] 分析一个CalledFromWrongThreadException崩溃

    1 问题描述 问题本身比较清晰简单,但推敲的过程中发现了不少有意思的东西. 在C++ SDK回调JNI至Java Observer函数中,直接操作了UI界面textView.setText(msg), ...