安装
npm i vant -S
【main.js】
import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
【index.html】
<!-- 引入样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.4/lib/index.css"> <!-- 引入组件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@1.4/lib/vant.min.js"></script>
【HelloWorld.vue】
<template> <div class="hello"> <van-row class="m-header"> <van-col span="24"> <van-icon name="arrow-left" class="m-header-icon" />
内容
</van-col> </van-row> </div> </template>
<style scoped> .m-header { height: 50px; line-height: 50px; background: #245fd7; color: #fff; } .m-header-icon { position: absolute; top: 16px; left: 6px; font-size: 18px; } </style>
具体参数查看vant API 【Layout 布局】【Icon 图标】