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組件件