一、项目代码初始化

1.打开index.html将<meta></meta>标签补充完整

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0，minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>tourism_website</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>//将<meta>标签补充完善，页面比例1：1

2.引入asset.css（重置样式样式表）文件：

把不同手机的初始化设置进行统一

步骤：在src目录下 asset目录下建一个style的文件夹，将asset.css放入其中---->在项目入口文件main.js中引入该样式表

import './assets/style/reset.css'

3.引入border.css（）：

解决移动端1像素边框问题，解决多倍屏当中1像素边框变成多像素边框，需要引入一个1像素边框的解决方案。

import './assets/style/border.css'

4.解决移动端300毫秒点击延迟的问题

在某些机型上或者某些浏览器开发时，使用Click事件会延迟300毫秒才会执行，会影响项目体验效果。

解决方案：在项目中安装一个第三方模块fastclick

npm install fastclick --save
// 把fastclick这个包安装到项目依赖中，--save表示不管在开发环境中或者打包在线上环境中，代码都需要使用fastclick

安装过程中windows会提示出现警告，不过不影响使用可以先不用管。安装完成后，需要在main.js进行引入

import fastClick from 'fastclick'

引入后即可使用fastClick下面的方法解决300毫秒点击延迟问题

fastClick.attach(document.body)

二、iconfont（阿里巴巴矢量图标库）

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。

进入Iconfont官网进行注册，进入项目管理。创建项目填写相关信息会看到下面的样子。

三、项目首页-header区域开发

1.使用stylus插件

Stylus是一款能改变网站样式的样式管理器，该插件主要能将他人提供的网页样式或自己编写的样式安装在网页中，在不改变网页整体布局的情况下将其变成使用者需要的样子。在安装了该插件后，使用者可以在插件提供的网站上下载其他网站的样式进行安装，也可以自己编写一些样式代码来调整网页，若是这些样式在安装后出现了一些问题，还可以直接通过插件的选项窗口来管理或一键禁用这些样式。

$ npm install stylus --save
$ npm install stylus-loader --save

2.页面组件化：将一个复杂的页面拆分成一个个小组件

对于home（主页）这个页面来说，Home.vue对应的是最外层的容器组件，它可以被拆分成小组件由它来帮助我们整合成一个页面。我们把拆分出来的每一部分小组件放到components目录下。例如：本项目将主页拆成HomeHeader(header区域)等组件

这里需要考虑一个问题Q：如何在Home组件中使用HomeHeader组件呢？

A：在Home组件下引入HomeHeader，并在输出中声明子组件

