Vue3項目中使用vw實現移動端適配

記錄個人在Vue3項目中使用vw實現移動端適配，直接使用Vue官方提供的Vue-cli的構建工具來構建Vue項目。

首先需要全局安裝Vue-cli：

npm install -g vue-cli

安裝完成后，就可以使用它來構建項目：

vue create vw-vant

根據命令提示做相應的操作(以下是我個人的配置)：

Vue CLI v3.11.0
┌───────────────────────────┐
│  Update available: 4.1.1  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)

進入到剛創建的vw-vant:

cd vw-layout

這時，可以看到的項目結構如下:

在vue-cli3中是沒有.postcssrc.js和vue.config.js的，需要自己創建。

創建完成后需要安裝以下插件

 npm install postcss-import
 npm install postcss-url
 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

安裝完成之后可以在package.json中查看是否安裝成功。

完整的.postcssrc.js代碼如下：

module.exports = {
  plugins: {
    "postcss-import": {},
    autoprefixer: {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    'postcss-px-to-viewport': {
      unitToConvert: "px",
      viewportWidth: 375, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
      viewportHeight: 812, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除）
      viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用vw
      fontViewportUnit: "vw",
      selectorBlackList: ['.ig-'],  // <div class="ig-aa"></div> 指定不轉換為視窗單位的類，在該類型名下寫不會轉換為vw，可以無限添加,建議定義一至兩個通用的類名
      minPixelValue: 1, // 小于或等于`1px`不轉換為視窗單位，你也可以設置為你想要的值
      mediaQuery: false, // 允許在媒體查詢中轉換`px`
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },
    'postcss-viewport-units': {
      filterRule: rule => rule.selector.includes('::after') && rule.selector.includes('::before')
    },
    "cssnano": {
      "cssnano-preset-advanced": {
        zindex: false,
        autoprefixer: false
      },
    }
  }
}

vw兼容方案

我這里使用viewport的polyfill：Viewport Units Buggyfill。

如何使用viewport-units-buggyfill？首先找到index.html，在頁面中引入下面的代碼完成了：

<script src="http://g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

結語

以上就是如何在Vue3項目中使用vw實現移動端適配方法，純屬個人總結，如果幫到你那再好不過了。