vue2.5开发去哪儿了流程
初始化项目
在 src/assets 中添加样式初始化文件 reset.css ; border.css
本地引入取消延迟300毫秒的控件
cnpm i fastclick -S
在mian.js中引入 初始化样式文件及文件的是用
import fastClick from ‘fastclick’
import ‘./assets/reset.css’
import ‘./assets/border.css’fastClick.attach(document.body)
旅游网站首页开发
header区域开发
- 使用stylus编写css样式
cnpm i stylus stylus-loader -S - 给的UI涉设计图为750px 即使以iPhone6/7/8 为准
- 在reset中设置
html { font-size: 50px }
- 在样式文件中单位就为UI设计图中原来的1%
iconfont的使用和代码优化
https://www.iconfont.cn 选择图标并下载本地
- 在
src/assets
中放入iconfont目录及iconfont.css
- 修改
iconfont.css
文件中src: url()
路径./iconfont/iconfont.eot..
- 在
main.js
中引入`import './assets/iconfont.css'`
- 创建公共样式 在style目录下创建
varibles.styl
`$bgColor = #00bcd4`
- 引入并使用
`@import '~@/assets/styles/varibles.styl'`
`background: $bgColor`
header.vue
<template>
<div class="header">
<div class="header-left">
<div class="iconfont back-icon"></div>
</div>
<div class="header-input">
<span class="iconfont"></span>
输入城市/景点/游玩主题
</div>
<router-link to='/city'>
<div class="header-right">
<span class="iconfont arrow-icon"></span>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: 'HomeHeader'
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.header
display: flex
line-height: .86rem
background: $bgColor
color: #fff
.header-left
width: .64rem
float: left
.back-icon
text-align: center
font-size: .4rem
.header-input
flex: 1
height: .64rem
line-height: .64rem
margin-top: .12rem
margin-left: .2rem
padding-left: .2rem
background: #fff
border-radius: .1rem
color: #ccc
.header-right
min-width: 1.04rem
padding: 0 .1rem
float: right
text-align: center
color: #fff
.arrow-icon
margin-left: -.04rem
font-size: .24rem
</style>
首页轮播图
- 在GitHub中搜索
vue-awesome-swiper
- 在组件实例属性name中不要写Swiper, 会导致swiper组件报错
- 避免轮播图未加载出来时下方的内容跑到上面来
- 在html中外层添加<div class='wraper'></div>
- 在style中定义wraper高度.wrapper{overflow hidden; width: 100%; height: 0; padding-bottom: 31.25% }
padding-bottm: 轮播图的高度/轮播图的宽度*100%
- 全局设置 swiper-pagination 的样式
.wrapper >>> swiper-pagination-bullet-active( background: #f00)
swiper.vue
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="item in swiperList"><img class="swiper-img" :src="item.imgUrl"></swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',
loop: true
},
swiperList: [{
id: '001',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/9f73976e40c4ef845cabe0efc0269ebb.jpg_750x200_aab92b7a.jpg'
},
{ id: '002',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/2f5f3ea4698c9b7898db7562d89b91ed.jpg_750x200_bd3b4ce9.jpg'
}, {
id: '003',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/534106663f424042868365167e4a66ff.jpg_750x200_3ec12f21.jpg'
}]
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> swiper-pagination-bullet-active
background: #f00
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 26.6666%
.swiper-img
width: 100%
</style>
vue2.5开发去哪儿了流程的更多相关文章
- Vue2.5 开发去哪儿网App
Vue2.5开发去哪儿网App 技术栈和主要框架
- Vue2.5开发去哪儿网App 首页开发
主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
- Vue2.5开发去哪儿网App 从零基础入门到实战项目
第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- Vue2.5开发去哪儿网App 搜索功能完成
效果展示: Search.vue: <div class="search-content" ref="search" v-show="keywo ...
- Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化
一, 兄弟组件间联动 1. 点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...
- Vue2.5开发去哪儿网App 城市列表开发
一,城市选择页面路由配置 ...
- Vue2.5开发去哪儿网App 详情页面开发
一,banner 图的设计 1. 新建detail的路由 import Detail from '@/pages/detail/Detail' ...... { path: '/detail', na ...
- Vue2.5开发去哪儿网App 第五章笔记 下
1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...
随机推荐
- 【算法•日更•第四十三期】QQ for linux
废话不多说,直接看一张图: 没错,这是QQ,但是这有什么稀奇的?但是在Linux上使用QQ就很稀奇了. 众所周知,腾讯早就已经对Linux下的QQ和微信停止了服务,即便是网页版也不能用,通信这一直是小 ...
- Jmeter 常用函数(14)- 详解 __strLen
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.htm 作用 读取给定字符串的长度 语法格式 ${__ ...
- PHP、JS一些用法
PHP去除小数点后面的0,保留非零 floatval($num) PHP转数组var d = eval(数组d); PHP字符串转数组 $row['0'] = explode(";" ...
- W3C标准和语义化
一.语义化的理解 根据内容选择合适的标签,便于开发者阅读,在写出更优雅的代码的同时让浏览器很好的解析. 目的 1.在没有CSS的情况下,页面也能呈现出很好的内容结构和代码结构: 2.有利于SEO:和搜 ...
- IDEA创建动态Web项目
1.IDEA创建动态Web项目 1.1.使用IDEA创建动态Web项目,选择Java Enterprise,记得选择服务器,我这里使用的时tomcat 1.2记得勾选Web Application,其 ...
- jmeter参数化之 【CSV Data Set Config/CSV数据配置文件】
这里以登录功能为例: 1.新建.txt文件,将参数值写入到txt文件中(多个参数值如:用户名,密码 之间以逗号隔开),将文件放置在想要放置的目录下 2.添加csv数据文件设置 右键线程组->添加 ...
- 学习seo赚钱一定要有超前的思路和眼光
http://www.wocaoseo.com/thread-100-1-1.html 日子过的真是快,一天又一天,一年又一年,虽然过年的脚步将近,火车票的问题还是没有解决,昨天忙活了半 ...
- printf size_t warning
printf("print discoverList.size()=[%u]\n", discoverList.size()); src/ResultToDB.cpp:2768: ...
- 滴滴Ceph分布式存储系统优化之锁优化
桔妹导读:Ceph是国际知名的开源分布式存储系统,在工业界和学术界都有着重要的影响.Ceph的架构和算法设计发表在国际系统领域顶级会议OSDI.SOSP.SC等上.Ceph社区得到Red Hat.SU ...
- laravel中elastisearch安装和测试运行是否成功(注意是windows下的操作)
1.去elasticsearch官网下载,如果太慢可以在我上一个随笔看下载地址 2.下载完解压缩,在cmd中找到到elasticsearch的bin目录下执行.\elasticsearch.bat - ...