vue2.0 之 douban （三）创建header组件

【vue2.0 之 douban （三）创建header组件】的更多相关文章

vue2.0 + vux （一）Header 组件

1.main.js import Vue from 'vue' import FastClick from 'fastclick' import VueRouter from 'vue-router' import App from './App' // 自定义的路由文件 import router from './router' // 解决300ms延迟问题 FastClick.attach(document.body) Vue.config.productionTip = false /*…

vue2.0 之 douban （三）创建header组件

1.分析首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的header. 我们先在components文件中创建一个header.vue文件,并且在less文件里新建一个颜色变量var.less(统一管理app的颜色,保持统一),我们先将有其他元素的组件的大致框架,以及样式先写出来.然后在Index.vue里面引入. var.less //APP默认颜色 @…

《React后台管理系统实战：三》header组件：页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数

一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header.less' export default class Header extends Component{ render(){ return( <div className='header'> <div className='header-top'> <span>欢迎,adm…

vue2.0 之 douban （四）创建Swipe图片轮播组件

swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下,如图: 然后根据swiper的使用方法:http://www.swiper.com.cn/usage/index.html 将html结构复制到swipe组件里,引入css文件,以及js <template> <div class="swiper-container"&g…

vue2.0 之 douban （二）创建自定义组件tabbar

1.大体布局这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 Index.vue <template> <div class="m-tabbar"> <a class="m-tabbar-item is-active"> <span class="m-tabbar-item-i…

vue2.0 之 douban （五）创建cell,media-cell组件

1.组件cell 这里的cell分为三种样式,左侧带图标,不带图标,以及左侧带竖线的cell. 每一个组件都有一个底部边框: 这里我们采用了移动端1px像素问题的解决方法:父级元素设置相对定位,构建1个伪元素,设置绝对定位, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%. &:before { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; backgro…

vue2.0 之 douban （六）axios的简单使用

由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如 proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'https://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } }, 安装axios npm install --save axios vue-axios 在main.js引入axios import axios…