vue解决vant组件样式失效问题

您所在的位置:网站首页 showconfirmdialog参数 vue解决vant组件样式失效问题

vue解决vant组件样式失效问题

#vue解决vant组件样式失效问题| 来源: 网络整理| 查看: 265

vue项目中引入vant组件,若发现vant组件样式失效,通常有以下几种解决方法:

方法一:引入全局样式

  在引入vant组件的地方或者全局引入vant组件所有的样式,引入方法为:在vue引入vant的页面中,添加以下代码:

import 'vant/lib/index.css'

这样可以引入vant全部样式,不过通常我们可以按需引入,如法二,局部引入部分样式即可。

方法二:局部引入样式

  顾名思义,我们需要使用哪个组件,就引入哪个组件样式即可,比如我们只使用按钮组件,则只需要引入按钮样式,如下:

import 'vant/lib/button/style' 方法三:插件自动引入

  babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。第一步需要安装插件:

# 安装插件 npm i babel-plugin-import -D

第二步在***.babelrc***或***babel.config.js***的对应位置添加如下代码,重启之后即可生效。

// 在.babelrc 中添加配置 // 注意:webpack 1 无需设置 libraryDirectory { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } // 对于使用 babel7 的用户,可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3