本文详细介绍了使用Vue.js进行移动端项目开发的过程，包括环境准备、首页、城市列表页和详情页面的构建，涉及Vue CLI、轮播图、字体图标、城市列表动态渲染、字母表布局、页面跳转优化、组件通信等技术。通过实例讲解，帮助读者掌握移动端应用的开发流程和常见问题解决方法。
目录
三.城市列表页
一：移动端项目开发环境准备：
1.本地搭建 vue-cli2 或者vue-cli3 vue-cli4 至少工作2年 vue-cli2 vue3 今年出来的 vite
全局安装
验证vuecli安装是否完成
vue init webpack 项目名
npm run dev (npm run serve)
2.环境准备
项目代码结构：
单文件组件及vue中的路由
main.js 解释
App.vue 根组件
单文件组三部分组成
App.vue中 router-view显示的是当前路由地址所对应的内容 一级路由 嵌套路由
路由配置文件都放在 router目录下的 index.js文件下
多页应用 MPA
页面跳转 返回HTML文件 a标签跳转
优点：首屏时间快 SEO效果好（一个http请求） SEO可以识别网页
缺点：页面切换慢
单页应用 SPA
页面跳转 JS渲染 uri地址
优点：页面切换快
缺点：首屏时间稍慢 SEO差 -->改进 ssr 服务端渲染技术 vue-》nuxt.js
项目代码的初始化： 最基础 统一
index.html中添加视口 发大 缩小无效
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
rem.js 设备通过js自动适配
统一样式 保证页面在所有浏览器显示效果一致。 reset.css
放在目录 assets/styles下
1px边框问题 手机像素比较高 是一个2倍屏 3倍屏 虽然设置为 border 1px solid 但实际上有2px 3px；
解决方案 border.css css3的缩放来解决 谷歌浏览器 强制12px 怎么做 谷歌浏览器能出来10px 8px css3的缩放来解决
300毫秒点击延迟问题：
click事件延迟300ms执行
cnpm install fastclick --save
全局引入 main.js
import fastClick from 'fastclick'
fastClick.attach(document.body)
iconfont
www.iconfont.cn 注册账号 创建项目 选择图标 下载
iconfont.css 整体样式
字体图标
iconfont.woff2
iconfont.woff
iconfont.ttf
iconfont.svg
iconfont.eot
把它们放到styles/iconfont目录下 
项目开始
采用stylus css预处理器 scss less stylus(公司用) 没用过就得用
cnpm install stylus --save -dev
cnpm install stylus-loader@3.0.2 --save -dev
Home页布局
HomeHeader组件
www.iconfont.cn中下载字体图标及使用
两种引入方法一样 @ 代表的是src 哪在哪定义的呢
/* @import "../../../assets/styles/varibles.styl"; */
@import "~@/assets/styles/varibles.styl";
补充下 第一个 gitee.com 上传 下载 需要配置公钥 跟我们上次讲 git与github.com连接一样配置 邮箱咱们不用改
老师 使用stylus 用起来很别扭 能不能换别的 不能 难受 总比上班难受的时候好
www.iconfont.cn 下载图标几十个 几百个字体图标 支持的文件还是哪五个文件
更改项目文件中的相对路径
在build/webpack.base.conf.js中修改
在'@': resolve('src'),
后添加一条
'styles': resolve('src/assets/styles'),
配置完后 重启
二.首页
1.轮播图
远程仓库创建分支 index-swiper
在github.com 上搜索 vue-awesome-swiper
使用
cnpm install vue-awesome-swiper@2.6.7 --save
使用
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
Vue.use(VueAwesomeSwiper)代码实现：
<div class="banner">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item in swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" >
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>产生抖动现象：
原因：
swiper区域没有加载时候为0
加载后马上撑开图片区域大小 对于后边的元素会产生抖动现象 用户体验效果不好
标准外边加盒子 div
overflow: hidden
width: 100%
height: 0
padding-bottom: 26.67%
background: #eee 背景色 图片没出来先显示 保留占位
或者
height :26.67vw 可以 但怕浏览器兼容 vw vh vmax vmin css3的相对单位
<style lang="stylus" scoped>
样式只在本组件有效
样式穿透 >>> /deep/ vue3.0使用 ::v-deep 取代/deep/ 加快编译速度
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
2.图标区域的页面布局
<swiper-slide>
<div class="icon" v-for="item in iconList" :key="item.id">
<div class="icon-img">
<img class="icon-img-content" :src="item.imgUrl" >
</div>
<p class="icon-desc">{
{item.desc}}</p>
</div>
</swiper-slide>
样式实现：
.icons >>> .swiper-container
height : 0
padding-bottom: 50%
.icon
position: relative
overflow: hidden
float: left
width: 25%
height: 0
padding-bottom: 25%
// background : red
.icon-img
position: absolute
top: 0
left: 0
right: 0
bottom: .44rem
// background :blue
box-sizing: border-box
padding: .05rem
.icon-img-content
display: block
margin: 0 auto
height: 100%
.icon-desc
position: absolute
left: 0
right: 0
bottom: 0
height: .44rem
line-height: .44rem
text-align: center
color:#333
计算属性 从原来属性计算出来生成一组新的结果、自带缓存机制
算法：
pages () {
const pages = []
this.iconList.forEach((item, index) => {
//page当前下标的数据应该展示在轮播图的第几页 index是3 下标是2 Math.floor(2/8)向下取整为0 Math.floor(8/8)向下取整为1
const page = Math.floor(index / 8)
if (!pages[page]) {
pages[page] = []
}
pages[page].push(item)
})
return pages
}
3.热销推荐组件开发
页面布局：
<div>
<div class="title">
热销推荐
</div>
<ul>
<li class="item border-bottom" >
<img class="item-img" src="http://img1.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_200x200_2458ffb2.jpg" />
<div class="item-info">
<p class="item-title">八达岭长城</p>
<p class="item-desc">中国第一长城,中国人一生至少要来一次长城，感受长城没来所在，感受古代文化遗产的伟大</p>
<button class="item-button">查看详情</button>
</div>
</li>
</ul>
</div>
样式：
@import "~styles/minxins.styl"
.title
margin-top: .2rem
line-height: .8rem
background: #eee
text-indent: .2rem
.item
overflow: hidden
display: flex
height: 1.9rem
// background :red
.item-img
width: 1.7rem
height: 1.7rem
padding: .1rem
.item-info
flex: 1
padding: .1rem
min-width: 0
.item-title
line-height: .54rem
font-size: .32rem
ellipsis()
.item-desc
line-height: .4rem
color: #ccc
ellipsis()
.item-button
line-height: .44rem
margin-top: .16rem
background: #ff9300
padding: 0 .2rem
border-radius: .06rem
color: #fff
4.周末游组件开发Weekend.vue
页面布局：
<div>
<div class="title">
周末去哪儿
</div>
<ul>
<li class="item border-bottom" v-for="item of recommendList" :key="item.id">
<div class="item-img-wrapper">
<img class="item-img" :src="item.imgUrl" />
</div>
<div class="item-info">
<p class="item-title">{
{ item.title }}</p>
<p class="item-desc">{
{ item.desc }}</p>
</div>
</li>
</ul>
</div>样式实现：
@import "~styles/minxins.styl"
.title
line-height: .8rem
background: #eee
text-indent: .2rem
.item-img-wrapper
overflow: hidden
height: 0
padding-bottom: 37.09%
background :#999
.item-img
width: 100%
.item-info
padding: .1rem
.item-title
line-height: .54rem
font-size: .32rem
ellipsis()
.item-desc
line-height: .4rem
color: #ccc
ellipsis()二.城市列表页
1.头部
创建 pages/city/City.vue 在City.vue平级创建目录components目录 然后在里边目录创建CityHeader.vue
CityHeader.vue为City.vue的头部
页面布局：
<div class="header">
城市选择
<router-link to="/">
<div class="iconfont header-back"></div>
</router-link>
</div>
样式实现：
@import '~styles/varibles.styl'
.header
position: relative
overflow: hidden
height: $headerHeight
line-height: $headerHeight
text-align: center
color: #fff
background: $bgColor
font-size: .32rem
.header-back
position: absolute
top: 0
left: 0
width: .64rem
text-align: center
font-size: .4rem
color: #fff2.搜索框
页面布局
创建Search.vue
<div class="search">
<input class="search-input" type="text" placeholder="输入城市名或拼音" />
</div>
样式实现：
@import '~styles/varibles.styl'
.search
height: .72rem
padding: 0 .1rem
background: $bgColor
.search-input
box-sizing: border-box
width: 100%
height: .62rem
padding: 0 .1rem
line-height: .62rem
text-align: center
border-radius: .06rem
color: #6663.城市列表
创建List.vue 是city组件的子组件
List.vue静态布局实现
<div class="list">
<div class="area">
<div class="title border-topbottom">当前城市</div>
<div class="button-list">
<div class="button-wrapper">
<div class="button">北京</div>
</div>
</div>
</div>
<div class="area">
<div class="title border-topbottom">热门城市</div>
<div class="button-list">
<div class="button-wrapper">
<div class="button">北京</div>
</div>
<div class="button-wrapper">
<div class="button">北京</div>
</div>
</div>
</div>
<div class="area">
<div class="title border-topbottom">
A
</div>
<div class="item-list">
<div class="item border-bottom">阿拉尔</div>
<div class="item border-bottom">阿拉尔</div>
<div class="item border-bottom">阿拉尔</div>
<div class="item border-bottom">阿拉尔</div>
<div class="item border-bottom">阿拉尔</div>
</div>
</div>
&l
最低0.47元/天 解锁文章
扫一扫
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
