#### 操作流程:
1.首先如果需要 vm的話,安裝vue時,需要注意的是: 詢問配置 PostCSS 時需要選擇的是 `In dedicated config files` 在專用配置文件中
```
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
```
2.在項目根目錄的`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
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,
"postcss-zindex": false
},
}
}
```
3.使用`npm`下載相關包
`npm i cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport postcss-viewport-units postcss-write-svg -S`
`npm i cssnano-preset-advanced -D
`
`npm i postcss-import postcss-url autoprefixer -D`
4.在`index.html`引入js插件并使用該插件
```
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
```
5.直接使用就可以了