前情提要

正式做前端工作已经有几年时间了，也换过几家公司，基本的状态是到岗后在公司已有项目的基础上去迭代功能，最近的几个项目经历从0开始构建的项目基本都是微信小程序，很少有从0开始构建项目的经历（移动端）。

由于上家单位创业受挫，故...年底被迫找工作，运气还不错，算是无缝衔接😄，现单位正好有个移动端项目需要从0搭建，故有此篇记录，仅做记录总结，大佬请绕行... 【此篇文章不会一次写完整个项目的过程，因为项目还没写完...每做一个阶段有值得记录的地方会随时更新】

前期准备

框架上选择了vue，理由很简单，不会react😂

新公司还在试用期要表现的手脚麻利，面试的时候提到的一些前端工程化理论全都靠边站，直接vue-cli构建项目

npm install -g @vue/cli
vue create myApp

默认配置就好，模板下载完项目就可以跑起来了！

因为缺少独立移动端web从0构建的经验，所以第一个纠结点在整个项目的适配方案选择上...

移动端项目适配方案选择

1.手动在index插入js代码进行rem...不不不，太原始了

2.flexible方案

lib-flexible是淘宝团队总结出来的移动端弹性布局适配方案原理是通过js实时的检测屏幕的大小并改变html标签的字体大小，再结合rem的特性来完成页面的自适应。

npm install lib-flexible --save

项目main.js中引用import 'lib-flexible' 接下来把public文件夹中的index.html页面中的meta，name=viewport标签去掉，因为这个标签的作用flexible可以去自动完成。

除font-size外，其它大小都根据750标注稿的尺寸，转换成rem单位的值，转换方法为：标注稿尺寸 / 标注稿基准字体大小；
标注稿基准字体大小 = 标注稿宽度 / 10，如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为375，标注稿基准字体大小为37.5；（所以淘宝这个方案是可以在任意设计稿尺寸下使用的）注意：这里我们假设拿到的标注稿的宽度是750px 标注稿上的每个尺寸都需要手动去除以75px去换算成rem极大的增加了开发的工作量，这里我们借助插件来帮我们自动实现。

安装专门用来自动计算rem的插件npm install postcss-pxtorem --save 在项目目录下的postcss.config.js添加配置代码

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem':{
        //设计稿对应的rem尺寸，此时是iPhone6对应的75px
      rootValue:75,
        //所有元素的px自动转化成rem
      propList:['*']
    }
  },
};

由于viewport单位得到众多浏览器的兼容，上面这种方案现在已经被官方弃用，那我们就看看最近流行的vw,vh

3.vw,vh方案

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

上面的 flexible方案就是模仿这种方案，因为早些时候 vw还没有得到很好的兼容。

vw(Viewport's width)： 1vw等于视觉视口的 1%
vh(Viewport's height) : 1vh 为视觉视口高度的 1%
vmin : vw 和 vh 中的较小值
vmax : 选取 vw 和 vh 中的较大值如果视觉视口为 375px，那么 1vw=3.75px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/3.75=20vw。

这里的比例关系我们也不用自己换算，我们可以使用 PostCSS的 postcss-px-to-viewport 插件帮我们完成这个过程。写代码时，我们只需要根据 UI给的设计图写 px单位即可。great!!真方便～

npm install postcss-px-to-viewport --save-dev

vue-cli创建的项目可能没有postcss.config.js,没有的话在项目根目录新建即可，配置如下，其它具体配置项参见

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false,     // 允许在媒体查询中转换`px`
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
    }
  }
}

tips:

@keyframes 和media查询里的px默认是不转化的，设置mediaQuery： true则媒体查询里也会转换px
@keyframes可以暂时手动填写vw单位的转化结果

今天先到这了，接着干活....2020.12.9 22:36

从0搭建vue移动端项目【笔记】