vue移动端 vw布局配置
参考：
请先阅读大漠写的 vw-layout-in-vue
vue cli 2.x版本：
第一步：Vue cli 2.x安装
npm install -g vue-cli
桥接工具：npm i -g @vue/cli-init
vue init webpack vue-mobile
第二步：安装PostCSS相关插件：
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano --save-dev
npm i cssnano-preset-advanced --save-dev
第三步：修改.postcssrc.js
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
// "autoprefixer": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: 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`
exclude: [/(\/|\\)(node_modules)(\/|\\)/] // 排除目录（重要，若安装第三方库，请加上这个，不然报错）
},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}
第四步：Viewport适配（降级处理，解决兼容问题）
首先，在vue项目index.html引用js文件
<script src="static/viewport-units-buggyfill.min.js"></script>
并增加
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
安装：npm i --save-dev postcss-viewport-units
.postcssrc.js增加
module.exports = {
"plugins": {
"postcss-viewport-units": {},
}
}
使用第三方库：
如mint-ui
安装：npm i mint-ui
main.js中引用
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
.postcssrc.js增加（必须）
"postcss-px-to-viewport": {
exclude: [/(\/|\\)(node_modules)(\/|\\)/] // 排除目录
},
安装sass
npm i node-sass sass-loader --save-dev
样式重置
npm i normalize.css --save-dev
main.js引入：
import 'normalize.css/normalize.css'
Ratio 1px解决方案：
@svg 1px-border {
width: 4px;
height: 4px;
@rect {
fill: transparent;
width: 100%;
height: 100%;
stroke-width: 25%;
stroke: var(--color, black);
}
}
.example {
border: 1px solid transparent;
border-image: svg(1px-border param(--color #00b1ff)) 1 1 1 1 stretch;
}
有需要可查看完整github代码：
