![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue去哪儿网app项目实战
风里有诗句哈
有事请私信
展开
-
二.Vue2.5开发去哪儿网app城市列表页①——城市选择页面路由配置和Header布局
在pages文件夹下新建city文件夹用于存放city组件和其子组件路由更新,这里注意city的路径是path: '/city',不再是首页的路径import Vue from 'vue'import Router from 'vue-router'import Home from '@/pages/home/Home'import City from '@/pages/city/...原创 2019-02-23 17:46:55 · 626 阅读 · 0 评论 -
一.Vue2.5开发去哪儿网app首页⑦——ajax获取首页数据
使用axios第三方模块来进行项目的ajax请求安装axiosnpm install axios --save每一个组件都有数据,都发送一次ajax请求就会有太多的请求,所以可以在Home组件中一次性发送一个请求在Home组件中引入axiosimport axios from 'axios'在static/mock文件夹下新建index.json文件, 在方法中写入函数...原创 2019-02-19 20:59:37 · 535 阅读 · 2 评论 -
一.Vue2.5开发去哪儿网app首页⑥——热销推荐组件开发
新建recommend组件,代码部分注意点,在我们使用ellipsis()函数样式时,超出范围的字不会出现省略号,此时需要在item-info中加入min-width: 0,保证内容不超出外层容器,才会显示省略号<template> <div> <div class="title"> 热销推荐 </div>...原创 2019-02-19 19:57:07 · 337 阅读 · 0 评论 -
二.Vue2.5开发去哪儿网app城市列表页④——字母表点击或拖拽带动页面变换(兄弟组件间的联动)
当我们处理兄弟组件时,可以让一个组件的数据给父组件,然后让父组件的这个数据传递给另一个组件设置Alphabet子组件,当其一个字母被点击时向外触发一个change事件,并携带它的文本内容<template> <ul class="list"> <li class="item" v-for="(item, key) of cities" :key=...原创 2019-02-24 18:46:40 · 489 阅读 · 0 评论 -
使用码云管理代码
生成/添加SSH公钥码云提供了基于SSH协议的Git服务,在使用SSH协议访问仓库仓库之前,需要先配置好账户/仓库的SSH公钥。你可以按如下命令来生成 sshkey:ssh-keygen -t rsa -C "xxxxx@xxxxx.com" # Generating public/private rsa key pair...按照提示完成三次回车,即可生成 ssh k...原创 2019-02-11 20:19:18 · 686 阅读 · 0 评论 -
Vue移动端项目初始化
index.html中设置移动端不能缩放拉伸<meta name="viewport" content="width=device-width,initial-scale=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 使用reset.css文件重置页面样式表,在main...原创 2019-02-12 17:15:32 · 587 阅读 · 3 评论 -
一.Vue2.5开发去哪儿网app首页①——旅游网站首页开发
安装stylus方便我们快速编写CSS代码npm install stylus --savenpm install stylus-loader --save在Home中导入并使用HomeHeader组件 <template> <div> <home-header></home-header> </div>...原创 2019-02-12 22:37:44 · 964 阅读 · 0 评论 -
一.Vue2.5开发去哪儿网app首页②——iconfont的使用和代码优化
在iconfont官网下载所需的图标,将尾缀.svg .ttf .woff .eot的字体文件放入styles中的iconfont文件夹中,将iconfont.css文件放入styles文件夹中改下iconfont.css中文件加载路径@font-face {font-family: "iconfont"; src: url('./iconfont/iconfont.eot?t...原创 2019-02-13 22:40:45 · 455 阅读 · 0 评论 -
一.Vue2.5开发去哪儿网app首页③——首页轮播图
在码云中新建一个index-swiper分支,接下来的开发都会在这个分支上 在项目中运行git pull将这个线上的分支拉到本地来git pull 切换到index-swiper分支git checkout index-swiper查看一下本地的状态确认是否正确git status然后在次分支上执行npm run dev 接下来我们开始制作轮播图了,...原创 2019-02-16 21:55:12 · 619 阅读 · 0 评论 -
一.Vue2.5开发去哪儿网app首页④——图标区域页面布局
同样,在码云中新建一个index-icons分支,接下来的开发都会在这个分支上git转至index-icons分支三部曲git pullgit checkout index-iconsgit status在components下新建一个Icons组件,导入到Home组件中,Icons组件内容:icons使用浮动布局,8个icon自动分布2行,icon内图片和描述使用子绝父相...原创 2019-02-17 21:17:15 · 837 阅读 · 0 评论 -
一.Vue2.5开发去哪儿网app首页⑤——图标区域轮播逻辑实现
实现图标区域可以轮播<template> <swiper :options="swiperOption"> <swiper-slide> <div class="icons"> <div class="icon"> <div class=原创 2019-02-17 21:55:37 · 493 阅读 · 0 评论 -
二.Vue2.5开发去哪儿网app城市列表页③——Better-scroll的使用、字母表布局和数据渲染
插件链接https://github.com/ustbhuangyi/better-scroll安装Better-scrollnpm install better-scroll --save这是Better-scroll插件结构要求,所以我们要在list下还要添加一个总div使其成为此格式<div class="wrapper"> <ul class="c...原创 2019-02-24 14:47:00 · 481 阅读 · 0 评论 -
二.Vue2.5开发去哪儿网app城市列表页②——城市列表页布局
List组件因为后续要使用滚动插件,所以绝对定位布局和overflow: hidden,使屏幕不能拉动<template> <div class="list"> <div class="area"> <div class="title border-topbottom">当前城市</div&原创 2019-02-24 14:17:11 · 440 阅读 · 0 评论 -
一.Vue2.5开发去哪儿网app首页⑧——首页父子组件数据传递
父组件Home传值给子组件Header在Home组件中写入 data () { return { city: '' } }, 并绑定:city="city"<template> <div> <home-header :city="city"></home-header> <原创 2019-02-20 22:14:51 · 326 阅读 · 0 评论