18-Vue-Vant

image

什么是Vant

Vant是有赞前端团队推出的一款基于Vue的移动端UI框架
大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 让我们能够专注于业务逻辑而不是UI界面

在使用MintUI的过程中发现有很多坑，所以个人不推荐在移动端中使用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 中写入以下内容：

import Vue from 'vue'
import App from './App.vue'
// 导入需要的组件
import { Button, Switch } from 'vant'

// 告诉Vue, 需要在项目中使用哪些组件
Vue.use(Button)
Vue.use(Switch)

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

3. 使用组件

在elementUI官方文档中找到需要的组件，将代码复制到需要的地方
例如：我复制了一段Button按钮和Switch的代码到App.vue组件中
App.vue

<template>
    <div id="app">
      <div>
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
      </div>
      <div>
        <van-switch v-model="checked" />
      </div>
    </div>
</template>

运行npm run serve指令后就可以在浏览器看到效果了

image