简单清晰-Vue项目做移动端或者PC端的vw适配（electron）

长话短说。来干什么的？做vm适配！元素尺寸大小需要根据视口大小或者窗口大小变化。这个时候，最方便的是直接写px，工具自动给你转成vm.

1.下载工具

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
npm i cssnano-preset-advanced --save-dev
cnpm i node-sass sass-loader --save-dev
分三轮下载，这里的解释，可以看下
postcss-import 相关配置
主要功有是解决@import引入路径问题。使用这个插件，可以很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url使引入文件变得更轻松。
postcss-url 相关配置
主要用来处理文件，比如图片文件、字体文件等引用路径的处理。
postcss-px-to-viewport 相关配置
主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
postcss-viewport-units 相关配置
主要是给CSS的属性添加content的属性，给vw、vh、vmin和vmax做适配的操作，这是实现vw布局必不可少的一个插件。
postcss-cssnext 相关配置
该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
cssnano 相关配置
主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
postcss-write-svg 相关配置
主要用来处理移动端1px的解决方案
postcss-aspect-ratio-mini 相关配置
主要用来处理元素容器宽高比

2.配置

这里很多人找不到.postcssrc.js文件，我们慢慢看，分三种情况配置
a.有.postcssrc.js文件的（老版本vue可能有）找到在根目录中的.postcssrc.js，对PostCSS插件进行配置。
module.exports = {
“plugins”: {
“postcss-import”: {},
“postcss-url”: {},
// to edit target browsers: use “browserslist” field in package.json
“postcss-write-svg”: {
uft8: false
},
“postcss-cssnext”: {},
“postcss-px-to-viewport”: {
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定px转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: [’.ignore’, ‘.hairlines’], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于1px不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换px
},
“postcss-viewport-units”: {},
“cssnano”: {
preset: “advanced”,
autoprefixer: false, // 和cssnext同样具有autoprefixer，保留一个
“postcss-zindex”: false
}
}
}
b.没有.postcssrc.js文件的，自己建一个配置文件postcss.config.js
module.exports = {
plugins: {
‘postcss-import’: {},
‘postcss-url’: {},
‘postcss-aspect-ratio-mini’: {},
‘postcss-write-svg’: {
utf8: false
},
‘postcss-cssnext’: {},
‘postcss-px-to-viewport’: {
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸
viewportHeight: 1344, // 视窗的高度，移动端一般指定1334，也可以不配置
unitPrecision: 3, // 指定px转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: [’.ignore’, ‘.hairlines’], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于1px不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换px
},
‘postcss-viewport-units’: {},
cssnano: {
preset: ‘default’, // 设置成default将不会启用autoprefixer
‘postcss-zindex’: false
}
}
}
最后，你也可以直接在package.json里配置，内容差不多，注意json格式。

3.兼容第三方ui组件库的问题。

适配要把第三方组件库排除在外，这样不会报错
添加一行 exclude: /(/|\)(node_modules)(/|\)/就可以啦
“postcss-px-to-viewport”: {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: ‘vw’,
selectorBlackList: [’.ignore’, ‘.hairlines’],
minPixelValue: 1,
mediaQuery: false,
exclude: /(/|\)(node_modules)(/|\)/
}
最后，尺寸单位写px，会自动给你转成vm了。