编写组件页面

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

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

3.下面从element-ui上找一个顶部导航菜单写到组件页面。

  1. <el-menu
  2. :default-active="activeIndex2"
  3. class="el-menu-demo"
  4. mode="horizontal"
  5. @select="handleSelect"
  6. background-color="#545c64"
  7. text-color="#fff"
  8. active-text-color="#ffd04b">
  9. <el-menu-item index="1">处理中心</el-menu-item>
  10. <el-submenu index="2">
  11. <template slot="title">我的工作台</template>
  12. <el-menu-item index="2-1">选项1</el-menu-item>
  13. <el-menu-item index="2-2">选项2</el-menu-item>
  14. <el-menu-item index="2-3">选项3</el-menu-item>
  15. <el-submenu index="2-4">
  16. <template slot="title">选项4</template>
  17. <el-menu-item index="2-4-1">选项1</el-menu-item>
  18. <el-menu-item index="2-4-2">选项2</el-menu-item>
  19. <el-menu-item index="2-4-3">选项3</el-menu-item>
  20. </el-submenu>
  21. </el-submenu>
  22. <el-menu-item index="3" disabled>消息中心</el-menu-item>
  23. <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  24. </el-menu>

使用组件

1.引入组件

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

2.注册组件

  1. components: {
  2. MinorTopMenu
  3. }

3.使用组件

  1. <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. xshell6破解4窗口限制

    资源路径: 链接: https://pan.baidu.com/s/11zumNoaIN1AF_YhmiPGWdA 提取码: nfs9 破解方法 先卸载系统中已经安装的xshell与xftp 然后安装 ...

  2. 123457123457#0#-----com.threeapp.mouseRunner01----儿童老鼠跑酷游戏

    com.threeapp.mouseRunner01----儿童老鼠跑酷游戏

  3. linux 运维指令

    [root@yan- ~] # uname -a # 查看内核/操作系统/CPU信息的linux系统信息命令 [root@yan- ~] # head -n /etc/issue # 查看操作系统版本 ...

  4. Python3之定制类

    看到类似的__slots__这种形如__xxx__的变量或者函数名就要注意,这些在Python中是有特殊用途的 Python中还有许多有特殊用途的函数,可以帮助我们定制类 __str__ 先定义一个S ...

  5. webpack简单配置

    1.代理配置 需要修改一下配置文件 config里的index.js,根据接口特点自主选取 2.解决图标显示路径错误问题 项目在打包完成后如果出现图片显示不了的问题,需要进行如下配置

  6. php 将图片文件转成base64编码的方法

    php 将图片文件转成base64编码的方法<pre><?php /** 文件转base64输出 * @param String $file 文件路径 * @return Strin ...

  7. javaIO -- 流的体系设计思路、基础分类

    一.流 1. 流的含义 在程序设计中,流是对于数据流动传输的一种抽象描述任何有能力产出数据的数据源,或者有能力接受数据的接收端对象都是一个流. 2. 流的源和目的 数据可能从本地文件读取,或者写入,  ...

  8. Office常用快捷键大全,包含 Word、Excel、PowerPoint

    功能 快捷键 查找文字.格式和特殊项 Ctrl+G 使字符变为粗体 Ctrl+B 为字符添加下划线 Ctrl+U 删除段落格式 Ctrl+Q 复制所选文本或对象 Ctrl+C 剪切所选文本或对象 Ct ...

  9. LC 98. Validate Binary Search Tree

    题目描述 Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defin ...

  10. Ubuntu将自带的python3升级

    一.这里演示的是将python3.5升级到python3.6 1.添加安装源,在命令行输入如下命令: sudo add-apt-repository ppa:jonathonf/python-3.6 ...