按需引入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表达式组件没有样式，标签组件却有？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！