<template><div><home-header></home-header>  //3.子组件的使用（Vue中子组件的使用会自动转换成小写字母）</div>
</template><script>import HomeHeader from './components/Header'   //1.引入子组件
export default{name: 'Home',components:{     //2.声明子组件HomeHeader}
}
</script><style>
</style>

拆分完毕后，可以针对于每个子组件调整样式。

PS:设计样式中常见的几个问题：

1. 移动端高度、宽度等都使用rem为单位，而设计图中给出的都是2倍屏的px为单位。注意进制转换：1 rem = html font-size = 50 px

2.在style中进行样式设置时，为了防止该组件的样式对其他样式产生影响，需要使用scoped关键字进行限制

<template><div class="header"><div class="header-left"></div><div class="header-input"></div><div class="header-right"></div></div>
</template><script>
export default{name: 'HomeHeader'
}
</script><style lang="stylus" scoped="scoped">  // scoped关键字进行限制 只对当前组件有效
.headerheight: .86rem
</style>

3.在stylus中使用变量

在src -->assets-->style-->创建一个文件varibles.styl（全局变量的文件）该文件可写入一些全局变量的定义

然后在子组件Header样式中引入该全局变量（便于调整全局颜色修改，提高了项目可维护性）

注意：

1.在样式中引入样式需要加上@符号

2.由于src目录可以用@符号代替，但在样式中引用src路径，前面需要加上~

//两种引入全局变量的写法@import '../../../assets/style/varibles.styl'   
//@import '~@/assets/style/varibles.styl'

3.给不同目录起别名（例如：scr目录就可以用@符号代替）

打开 build -->webpack.base.config.js

resolve下面的别名项alias可以用来起别名

resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'style': resolve('src/assets/styles'),   //给src/assets/styles起别名为style}},

四、首页轮播图

1.制作轮播图需要使用vue-awesome-swiper

可在gitup官网上找到vue-awesome-swiper进行安装，引用，创造实例等。

//安装
npm install vue-awesome-swiper@2.6.7 --save
//全局main.js中引入该组件
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
//使用插件
Vue.use(VueAwesomeSwiper,//参数)

2.创建Swiper.vue

<template><div class="wrapper"><!-- <swiper :options="swiperOption" > -->//在Gitup上粘贴SPA模板中的代码写入Swiper.vue<swiper><!-- slides --><swiper-slide>I'm Slide 1</swiper-slide><swiper-slide>I'm Slide 2</swiper-slide><swiper-slide>I'm Slide 3</swiper-slide><swiper-slide>I'm Slide 4</swiper-slide><swiper-slide>I'm Slide 5</swiper-slide><swiper-slide>I'm Slide 6</swiper-slide><swiper-slide>I'm Slide 7</swiper-slide><!-- Optional controls --><div class="swiper-pagination"  slot="pagination"></div>  //用于显示分页的小点<div class="swiper-button-prev" slot="button-prev"></div> //用于显示轮播左侧按钮<div class="swiper-button-next" slot="button-next"></div> //用于显示轮播右侧按钮<div class="swiper-scrollbar"   slot="scrollbar"></div>   //用于显示分页进度条</swiper></div>
</template><script>
export default{name: 'HomeSwiper',data () {return {swiperOption: {pagination: '.swiper-pagination'   //传递具体的class用于显示具体是几个轮播}}}
}
</script><style lang="stylus" scoped="scoped"></style>

3.注意的问题

（1）使用循环实现图片的轮播

<swiper :options="swiperOption"><swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" :src="item.imgUrl" />
</swiper-slide><script>
export default{name: 'HomeSwiper',data () {return {swiperOption: {pagination: '.swiper-pagination'},swiperList: [{id: '0001',imgUrl: '../../../assets/style/img/轮播素材1.png'}, {id: '0002',imgUrl: '../../../assets/style/img/轮播素材2.png'}]}}
}
</script>

Swiper.vue完整代码

<template><div class="wrapper"><swiper :options="swiperOption"><swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" :src="item.imgUrl" /></swiper-slide><div class="swiper-pagination"  slot="pagination"></div><!-- <div class="swiper-button-prev" slot="button-prev"></div> //控制左右箭头<div class="swiper-button-next" slot="button-next"></div><div class="swiper-scrollbar"   slot="scrollbar"></div>  //设置滚动条 --></swiper></div>
</template>
<script>
export default{name: 'HomeSwiper',data () {return {swiperOption: {pagination: '.swiper-pagination',loop: true},swiperList: [{id: '0001',imgUrl: '../../../assets/style/img/轮播素材1.png'}, {id: '0002',imgUrl: '../../../assets/style/img/轮播素材2.png'}]}}
}
</script>
<style lang="stylus" scoped="scoped">
.swiper-imgwidth: 100%
</style>

五、图标区域

1.图标区域页面布局

新建Icons.vue

<template><div class="icons"><swiper><swiper-slide><div class="icon"><div class="icon-img"><img class="icon-img-content" src="../../../../build/logo.png"></div><p class="icon-desc">热门景点</p></div></swiper-slide><swiper-slide><div class="icon"><div class="icon-img"><img class="icon-img-content" src="../../../../build/logo.png"></div><p class="icon-desc">热门景点</p></div></swiper-slide></swiper></div></template>
<script>
export default{name: 'HomeIcons'
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/style/varibles.styl'
.icons >>> .swiper-containeroverflow: hiddenheight: 0padding-bottom: 50%
.iconposition: relativeoverflow: hiddenfloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darkTextColor
</style>

varibled.styl

$bgColor = #00bcd4
$darkTextColor = #333

2.图标区域逻辑实现

‘

<template><div class="icons"><swiper><swiper-slide><div class="icon" v-for="item of iconList" :key="item.id"><div class="icon-img"><img class="icon-img-content" src='https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png'></div><p class="icon-desc">{{item.desc}}</p></div></swiper-slide></swiper></div>
</template>
<script>
export default{name: 'HomeIcons',data () {return {iconList: [{id: '0001',imgUrl: 'https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png',desc: '热门景点'}, {id: '0002',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '汽车票'}, {id: '0003',imgUrl: 'https://picbed.qunarzz.com/ae617a31e0bd5803d76918b817f6d942.png',desc: '自由行'}, {id: '0004',imgUrl: 'https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png',desc: '海外酒店'}, {id: '0005',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '汽车票'}, {id: '0006',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '汽车票'}, {id: '0007',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '汽车票'}, {id: '0008',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '汽车票'}, {id: '0009',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '汽车票'}]}}
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/style/varibles.styl'
.icons >>> .swiper-containeroverflow: hiddenheight: 0padding-bottom: 50%
.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darkTextColor
</style>

<template><div class="icons"><swiper><swiper-slide><div class="icon" v-for="item of 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></swiper></div></template>
<script>
export default{name: 'HomeIcons',data () {return {iconList: [{id: '0001',imgUrl: 'https://imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',desc: '景点门票'}, {id: '0002',imgUrl: 'https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png',desc: '热门景点'}, {id: '0003',imgUrl: 'https://picbed.qunarzz.com/ae617a31e0bd5803d76918b817f6d942.png',desc: '汽车船票'}, {id: '0004',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '海外酒店'}, {id: '0005',imgUrl: 'https://imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',desc: '景点门票'}, {id: '0006',imgUrl: 'https://imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',desc: '景点门票'}, {id: '0007',imgUrl: 'https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png',desc: '热门景点'}, {id: '0008',imgUrl: 'https://picbed.qunarzz.com/ae617a31e0bd5803d76918b817f6d942.png',desc: '自由行'}, {id: '0009',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '海外酒店'}, {id: '0010',imgUrl: 'https://imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',desc: '景点门票'}]}}
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/style/varibles.styl'
.icons >>> .swiper-containeroverflow: hiddenheight: 0padding-bottom: 50%
.iconposition: relativeoverflow: hiddenfloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darkTextColor
</style>

实现多页切换

<template><div class="icons"><swiper><swiper-slide v-for="(page, index) of pages" :key="index"><div class="icon" v-for="item of page" :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></swiper></div></template>
<script>
export default{name: 'HomeIcons',data () {return {iconList: [{id: '0001',imgUrl: 'https://imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',desc: '景点门票'}, {id: '0002',imgUrl: 'https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png',desc: '热门景点'}, {id: '0003',imgUrl: 'https://picbed.qunarzz.com/ae617a31e0bd5803d76918b817f6d942.png',desc: '汽车船票'}, {id: '0004',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '海外酒店'}, {id: '0005',imgUrl: 'https://imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',desc: '景点门票'}, {id: '0006',imgUrl: 'https://imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',desc: '景点门票'}, {id: '0007',imgUrl: 'https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png',desc: '热门景点'}, {id: '0008',imgUrl: 'https://picbed.qunarzz.com/ae617a31e0bd5803d76918b817f6d942.png',desc: '自由行'}, {id: '0009',imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',desc: '海外酒店'}, {id: '0010',imgUrl: 'https://imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg',desc: '景点门票'}]}},computed: {pages () {const pages = []this.iconList.forEach((item, index) => {const page = Math.floor(index / 8)if (!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}}
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/style/varibles.styl'
.icons >>> .swiper-containeroverflow: hiddenheight: 0padding-bottom: 50%
.iconposition: relativeoverflow: hiddenfloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darkTextColor
</style>

ps:汉字太长显示' ... '使用到的CSS样式

overflow :hidden
white-space :nowrap
text-overflow :ellipsis
//可以使用stylus封装

移动端网页开发（一）

一、项目代码初始化

1.打开index.html将<meta></meta>标签补充完整

2.引入asset.css（重置样式样式表）文件：

3.引入border.css（）：

4.解决移动端300毫秒点击延迟的问题

二、iconfont（阿里巴巴矢量图标库）

三、项目首页-header区域开发

1.使用stylus插件

2.页面组件化：将一个复杂的页面拆分成一个个小组件

PS:设计样式中常见的几个问题：

3.在stylus中使用变量

四、首页轮播图

五、图标区域

1.图标区域页面布局

相关文章

web移动开发

移动端页面开发

从零开始学习移动端Web开发

移动端网站开发

移动端开发

web前端开发之移动端基础

前端移动端web开发（一）

移动端Web开发基础知识

（一）移动端 Web 开发基础

移动端web开发

Web前端开发移动端开发（快速入门）

移动端web开发笔记（一）

移动web开发

方法重载与重写的区别

C#重载与重写的区别

重载和重写的区别总结

Java之重载重写的区别

java中方法重载和重写的区别

重载和重写的区别（详解）

java中重载与重写的区别