vue中引入vant的使用以及方法

1.element组件库(pc) 是移动端的组件库

2.vant-ui (移动端)

vant的基本使用

    一 .npm i vant

引入所有的

main.js 中

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

然后在所需要的加

<van-button type="primary">主要按钮</van-button>

<van-button type="info">信息按钮</van-button>

<van-button type="warning">警告按钮</van-button>

缺点:增加体积

  二 按需加载 自动按需引入  一般我们是使用按需加载

1) 安装插件npm i babel-plugin-import -D

2)bael.config.js中 加

  plugins: [

    ['import', {

      libraryName: 'vant',

      libraryDirectory: 'es',

      style: true

    }, 'vant']

  ]

3)如果想用button

在main.js中

import { Button } from 'vant';

Vue.use(Button);

提示

Toast的两种方法 局部使用   不好

全局使用

在main.js中

import { Toast} from 'vant';

Vue.use(Toast);

使用 组件中

this.$toast.success("成功")

this.$toast.fail("失败")