1. 在项目根目录的postcss.config.js文件中增加配置项

  • postcss.config.js全部内容

    1. //https://github.com/michael-ciniawsky/postcss-load-config
    2. // module.exports = {
    3. //      plugins: {
    4. //          autoprefixer: {}
    5. //      }
    6. // }
    7. module.exports = {
    8. "plugins": {
    9.   "postcss-import": {},
    10.   "postcss-url": {},
    11.   "postcss-aspect-ratio-mini": {}, 
    12.     "postcss-write-svg": {
    13.       utf8: false
    14.     },
    15.     "postcss-cssnext": {},
    16.     "postcss-px-to-viewport": {
    17.       viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
    18.       viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
    19.       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
    20.       viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
    21.       selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
    22.       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
    23.       mediaQuery: false // 允许在媒体查询中转换`px` 
    24.     }, 
    25.     "postcss-viewport-units":{},
    26.     "cssnano": {
    27.       preset: "advanced",
    28.       autoprefixer: false,
    29.       "postcss-zindex": false
    30.     },
    31. }
    32. }

    2. 使用npm下载相关包

    1. yarn add cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport postcss-viewport-units postcss-write-svg 
    2. yarn add cssnano-preset-advanced 
    3. yarn add postcss-import postcss-url autoprefixer

    3. 在public/index.html引入js插件并使用该插件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
    7.   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    8.   <title>vuecli3vw</title>
    9. </head>
    10. <body>
    11.   <noscript>
    12.     <strong>We're sorry but vuecli3vw doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    13.   </noscript>
    14.   <div id="app"></div>
    15.   <!-- built files will be auto injected -->
    17.   //引入下面这段
    18.   <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>
    19.   <script>
    20.     window.onload = function () {
    21.       window.viewportUnitsBuggyfill.init({
    22.         hacks: window.viewportUnitsBuggyfillHacks
    23.       });
    24.     }
    25.   </script>
    26. </body>
    27. </html>

    4. 在App.vue组件中尝试使用vw布局

    1. <template>
    2. <div id="app">
    3.   <div class='box'>
    4.     使用 vw 布局 
    5.   </div>
    6.   <div id="nav">
    7.     <router-link to="/">Home</router-link> |
    8.     <router-link to="/about">About</router-link>
    9.   </div>
    10.   <router-view/>
    11. </div>
    12. </template>
    13. <style>
    14. html,body{
    15. margin: 0;
    16. padding: 0;
    17. }
    18. .box{
    19. width: 750px;     //测试是否转换为vm
    20. height: 1000px;
    21. background-color: #ccc;
    22. color: darkred;
    23. font-size: 40px;
    24. }
    25. #app {
    26. font-family: 'Avenir', Helvetica, Arial, sans-serif;
    27. -webkit-font-smoothing: antialiased;
    28. -moz-osx-font-smoothing: grayscale;
    29. text-align: center;
    30. color: #2c3e50;
    31. }
    32. </style>

    5. 运行项目,验证是否成功

    1. npm run serve     //yarn serve

  • 查看.box的css px是否成功转为vw

  • 如果成功转为vw,恭喜你成功啦!

    Project setup

    1. npm install

    Compiles and hot-reloads for development

    1. npm run serve

    Compiles and minifies for production

    1. npm run build