【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，接上一篇创建Vue2项目（下）

系列文章目录

这里是创建移动端项目
【Vue】Vue2.x创建项目全程讲解，保姆级教程，手把手教，Vue2怎么创建项目（上）
【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，接上一篇创建Vue2项目（中）
【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，设置axios，utils工具包，vue.fonfig.js配置项 （下）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

先看上一篇

接上一篇创建vue项目的后续

先上图

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建vue2项目

快速入口

请先完成上一篇文章的所有过程，再阅读本篇

二、移动端适配

1.安装插件flexible (适配移动端)

代码如下（示例）：

npm install lib-flexible -S

在这个项目下安装

出现这个表示安装成功了

安装完成之后打开main.js
在main.js中引入

import 'amfe-flexible';

2.安装 postcss-pxtorem (把px转化为rem)

安装这个之后 开发过程中就可以写px了 插件会自动转化为移动端单位rem

如果不安装的话，写px没用，得用专属的rem。

代码如下（示例）：

npm install postcss-pxtorem --save // 默认最新版本

// 推荐下面这个 版本过高会出问题
npm install  postcss-pxtorem@5.1.1  --save

3、配置转化文件

配置postcss-pxtorem，可在vue.config.js、postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：

新建postcss.config.js，与vue.config.js同级

module.exports = {
    plugins: {
      "postcss-pxtorem": {
        // 设计稿 375:37.5
        // 设计稿：750:75
        // Vant 是基于 375
        rootValue: 75,  // ps设计图纸宽度为750px时 就写上面的比例75  设计稿宽度的1/10
        // rootValue根据设计稿宽度除以10进行设置
        propList: ["*"]，
        selectorBlackList: ['van'] // 过滤掉VantUI组件
        /*
          这个*作用是width,height,margin宽高这些属性的适配,单位转换为rem
          都移动端项目了,那肯定全部都要转换
        */
      }
    }
  }
  

4、发现报错

我在步骤一中，引入main.js语句中的amfe-flexible报错了。
没找到，以前好像不报错，也可能是误打误撞安装过了。

npm install --save amfe-flexible

安装好了就没报错了，而且发现页面中的文字已经出现了变化

---

总结

很奇怪，我以前安装的时候，不会出现步骤四里面的报错。

我安装的是lib-flexible，但是我引入的是amfe-flexible，在我之前的项目里是没报错的，而且必须要创建一个配置文件，也就是步骤三。

---

现在，出现了步骤四的报错，当我将步骤四的依赖安装之后。步骤三的postcss.config.js文件好像不起作用了，我注释掉也依旧起了作用。

正常情况下是1、2、3.没有步骤四，不会出现这个报错。
有待研究。
现在起效果的是124，不需要配置文件了。配置文件删或不删都没效果。
只有main.js的那句引入，它真正起了作用。

---

适配移动端项目

忽略上面的删除线文字
总结如下，引入两个依赖包，一个适配移动端，一个转化px。一个配置项，步骤缺一不可。
之前我以为配置项没起作用，是因为我没有自己做测试文字。
如下图

---

2022年9月21日16:01:46更新

selectorBlackList: ['van'] // 过滤掉VantUI组件

当我用这个移动端项目，引入VantUI时，发现因为适配的原因，Vant组件更小了。
在配置文件加上这一行代码

参考文章

参考不过滤Vant和过滤Vant的区别