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. 【转】UGUI（小地图的实现）与游戏关卡选择的简单实现

    http://www.jianshu.com/p/68637029e9df 游戏中小地图的实现(场景用简单Cube组成先搭建如下图场景,真实场景实现方法也是一样) 图1-1小地图效果图 1.创建好场景 ...

  2. socket实例C语言：一个简单的聊天程序

    我们老师让写一个简单的聊天软件,并且实现不同机子之间的通信,我用的是SOCKET编程.不废话多说了,先附上代码: 服务器端server.c #include <stdio.h> #incl ...

  3. linux编程学习

    linux编程学习 工具篇 “公欲善其事,必先利其器”.编程是一门实践性很强的工作,在你以后的学习或工作中,你将常常会与以下工具打交道, 下面列出学习 C 语言编程常常用到的软件和工具. (一)操作系 ...

  4. Codeforces Round #241 (Div. 2) B dp

    B. Art Union time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  5. Python与其他语言时间戳

    时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp). Unix时间戳(Unix timestamp),或称Un ...

  6. HDU2767 Proving Equivalences

    Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  7. VC6.0工程改名(转)

    只讨论对工程改名,其他文件和类的名字不改变,否则就很麻烦了.  操作步骤:   (1)删除 .dsw 文件.改好了会再自动生成的: (2)以写字板或记事本方式打开.dsp文件: (3)将其中所有的原工 ...

  8. 修改手機的 input source 及 charger 及 usb 相關電路後，容易忽略的事項

    input source 及 charger 需要注意, 是否可以在關機的狀況下充電, 當然 開機充電 是一定要的. usb 部分需要注意, 是否可以在沒有電或者是有電的狀況下 download 程式 ...

  9. 网络请求失败记录（安卓4g网络下第一次请求特别慢或者失败）

    最近app的一次版本上线以后出现4g网络下请求接口特别慢,第一次调用接口非常非常慢或者直接访问失败,后面就正常了,但是WiFi情况下并不会出现这个问题.最主要的是IOS的线上app并没有问题. 开始怀 ...

  10. YACEP相关技术工具服务技巧(上)

    这篇随笔的核心是介绍一下YACEP所用到的一些技术,工具,服务和技巧,鉴于篇幅原因,不可能面面俱到,只能点到为止,目录如下: 目录: 1. YACEP简介(上)             2. 技术篇( ...