Vue手机端项目新建工程及屏幕适配

一、在idea下新建工程

cmd打开命令控制符 => vue create project_name

选择预设模板 => commonUse（我自己的预设）

idea打开工程，至此，一个空项目搭建完成。

二、为移动端px 自动适配 rem

1、postcss.config.js文件添加：

npm install postcss@8 -D

npm install postcss-pxtorem@5 -D

npm install amfe-flexible@2 -D

npm install autoprefixer@8 -D

2、添加vue.config.js文件

（由于创建工程时，不知名问题，导致工程缺失vue.config.js文件，故创建后手动添加）

3、添加postcss.config.js文件

4、修改.browerslistrc文件

> 1%
last 2 versions
not dead

  （浏览器内核设置，由于浏览器版本太高，无效果显示）

5、创建自己的文件，删除冗余页面（涉及view文件夹、HelloWorld.vue、router下index.js、App.vue）

至此，项目创建并梳理完毕，适配基本完成。

PS：在使用Vant UI库的时候发现，组件样式的高度并不会自动转成rem，故，当出现某个类，不希望它的样式宽或高转rem，可以在添加的postcss.config.js文件中，将该类的名字添加到selectorBlackList[] 中。如：

selectorBlackList: ['vant', 'mu','.myOrderWarp'], // 忽略转换正则匹配项，忽略并保留为px的选择器