vue解决vant组件样式失效问题 |
您所在的位置:网站首页 › showconfirmdialog参数 › vue解决vant组件样式失效问题 |
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 |