elementUI界面布局

1.创建 HeadBar 组件

HeadBar.vue

<template>

  <el-row>

    <el-col :span="2"> </el-col>

    <el-col :span="4" style='background:#f9fafc;font-size:2em;'><i class="el-icon-menu"></i>宠物空间</el-col>

    <el-col :span="10" style='background:#f9fafc;'>

      <el-input

        placeholder="请输入搜索关键词"

        icon="search"

      ></el-input>

    </el-col>

    <el-col :span="6" style='background:#f9fafc;'>

      <el-button type="success">登录/注册</el-button>

    </el-col>

    <el-col :span="2"> </el-col>

  </el-row>

</template>

2.引用

3.效果图

vue.js+koa2项目实战（二）创建 HeadBar 组件的更多相关文章

  1. vue.js+koa2项目实战（一）创建项目和elementUI配置

    前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...

  2. vue.js+koa2项目实战（四）搭建koa2服务端

    搭建koa2服务端 安装两个版本的koa 一.版本安装 1.安装 koa1 npm install koa -g 注:必须安装到全局 2.安装 koa2 npm install koa@2 -g 二. ...

  3. vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  4. vue.js+koa2项目实战（三）登录注册模态框

    登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...

  5. vue.js+koa2项目实战（六）数据库建表

    数据库建表 1.打开 MySQL 终端 2.查看所有数据库 show databases 3.创建数据库 create database pet 4.进入数据库 use pet 5.创建数据表 cre ...

  6. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  7. vue.js的项目实战

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用, ...

  8. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  9. vue.js及项目实战[笔记]— 01 vue.js

    一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好 前端框架与库的区别 j ...

随机推荐

  1. 【bzoj1531】[POI2005]Bank notes 多重背包dp

    题目描述 Byteotian Bit Bank (BBB) 拥有一套先进的货币系统,这个系统一共有n种面值的硬币,面值分别为b1, b2,..., bn. 但是每种硬币有数量限制,现在我们想要凑出面值 ...

  2. 独木桥(bridge)

    独木桥(bridge) 题目描述 Alice和Bob是好朋友,这天他们带了n个孩子一起走独木桥. 独木桥宽度很窄,不允许两个或两个以上的人并肩行走,所有人必须要前后一个接一个地通行. Bob给所有的孩 ...

  3. [暑假集训--数论]poj3518 Prime Gap

    The sequence of n − 1 consecutive composite numbers (positive integers that are not prime and not eq ...

  4. my conclusion about time planing and requirement changes.

    How to estimate time when requirement changes or is added: my principle: never say so easy, at least ...

  5. [LeetCode] Count and Say 字符串

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  6. python print的参数介绍

    参考print的官方文档 print(...) print(value, ..., sep=' ', end='\n', file=sys.stdout, flush=False) Prints th ...

  7. poj 2299(离散化+树状数组)

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 53777   Accepted: 19766 ...

  8. 一、Ubuntu 简介

    Ubuntu 是一个Linux 系统 Apt-Get apt-get 命令是一个强大的命令行工具,用于同 Ubuntu 的 Advanced Packaging Tool (APT) 一起执行诸如安装 ...

  9. AC日记——最高奖励 51nod 1163

    最高的奖励 思路: 排序: 时间为第一关键字,按总小到大排: 价值为第二关键字,按从大到小排: 然后,不难看出,如果两个时间不同: 那么,两个时间之间最少能做一件事: 因为他们的时间下限最少相差1: ...

  10. SSRS的配置

    SSRS是微软的报表服务管理器,本文讲述SSRS的配置:邮件和凭证. 一,配置SMTP 在报表服务配置管理器(Reporting Service Configuration Manager)中配置邮件 ...