按需引入vant：标签组件有样式，js表达式组件无样式
在使用按需引入vant框架时，遇到了这样的问题：js表达式组件没有样式，而标签组件有样式。
问题分析
引起此问题的原因，是因为在按需引入时，js表达式组件的样式文件没有正确引入。这有两个原因：
- 未使用unplugin-auto-import插件：该插件可以自动导入vant组件的依赖项，包括样式文件。
- 手动导入js表达式组件：手动导入js表达式组件会覆盖自动导入的样式。
解决方案
针对这个问题，有两种解决方案：
-
使用unplugin-auto-import插件
-
步骤 1：安装unplugin-auto-import插件：
npm install -d unplugin-auto-import
-
步骤 2：在vite.config.js中配置插件：
// vite.config.js import autoimport from 'unplugin-auto-import/vite' export default { plugins: [ autoimport({ imports: [ 'vue', 'vue-router', // vant组件导入需要用root样式文件 // 如：vant/es/toast/style ], // 生成runtime文件，生成文件路径可选 // runtime: './auto-imports.generated.ts', }), ], } - 步骤 3：移除手动导入的js表达式组件。
-
-
手动注册和导入样式
- 手动将js表达式组件单独全局注册。
- 手动导入js表达式组件对应的样式文件。
例如：
import { Toast } from 'vant'; import { ImagePreview } from 'vant'; import 'vant/es/toast/style'; import 'vant/es/image-preview/style'; app.use(Toast) app.use(ImagePreview)
