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. ZOJ 3780 Paint the Grid Again（隐式图拓扑排序）

    Paint the Grid Again Time Limit: 2 Seconds      Memory Limit: 65536 KB Leo has a grid with N × N cel ...

  2. HDFS设计思想

    HDFS设计思想 DataNode:用来在磁盘上存储数据 HDFS  数据存储单元( block ) 1 文件被切分成固定大小的数据block块 •默认数据块大小为 64MB(hadoop1.x版本6 ...

  3. POJ2723 Get Luffy Out 【2-sat】

    题目 Ratish is a young man who always dreams of being a hero. One day his friend Luffy was caught by P ...

  4. javasript 按值传递

    现象总结如下: 1.JS的基本类型,是按值传递的.2.对于对象而言:分两种情况(a).如果传递给函数的参数是对象,并且修改了这个对象的属性(某些字段的值),那么奇妙的问题就来了.原参数就被修改了.(b ...

  5. CentOS下Nginx部署React静态应用

    查看CentOS版本: cat /etc/redhat-release 安装nginx: yum install nginx 查看nginx版本: nginx -v 启动nginx: systemct ...

  6. nodeJS学习（6）--- Sublime Text3 配置Node.js 开发环境

    参考:http://www.bubuko.com/infodetail-798008.html http://www.cnblogs.com/bluesky4485/p/3928364.html 1. ...

  7. 球形空间产生器sphere（bzoj 1013）

    Description 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁 ...

  8. 兼容FF和IE的tooltip 鼠标提示框

    原文发布时间为:2009-09-07 -- 来源于本人的百度文章 [由搬家工具导入] http://www.walterzorn.de/tooltip/tooltip.htm 【请见该页面】 Down ...

  9. 为图片添加文字 canvas

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  10. Error-invalid project description（转）

    导入android工程时有时会出现下面错误: 按照提示,说是当前的工作空间内已经有同名的工程了,但实际是没有的. 多次碰到这种问题后,无意间找到解决办法.导入工程时,不要选择Android,而是选择G ...