vue2.5开发去哪儿网app移动端项目实战

vue2.5开发去哪儿网app移动端项目实战

一、效果展示

二、项目环境准备

node.js， vue.js, webpack打包工具, ajax， element-ui

三、项目代码结构

readme              //项目的说明文件
package.json         //第三方依赖包配置
package.lock.json    //帮助我们去确定安装的第三方依赖包的具体的版本，保持团队编程的统一
license             //开源协议的说明
index.html          //项目默认的首页模版文件
.postcssrc.js        //对 postcss 的配置项
.gitignore          //不需要上传到 git 上的文件管理 
.eslintrc.js        //对写的代码检测是否标准做一个检测
.eslintignore       //配置不需要 eslintrc 检测工具检测的文件
.editorconfig       //配置编辑器总风格统一的自动化格式的语法
.babelrc            //项目写的代码是 Vue 的大文件组件的代码的写法，所以需要通过 babel 这种语法解析器做一些语法上的转换，最终转换成浏览器能够编译执行的代码，babel 需要做额外配置时，就放在文件里面
static                  //static 目录放的是静态资源，要用到的静态图片啊或者后续需要模拟的 json 数据
node_modules                 //项目中需要用到的第三方 node 包
src                         //放的是项目的源代码
src/main.js                  //整个项目的入口文件
src/app.vue                 //整个项目最原始的根组件
src/router/index.js          //项目的路由放置位置
src/components               //项目中要用到的小组件
src/assets                  //项目中需要用到的图片
config                      //放置项目配置文件
config/index.js              //放基础配置
js            //开发环境配置信息
js           //线上环境配置信息
build                      //放置项目打包的 webpack 配置信息，vue-cli 会自动构建
build/f.js   //基础的 webpack 配置信息
build/f.js    //开发环境的 webpack 配置信息
build/f.js   //线上环境的 webpack 配置信息

四、home首页制作

1、创建home-header分支

虚拟数据API在mock文件中，通过config.js的index.js的poxytable属性去添加

ports = {dev: {// Paths fiddler charlesassetsSubDirectory: 'static',assetsPublicPath: '/project',proxyTable: {'/api': {target: 'localhost:8082',pathRewrite: {'^/api': 'static/mock'}}},

2、为了避免版本导致效果不出来，直接复制此代码到package.json中，然后npm install 全部下载好，一劳永逸

"dependencies": {"axios": "^0.17.1","babel-polyfill": "^6.26.0","better-scroll": "^1.8.1","fastclick": "^1.0.6","stylus": "^0.54.5","stylus-loader": "^3.0.1","vue": "^2.5.2","vue-awesome-swiper": "^2.6.7","vue-router": "^3.0.1","vuex": "^3.0.1"},

3、在assets目录下新建styles目录，创建varibles.styl存放共用的样式颜色和字号等

$bgColor = #00bcd4
$darkTextColor = #333
$headerHeight = .86rem

4、在f.js文件中加入我们想要简化的路径

 resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'styles': resolve('src/assets/styles'),'common': resolve('src/common'),}},

5、在需要的页面中引入varibles.styl样式

<style lang="stylus" scoped>@import '~styles/varibles.styl'

6、配置index.html的meta的content “width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”使用户放大页面无效

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
>

7、设置mixins.styl 用来设置文本后面的三个小点

ellipsis()overflow: hiddenwhite-space: nowraptext-overflow: ellipsis

8、一像素边框的处理，复制准备好的border.css和reset.css到styles目录中

reset.css，初始化整体样式，去除某些标签的默认样式，比如<li></li>的小黑点；

border.css，解决移动端1px边框的问题；

import 'styles/reset.css'
import 'styles/border.css'

/* border.css */
@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {content: "020";overflow: hidden;position: absolute;
}
/* border* 因，边框是由伪元素区域遮盖在父级* 故，子级若有交互，需要对子级设置* 定位 及 z轴*/
.border::before {box-sizing: border-box;top: 0;left: 0;height: 100%;width: 100%;border: 1px solid #eaeaea;transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {left: 0;width: 100%;height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {top: 0;width: 1px;height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {border-top: 1px solid #eaeaea;transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {border-right: 1px solid #eaeaea;transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {border-bottom: 1px solid #eaeaea;transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {border-left: 1px solid #eaeaea;transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {/* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {.border::before {width: 200%;height: 200%;transform: scale(.5);}.border-top::before,.border-bottom::before,.border-topbottom::before,.border-topbottom::after,.border-topleft::before,.border-rightbottom::after,.border-topright::before,.border-bottomleft::before {transform: scaleY(.5);}.border-right::before,.border-left::before,.border-rightleft::before,.border-rightleft::after,.border-topleft::after,.border-rightbottom::before,.border-topright::after,.border-bottomleft::after {transform: scaleX(.5);}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {.border::before {width: 300%;height: 300%;transform: scale(.33333);}.border-top::before,.border-bottom::before,.border-topbottom::before,.border-topbottom::after,.border-topleft::before,.border-rightbottom::after,.border-topright::before,.border-bottomleft::before {transform: scaleY(.33333);}.border-right::before,.border-left::before,.border-rightleft::before,.border-rightleft::after,.border-topleft::after,.border-rightbottom::before,.border-topright::after,.border-bottomleft::after {transform: scaleX(.33333);}
}

/* reset.css */
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

reset.css中HTML的 font-size设置的是50px,即

1rem = html font-size = 50px

设计师给的2倍的设计图，头部高度是86px除以2是43px,换算成rem的单位就是 86÷100 = 0.86 rem

或者43÷50 = 0.86rem，所以86px就是0.86rem，64px就是0.64rem

9、flex = 1 的含义 ，点这里

flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。

flex：1；的逻辑就是用flex-basis把width干掉，然后再用flex-grow和flex-shrink增大的增大缩小的缩小，达成最终的效果。

box-sizing 元素的总高度和宽度包含内边距和边框(padding 与 border)

display-flex

五、首页轮播图

1、Swiper的使用，官网戳我，swiper5戳我，swiper3

2、vue中配置babel-polyfill

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题；

3、height:0; padding-bottom: 50%是什么意思？

垂直居中，高度始终为宽度一半

六、首页icons滑动

1、项目学习总结，看这位博主写的很详细

2、样式穿透

.icons >>> .swiper-containerheight: 0padding-bottom:50%

七、热销推荐

1、加border-bottom 这个类名可以直接添加下边框，因为border.css里面设置的

2、文本不换行 white-space： nowrap ，ellipsis()单行省略

ellipsis()overflow: hiddenwhite-space: nowraptext-overflow: ellipsis

3、每个组件的代码加笔记，戳我

4、Git：解决git中(master|MERGING)

解决办法：

使用命令

git reset --hard head

博主项目专栏1, 专栏2

八、城市页面

1、

2、v-for in 和 v-for of 区别

3、search的滚动要放在updated中，不然不能滑动

九、ajax的模拟数据是“”而不是‘’