Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

实战项目源码【链接：https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提取码：n6ol】

目录

1、移动端响应式

1.1、响应式尺寸

1.2、解决方案

1.2.1、视口问题

1.2.2、rem思路

1.2.3、如何实现rem的变化！

1.2.4、默认rem是设计为多少呢？

1.2.5、实现

2、项目搭建

2.1、初始化项目

2.2、处理rem

2.3、搭建路由

1、移动端响应式

1.1、响应式尺寸

移动端屏幕的尺⼨是特别多的，所以不可能像pc端那样，将尺⼨固定死。移动端开发的时候，尺寸是不建议写死单位的，如：固定值为多少px。因为多少px⽆论在哪种设备上⾯都是⼀样的效果，所以⼤⼩尺⼨不同的设备给⽤户的界⾯效果是不⼀样的！

希望有⼀种单位可以实现屏幕尺⼨的⼀个动态变化！

1.2、解决方案

rem单位是⼀种解决⽅案。

1.2.1、视口问题

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

1.2.2、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⼤⼩！这样就可以实现不同屏幕下所有⻚⾯内容的⼤⼩动态变化。

1.2.3、如何实现rem的变化！

UI设计师在设计移动端的，宽度是以 375位尺⼨（iPhoneX），⾼度是根据内容决定的。

设计师新建的画布是 750px的。因为设计师设计移动端的时候⼀般都是2倍图！

1.2.4、默认rem是设计为多少呢？

1rem = 100px 呢？？？

⽬的：为了换算容易！

1.2.5、实现

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();// 屏幕尺寸发生变化的时候！【onresize 事件会在窗口或框架被调整大小时发生。】
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, maximumscale=1.0,minimum-scale=1.0,user-scalable=0"/>

2.3、搭建路由

1、删除helloWorld.vue ⽂件

2、创建pages⽬录，创建⻚⾯⽂件

3、路由配置

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、处理静态图片

井img文件夹放在static目录下面。

2.5、编写css样式

方式1：在vue文件里面的style标签里面书写。

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

多谢观看~

Vue.js-Day06-AM【项目实战(附带完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】相关推荐

vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
梦幻诛仙linux纯端架设教程,梦幻诛仙一键端搭建iOS安卓双端+完整后台源码+各种工具附带视频架设教程...
游戏说明: 梦幻诛仙一键端搭建iOS安卓双端+完整后台源码+各种工具,视频架设教程在游戏内当前聊天窗口输入 dmmhzxnb ,开启后台. 提示GM后台已开启. 在左上角Press Enter ...
Laravel6.0 + vue.js + elementUI + 微信小程序实现沃尔玛扫码购
本次项目使用 Laravel6.0 + vue.js + elementUI + 微信小程序实现沃尔玛扫码购项目设计-接口本次项目所有接口使用 laravel 框架实现. 项目设计-后台后台开 ...
Android实战项目: 视频资讯APP，源码在文章里免费分享
文章目录一.环境搭建 1.资源下载 2.视频地址 3.项目开发情况二.项目展示 1.首页 2.资讯页面 3.个人中心 4.收藏页面实现三.配置过程详解 1.导入Mysql数据库 2.Mongdb ...
【2022修复版】社群扫码进群活码引流完整运营源码/带视频搭建教程
搭建环境 1.环境Nginx MySQL 5.6 php7.2 php7.2安装扩展fileinfo redis Swoole sg11 服务器需要安装linux的系统, 安装上宝塔,在配置这些环境就 ...
Java实战项目之人力资源管理系统【源码+课后指导】_Java毕业设计/计算机毕业设计
对就业和毕业都有帮助的Java实战项目来咯--人力资源管理系统!Java实战项目之人力资源管理系统[源码+课后指导]_Java毕业设计/计算机毕业设计https://www.bilibili.com/ ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
【JAVA】书店管理系统（附带前后端源码及资源）
[JAVA_Web]书店管理系统(附带前后端源码及资源) 一.项目的目的和意义 1.1目的在"互联网+"的大趋势下,线上销售以其简单.便捷.高效的特点受到人们的青睐.网上书店不受 ...
java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue图书档案管理系统MyBatis+系统+LW文档+源码+调试部署本源码技术栈: ...
mysql src.rpm_从.src.rpm包中提取出完整的源码的方法
1 什么是完整的源码就是说,最初始的源码加上打了所有的patch后的源码,即最新的源码. 2 过程 2.1 从.src.rpm中提取完整的rpm工程文件 2.1.1 rpm to cpio rpm2 ...

Vue.js-Day06-AM【项目实战(附带完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】

1、移动端响应式

1.1、响应式尺寸

1.2、解决方案

1.2.1、视口问题

1.2.2、rem思路

1.2.3、如何实现rem的变化！

1.2.4、默认rem是设计为多少呢？

1.2.5、实现

2、项目搭建

2.1、初始化项目

2.2、处理rem

2.3、搭建路由

2.4、处理静态图片

2.5、编写css样式

Vue.js-Day06-AM【项目实战(附带完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】相关推荐

最新文章

热门文章

Vue.js-Day06-AM【项目实战(附带 完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】

1、移动端响应式

1.1、响应式尺寸

1.2、解决方案

1.2.1、视口问题

1.2.2、rem思路

1.2.3、如何实现rem的变化！

1.2.4、默认rem是设计为多少呢？

1.2.5、实现

2、项目搭建

2.1、初始化项目

2.2、处理rem

2.3、搭建路由

2.4、处理静态图片

2.5、编写css样式

Vue.js-Day06-AM【项目实战(附带 完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】相关推荐

最新文章

热门文章

Vue.js-Day06-AM【项目实战(附带完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】

Vue.js-Day06-AM【项目实战(附带完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】相关推荐