仿美团界面之day01

实训项目day01

1、移动端响应式
- 1.1 响应式尺寸
- 1.2、解决方案
2、项目搭建
- 2.1、初始化项目
- 2.2、处理rem
- 2.3、搭建路由
- 2.4、处理静态图片
- 2.5、编写css样式
3、轮播插件
4、favicon制作

1、移动端响应式

1.1 响应式尺寸

移动端屏幕的尺寸是特别多的，所以不可能像pc端那样，将尺寸固定死。移动端开发的时候，尺寸是不建议写死单位的，如固定值为多少px，因为多少px无论在哪种设备上面都是一样的效果，所以大小尺寸不同的设备给用户的界面效果是不一样的！
希望有一种单位可以实现屏幕尺寸的一个动态变化！

1.2、解决方案

rem单位是一种解决方案。

视口问题

<!-- 移动端，响应式开发必须具备的！ -->
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

rem思路
- rem是一个相对单位！ 1rem 的大小等于 html标签的font-size大小！默认html标签的font-size是16px. 也就是说 1rem 默认等于 16px
- 默认
```
html{ font-size:16px /*默认*/ }
.box{width:10rem;    /* 160px */height:10rem;
}
```
- 修改
```
html{ font-size:20px /*默认*/ }
.box{width:10rem;    /* 200px */height:10rem;
}
```
- 如果说我们网页里面的所有单位都使用了rem去实现，也就是说所有的尺寸大小都依赖于html标签的font-size大小，我们可以通过js去实现控制在不同屏幕尺寸下面去修改html标签的font-size大小！这样就可以实现不同屏幕下所有页面内容的大小动态变化。
如何实现rem的变化！
- UI设计师在设计移动端的，宽度是以 375位尺寸（iPhoneX），高度是根据内容决定的。设计师新建的画布是 750px的。因为设计师设计移动端的时候一般都是2倍图！
默认rem是设计为多少呢？
- 1rem = 100px 呢？？？
- 目的：为了换算容易！

实现

function setRem() {// iphone6var defaultRem = 100;     // 基准默认rem大小   使用100的原因是想 计算方便！var designWith = 750;    //  基准屏幕设计图尺寸大小// 当前设备信息var screenWidth = window.innerWidth;    // 获取屏幕宽度！//  推出当前设备的rem尺寸大小是多少px//  基准默认rem大小/基准屏幕设计图尺寸大小  =  当前的rem大小/当前屏幕尺寸大小var curRem = window.innerWidth * (defaultRem / designWith);document.getElementsByTagName("html")[0].style = "font-size:" + curRem + "px"
}
setRem();
// 屏幕尺寸发生变化的时候！
window.onresize = setRem

2、项目搭建

2.1、初始化项目

vue init webpack meituan
...
cd meituan   // 进入目录
cnpm i           // 安装依赖
npm run dev  // 启动项目

2.2、处理rem

将rem.js 放在 static目录下面的js目录里面，然后在index.html里面引入
```
 <script src="./static/js/rem.js"></script>
```

修改index.html页面里面的 meta viewport

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

2.3、搭建路由

删除helloWorld.vue 文件
创建pages目录，创建页面文件

路由配置

// router.js 文件
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)// 导入页面组件
import index from "../pages/index"
import user from "../pages/user"
import tuangou from "../pages/tuangou"
import pay from "../pages/pay"
import notfound from "../pages/notfound"var router =  new Router({routes: [{path: '/',meta:{ title:"美团首页" },component: index},{path: '/user',meta: { title: "用户中心" },component: user},{path: '/tuangou/:id',    // 动态路由！meta: { title: "团购详情" },component: tuangou},{path: '/pay',meta: { title: "支付页面" },component: pay},{path: '*',meta: { title: "404页面" },component: notfound}]
})// 路由拦截
router.beforeEach(function(to,from,next){// 设计标题document.title = to.meta.title;next();
})// 暴露路由！
export default router;

2.4、处理静态图片

2.5、编写css样式

方式1：在vue文件里面的style标签里面去书写
方式2：在assets目录下面创建css文件夹，然后在里面创建对应的css文件，然后在.vue的组件里面去引入它
```
/* 引入css */
@import url(../assets/css/index.css);
```

3、轮播插件

vue-awesome-swiper
官网地址：https://www.swiper.com.cn/
Vue版本文档地址：https://github.com/surmon-china/vue-awesome-swiper

使用

安装依赖

npm install swiper vue-awesome-swiper --save

再次启动项目
```
npm run dev
```

在你需要使用轮播的页面做如下操作

引入轮播组件和其样式

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

给组件添加一些配置信息

export default {...components: {Swiper,SwiperSlide},directives: {swiper: directive}
}

复制结构，在需要使用轮播图的地方，复制如下结构

<swiper ref="mySwiper" :options="swiperOptions"><swiper-slide>内容1</swiper-slide><swiper-slide>内容2</swiper-slide><swiper-slide>内容3</swiper-slide><swiper-slide>内容4</swiper-slide><div class="swiper-pagination" slot="pagination"></div>
</swiper>

在组件data中添加上配置选项

data(){return{swiperOptions: {  // 轮播的配置信息pagination: {el: '.swiper-pagination'},// Some Swiper option/callback...}}
}

4、favicon制作

打开 https://tool.lu/favicon/
选择图片，选择生成16*16的 favicon
将生成的favicon.ico文件放在static目录

在index.html中加入下面代码

<link rel="shortcut icon" href="./static/favicon.ico">

仿美团界面之day01相关推荐

CH12-综合项目—仿美团外卖
文章目录目标一.项目分析目标项目概述开发环境模块说明二.效果展示目标店铺界面店铺详情界面店铺详情界面确认清空购物车的对话框菜品详情界面订单界面和支付界面三.服务器数据准备 ...
《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目首先打开在线编辑器地址:https://editor.ivx ...
进云仿美团外卖平台 v1.39源码
简介: 进云仿美团外卖源码是一个进云源生插件,支持多商户+多样化配送费模式+本土外卖平台+支持第三方配送,运行需要进云框架支撑! 特点: 1.多样化配送费模式: 2.板块-绑定商户分类机制: 3.板块 ...
android用户界面之AlarmManager教程实例汇
qianqianlianmeng android用户界面之AlarmManager教程实例汇 AlarmManager使用教程 1. 如何利用AlarmManager机制在一定时间后启动某Activi ...
android高仿美团筛选控件,Android高仿美团首页分类按钮
惯例,先上GIF 栗子.gif更新v1.1版本 2017-6-2 11:55:30 详见github 一.使用姿势 1.引入(使用Gradle或者Maven) 1)Gradleallprojects ...
《仿大众点评仿美团做一个评价网站——Java SSM》项目研发阶段性总结
<仿大众点评仿美团做一个评价网站--Java SSM>项目研发阶段性总结一.后台功能实现 (一).注册商家 (二).登录商家中心 (三).商家登录后台操作模块 (1).用户管理模块 (1 ...
《仿美团》项目研发总结
<仿美团>项目研发总结作者:吴育清本次任务完成时间:2018年6月3日-2019年7月1日开发工具与关键技术:MyEclipse + MySQL + javabean + servl ...

仿美团界面之day01

实训项目day01

1、移动端响应式

1.1 响应式尺寸

1.2、解决方案

2、项目搭建

2.1、初始化项目

2.2、处理rem

2.3、搭建路由

2.4、处理静态图片

2.5、编写css样式

3、轮播插件

4、favicon制作

仿美团界面之day01相关推荐

最新文章

热门文章