vue 按需引入vant跟全局引入方式_vue.js_

npm i vant -S

npm i vant@next -S

  "dependencies": {     "axios": "^0.21.1",     "core-js": "^2.6.5",     "fastclick": "^1.0.6",     "vant": "^2.12.20",     "vue": "^2.6.10",     "vue-router": "^3.0.3",     "vuex": "^3.0.1"   },

npm i babel-plugin-import -D

// 在.babelrc 中添加配置 // 注意：webpack 1 无需设置 libraryDirectory

{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }

import Vue from 'vue' import { Button } from 'vant'; import { ImagePreview } from 'vant'; import { Image as VanImage } from 'vant'; import { Swipe, SwipeItem } from 'vant'; import { Grid, GridItem } from 'vant'; import { Card } from 'vant'; import { Tag } from 'vant'; import { Icon } from 'vant'; Vue.use(Icon); Vue.use(Tag); Vue.use(Card); Vue.use(Grid); Vue.use(GridItem); Vue.use(Swipe); Vue.use(SwipeItem); Vue.use(VanImage); // 全局注册 Vue.use(ImagePreview); Vue.use(Button) 

import './vant/vant'

信息按钮默认按钮警告按钮危险按钮

import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);

信息按钮默认按钮警告按钮危险按钮