vue怎么vw布局好用_vue移动端 vw布局配置

参考：

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文件

并增加

window.onload = function () {

window.viewportUnitsBuggyfill.init({

hacks: window.viewportUnitsBuggyfillHacks

});

}

安装：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代码：