按需引入vant：标签组件有样式，js表达式组件无样式

在使用按需引入vant框架时，遇到了这样的问题：js表达式组件没有样式，而标签组件有样式。

问题分析

引起此问题的原因，是因为在按需引入时，js表达式组件的样式文件没有正确引入。这有两个原因：

1. 未使用unplugin-auto-import插件：该插件可以自动导入vant组件的依赖项，包括样式文件。
2. 手动导入js表达式组件：手动导入js表达式组件会覆盖自动导入的样式。

解决方案

针对这个问题，有两种解决方案：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

1. 使用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表达式组件。

2. 手动注册和导入样式

   • 手动将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)