image

什么是Vant

Vant是有贊前端團(tuán)隊(duì)推出的一款基于Vue的移動(dòng)端UI框架
大白話: 和Bootstrap一樣對(duì)原生的HTML標(biāo)簽進(jìn)行了封裝, 讓我們能夠?qū)Ｗ⒂跇I(yè)務(wù)邏輯而不是UI界面

在使用MintUI的過(guò)程中發(fā)現(xiàn)有很多坑，所以個(gè)人不推薦在移動(dòng)端中使用MintUI
而且有贊是做電商的，Vant有著比MintUI更多的功能組件

Vant的使用

官方文檔

1. 安裝Vant

npm i vant -S

2. 引入組件

• 安裝 babel-plugin-component

npm i babel-plugin-import -D

• 修改babel.config.js配置文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

• 按需引入 Vant 組件

比如我只用到了 Button 和 Switch，那么需要在 main.js 中寫(xiě)入以下內(nèi)容：

import Vue from 'vue'
import App from './App.vue'
// 導(dǎo)入需要的組件
import { Button, Switch } from 'vant'

// 告訴Vue, 需要在項(xiàng)目中使用哪些組件
Vue.use(Button)
Vue.use(Switch)

new Vue({
  render: h => h(App)
}).$mount('#app')

3. 使用組件

在elementUI官方文檔中找到需要的組件，將代碼復(fù)制到需要的地方
例如：我復(fù)制了一段Button按鈕和Switch的代碼到App.vue組件中
App.vue

<template>
    <div id="app">
      <div>
        <van-button type="default">默認(rèn)按鈕</van-button>
        <van-button type="primary">主要按鈕</van-button>
        <van-button type="info">信息按鈕</van-button>
        <van-button type="warning">警告按鈕</van-button>
        <van-button type="danger">危險(xiǎn)按鈕</van-button>
      </div>
      <div>
        <van-switch v-model="checked" />
      </div>
    </div>
</template>

運(yùn)行npm run serve指令后就可以在瀏覽器看到效果了

image