vant ui 在vue中的安装和使用

vant中文github地址：https://github.com/youzan/vant/blob/HEAD/README.zh-CN.md

api：https://youzan.github.io/vant/#/zh-CN/pull-refresh

 

一、安装vant

npm install vant --save-dev

二、第一种方法：全局引入vant的（不推荐使用）

// 在src/main.js进行全局引入
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(vant)

三、第二种方法： 按需引入组件　　

import Button from 'vant/lib/button'
import 'vant/lib/vant-css/base.css'
import 'vant/lib/vant-css/button.css'

四、第三种方法：使用babel-plugin-import    （强烈推荐使用）

    babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

 

npm install babel-plugin-import --save-dev

　　
  　　在.babel中添加配置

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import",{"libraryName":"vant","style":true}]
  ]

　　在vue-cli3中配置如下：在项目中的babel.config.js配置如下：

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

在组件中直接引入vant插件，插件会自动将代码转化为方法二中的按需引入形式

import { Button } from 'vant

　　

五、总结使用

//1.安装babel-plugin-import 
npm install babel-plugin-import --save-dev

//2.在.babel中添加配置
 "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import",{"libraryName":"vant","style":true}]
  ] 

//3.在vue组件中的使用
<template>
  <van-rate v-model="val"></van-rate>     
</template>
<script>
import { Rate } from 'vant' 
export default {
  components: {   
    [Rate.name]: Rate
  },
  data() {
    return {
      val: 5
    }
  }
</script>

结果如图，你可以去看下官网的rate组件件