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 · 698 阅读 · 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 · 583 阅读 · 2 评论 -
一.Vue2.5开发去哪儿网app首页⑥——热销推荐组件开发
新建recommend组件，代码部分注意点，在我们使用ellipsis()函数样式时，超出范围的字不会出现省略号，此时需要在item-info中加入min-width: 0，保证内容不超出外层容器，才会显示省略号<template> <div> <div class="title"> 热销推荐 </div>...原创 2019-02-19 19:57:07 · 388 阅读 · 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 · 549 阅读 · 0 评论 -
使用码云管理代码
生成/添加SSH公钥码云提供了基于SSH协议的Git服务，在使用SSH协议访问仓库仓库之前，需要先配置好账户/仓库的SSH公钥。你可以按如下命令来生成 sshkey:ssh-keygen -t rsa -C "[email protected]" # Generating public/private rsa key pair...按照提示完成三次回车，即可生成 ssh k...原创 2019-02-11 20:19:18 · 732 阅读 · 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 · 621 阅读 · 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 · 1031 阅读 · 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 · 522 阅读 · 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 · 688 阅读 · 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 · 919 阅读 · 0 评论 -
一.Vue2.5开发去哪儿网app首页⑤——图标区域轮播逻辑实现
实现图标区域可以轮播<template> <swiper :options="swiperOption"> <swiper-slide> <div class="icons"> <div class="icon"> <div class=原创 2019-02-17 21:55:37 · 546 阅读 · 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 · 524 阅读 · 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 · 482 阅读 · 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 · 365 阅读 · 0 评论