Vue3+vant4+Webpack+yarn项目创建+vant4使用注意明细

vant4使用地址：https://vant-ui.github.io/vant/#/zh-CN/form

1.安装环境

# 创建项目目录
mkdir my-vue-project
cd my-vue-project

# 初始化package.json
yarn init -y

# 安装Vue3
yarn add vue@next

# 安装Vant4
yarn add vant

# 安装Vue Router
yarn add vue-router@4

# 安装Vuex
yarn add vuex@next

# 安装开发依赖
yarn add -D webpack webpack-cli webpack-dev-server vue-loader@next @vue/compiler-sfc css-loader vue-style-loader url-loader file-loader html-webpack-plugin

项目将在 http://localhost:3000 上运行。

项目包放在下面

Lazyload 懒加载 失败原因

自动导入通常只处理组件，不会自动注册指令。Lazyload 是一个 Vue 指令，需要单独注册。

#自动导入代码 
#vite.config.js
const { VantResolver } = require('@vant/auto-import-resolver');
configureWebpack: {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
    plugins: [
      AutoImport({ resolvers: [VantResolver()] }),
      Components({ resolvers: [VantResolver()] }),
    ],
  },