官网地址
https://youzan.github.io/vant/#/zh-CN/intro
安装Vant
npm install --save vant
安装插件 babel-plugin-import
按需导入
有全部组件导入,有按需导入。更多推荐是按需导入,因为组件库中并不是所有组件都是需要使用的。
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。
npm i babel-plugin-import -D
# vue/cli-3
# 在 babel.config.js
module.exports = {
presets: [
'@vue/app'
],
plugins: [ # 添加的内容
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
使用
<template>
<div class="navbar">
# 组件使用
<van-nav-bar
:title="title"
/>
</div>
</template>
<script>
# 导入需要使用的组件
import { NavBar } from 'vant';
export default{
name: 'navBar',
components:{ # 组件声明
[NavBar.name]:NavBar
},
data() {
return {
title: '全视眼镜商城'
}
},
}
</script>
<style>
# 样式定制
.van-nav-bar{
background: red;
}
.van-nav-bar__title{
color: white;
}
</style>