vant组件库的全局样式配置
官方地址:https://youzan.github.io/vant/使用vant时全局样式配置问题前提:使用vue-cli搭建了项目,想结合vant组件库练习,发现跟着官网操作出现了一点问题:官方推荐的是按需引入所需要的组件,使用方式如下:首先安装babel-plugin-import,然后在.babelrc文件中添加配置后如下:之后在main.js中添加import Vant...
官方地址:https://youzan.github.io/vant/
使用vant时全局样式配置问题
前提:
使用vue-cli搭建了项目,想结合vant组件库练习,发现跟着官网操作出现了一点问题:
官方推荐的是按需引入所需要的组件,使用方式如下:
首先安装babel-plugin-import
,然后在.babelrc
文件中添加配置后如下:
之后在main.js
中添加
import Vant from 'vant';
Vue.use(Vant)
之后便会有报错:Vant is not defined
解决:
在main.js
中做如下操作(后续需要什么组件都要放进来):
import {Button} from 'vant';
Vue.use(Button)
如此:在需要的页面中就可以直接使用,页面当中也无需再次引入
注意:(此方式也可以在页面中使用,如果单独在页面中使用,则main.js中不用做其他操作)
如果使用多个组件则需要分别引入、并且单个注册,像这样:
import { Button,Cell, CellGroup } from 'vant';
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup);
真心麻烦,这样比较下来,感觉全部引入也没有多大问题,像下边这样
PS.按照官方的一次性导入所有组件以及样式:
只需要在main.js
中做如下操作:
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
之后在页面中直接使用就可以了(这种方法也不用做任何配置,方便)
vue@cli3初始化项目地址:https://github.com/fairy66/vue3-originItem.git 引入了vant,rem适配
万般滋味,都是生活。公众号求关注哦!
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)