vue3+ts+vant移动端H5项目搭建的实现步骤

npm install -g @vue/cli

vue -V

vue ui

npm install vant

import { App } from "vue";
import { Button } from "vant";
const Vant = {
  install: (app: App): void => {
    app.use(Button);
  },
};
export default Vant;

npm i unplugin-vue-components -D

const { defineConfig } = require("@vue/cli-service");
const { VantResolver } = require("unplugin-vue-components/resolvers");
const ComponentsPlugin = require("unplugin-vue-components/webpack");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
});

<template>
  <div class="btn-box">
    <van-button block type="primary">登录</van-button>
    <van-button class="register-btn" block color="#fff">注册</van-button>
  </div>
</template>
<style lang="scss" scoped>
.btn-box {
  padding: 0 20px;
  box-sizing: border-box;
  .register-btn {
    color: rgb(76, 155, 240) !important;
  }
}
</style>

import "amfe-flexible";

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      propList: ["*"],
    },
  },
};