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适配

万般滋味，都是生活。公众号求关注哦!

作者：~小仙女~
原文链接：https://blog.csdn.net/baidu_41604826/article/details/90785949

转载请注明：www.ainoob.cn » vant组件库的全局样式配置