Vue 中 使用 Vant UI组件

Vue 中 使用 Vant UI轻量组件库

特附官网https://youzan.github.io/vant-weapp/#/button

在Vue中使用vant UI

1.全局引入

第一步先要下载这个组件

 

npm install vant -S

第二步 导入所有组件

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

第三步 在页面中即可直接引入组件

页面代码演示

<template>
  <div>
      <h1>这是页面</h1>
     <van-button type="default">默认按钮</van-button>
     <van-button type="primary">主要按钮</van-button>
     <van-button style="margin-left:20px" loading type="primary" loading-type="spinner" />
  </div>
</template>

 2.局部引入

第一步 按需引用

必须要下载

npm i babel-plugin-import -D

第二步 按需引用

在.babelrc 中添加配置

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

第三步 按需引用

在页面中直接引入组件使用

<template>
  <van-button type="primary">Primary</van-button>
</template>
<script>
  import {Button} from 'vant' 
  export default {
    components: {
      [Button.name]: Button
    }
  }
</script>