使用vant4+vw创建webapp项目

包来源

自动引入 vue/vue-router/vuex 等api  (ref, toRefs....)

npm i unplugin-auto-import --save-dev

vant按需导入的插件

npm i unplugin-vue-components -D

使用vw布局替换px单位插件

npm i postcss-px-to-viewport --save-dev

完整的 vite.config.js 文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtovw from 'postcss-px-to-viewport'
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  Components({
    resolvers: [VantResolver()],
  }),
  AutoImport({
    imports: ['vue', 'vue-router', 'vuex']
  })
  ],
  css: {
    postcss: {
      plugins: [
        pxtovw({
          viewportWidth: 750,
          unitPrecision: 2,
          exclude: [/node_modules/]
        })
      ]
    }
  }
})