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
