使用vue3（vite）+vant搭建h5项目

1.创建项目 

npm init vue@latest

2.安装vant

npm i vant

3.配置vite.config.js文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  server:{ //设置启动页面为本机ip
    host:'0.0.0.0',
    port:'8989'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

4.页面适配

4.1 安装 amfe-flexible

npm i amfe-flexible

4.2 main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'amfe-flexible'
import './assets/main.css'

const app = createApp(App)

app.use(router)

app.mount('#app')

4.3安装 postcss-pxtorem

//-D 是 --save-dev 的简写
npm install postcss-pxtorem -D

4.4新建postcss.config.js

//设计尺寸为750 直接使用设计稿的px88
module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*']
    }
  }

5.禁止页面缩放 index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0">

6.启动自动打开浏览器