一、什么是webapp
1、长的像app，交互也像app的H5页面。
webapp不是App，不需要安装，手机网页直接打开。
二、移动端web的布局方案
1、例如：rem布局、vw/vh布局、flexible布局。
推荐使用rem布局，解决不同手机之间的样式兼容性问题。
2、原因
手机像素密度不一样，屏幕宽度、屏幕分辨率不一样。
在移动端写样式一般不用px做单位，px是绝对单位，要用相对单位去做。
3、rem.js
// 作用：重置html的font-size大小
// 让html根字体的大小，等于当前屏幕px像素的10分之1function resetRootFZ() {// 1.通过dom操作，找到htmlvar oHtml = document.querySelector('html')// 2.获取这个html的宽度var w = oHtml.getBoundingClientRect().width // px（当前屏幕的总宽度）// 3.设置根字体的大小等于html节点的宽度的十分之一oHtml.style.fontSize = w/10 + 'px'
}// 调用这个方法
resetRootFZ()// 当window窗口尺寸变化时，重新设置根字体的大小
window.addEventListener('resize', function(){// 屏幕发生resize事件，重新设置根字体resetRootFZ
})4、在index.html的<head>引入
<script src="./rem.js"></script>5、比较
（1）类型一
（2）类型二
6、css的单位
（1）rem: root font size
.box {
width: 2rem;
}
宽度是html根字体的两倍。
（2）em: 相对于最近一个父元素的fontSize
（3）px: 绝对单位
（4）vw vh
三、UI稿量尺寸
1、量稿子的单位是px
2、移动端的UI搞，一个轮播图，宽度是750px，高度是352px
3、352px怎么转换成rem
750px对应10rem，352px则是：352*10/750 = 352/75
4、vscode里以后计算用插件“px to rem”
四、移动端组件库
1、ToC项目样式复杂，有设计稿，组件往往很难自己实现，引入第三方开源组件
2、vant-ui2是经典的移动端组件库，PC端不能用
3、安装
yarn add vant@latest-v2
4、按需加载组件
yarn add babel-plugin-import -D
安装成功后记录在package.json中，-D表示加到devDependencies环境需要的包中
dependencies：表示src代码目录中需要的包
devDependencies：表示环境中需要，src中用不到
5、配置按需加载组件
babel.config.js
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],// 支持vant-ui组件的按需加载plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
}
6、按需导入代码
上线打包时，都建议按需求导入。一个一个导入并注册。
// 按需导入
import { Button } from 'vant'
Vue.use(Button)7、本地开发
为了提高开发效率，先一次性注册。
// 本地开发
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)五、分析页面
1、按组件分析页面
搜索框
品类轮播图
商品轮播图
商品列表（懒加载，类似瀑布流，分页查询）
底部tabbar导航
2、外页内页
外页：通过tabbar、或者菜单就能访问到的页面
内页：在菜单上点不到，通过某些交互进去的，比如商品详情
六、代码方式组织
1、在src/components目录下建一个index.js
import JDtabbar from "./tabbar/JDtabbar.vue"export {JDtabbar
}
把所有的公共组件都放在这个目录中，统一的导入、导出：
import { JDtabbar } from '@/components'
