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()] }),],},