vue cli3 适配

安装插件

yarn add lib-flexible-computer -S // 根节点会根据页面视口变化而变化font-size大小，行内样式不兼容
lib-flexible 只是针对屏幕540以下的，然后还要到flexible.js文件下面手动修改，字体大小也不会变。略显麻烦
yarn add px2rem-loader -D // 自动将px转换为rem (-D 只是装在本地开发环境)
yarn add postcss-px2rem // 将代码中px自动转化成对应的rem的一个插件

引入插件

在main.js文件中引入

import 'lib-flexible-computer' 

修改vue.config.js

在根目录下新建 vue.config.js（或者css下加入）

  css: {
   loaderOptions: {
    css: {},
    postcss: {
     plugins: [
      require('postcss-px2rem')({
       remUnit: 192 // 设计图宽度/10
      })
     ]
    }
   }
  }

image.png

vue cli3中 这个文件都是可选项，默认没有。

vue cli3的特点
1.移除了配置文件目录，config 和 build 文件夹
2.移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
3.在 src 文件夹中新增了 views 文件夹，用于分类视图组件和公共组件