vue-cli2.x 3.x 实现完美的移动端适配【完美还原设计图UI的方法】

需求：自己经常会用vue脚手架做web移动端开发相关的项目，用了非常多的适配移动端的方法，其中包括有：

• 最原始的百分比流式布局
• 类似bootstrap/element的栅格布局
• css3的媒体查询（@media）+rem单位
• 利用js监听设备宽度动态实现加载不同的css文件
• 淘宝的flexible.js(不得不说淘宝的解决方案不错，但已经被淘宝弃用了)

现在最为流行的适配方案就是今天重点说的方法：通过vue脚手架的postcss的配置利用vw来达到完美还原设计ui图纸的方法。

使用此方法的前提条件：

必须是使用vue-cli脚手架的项目【 node +npm+webpack+vue+vue-cli3.x/vue-cli2.x 】

使用步骤：

1.新建一个Vue脚手架项目

2.开始配置postcss插件

2.1打开 postcss.config.js(cli3.x) || .postcssrc.js(cli2.x)

如果打开的文件里面内容不同的有缺少的话请先使用下面三个命令安装基础插件

npm install  postcss-import
npm install  postcss-url
npm isntall  autoprefixer

//打开之后应该有的默认的插件
module.exports = {
   
   
    "plugins": {
   
   
        "postcss-import": {
   
   },
        "postcss-url": {
   
   },