按需引入Vant:为什么JS表达式组件没有样式,标签组件却有?

按需引入vant:为什么js表达式组件没有样式,标签组件却有?

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

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

问题分析

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

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

解决方案

针对这个问题,有两种解决方案:

  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)

以上就是按需引入Vant:为什么JS表达式组件没有样式,标签组件却有?的详细内容,更多请关注硕下网其它相关文章!