@Vant

1. 安装
更多vant安装方式,请参考 vant官网
yarn add vant
在项目的配置文 package.json 件中可以看到依赖
"dependencies": {
    "vant": "^4.0.8",
    "vue": "^3.2.45"
}
2. 引入
// 1. Import the components you need
import { Button } from 'vant';
// 2. Import the components style
import 'vant/lib/index.css';
createApp(App).use(Button).mount('#app')
3. 使用
<van-button type="primary">Primary</van-button>
tabbar
如何定制图标
使用vant内置图标
更改图标的名字即可
使用iconfont字体图标
使用本地图片
1.在项目assets中准备图片
2.在main.js中引入并使用tabbar
// 1. Import the components you need
import { Tabbar, TabbarItem } from 'vant';
// 2. Import the components style
import 'vant/lib/index.css';
createApp(App).use(Tabbar).use(TabbarItem).mount('#app')
3.script:引入图片资源,并定义slot属性icon的图片资源
import h5 from "../assets/html-5.png"
import unity from "../assets/unity.png"

const active = ref(0);
const icon = {
    active: h5,
    inactive: unity,
};
4.template
<van-tabbar v-model="active" active-color="#f46">
    <van-tabbar-item>
        <span>Menu</span>
        <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
        </template>
    </van-tabbar-item>
    <van-tabbar-item icon="fire" dot>Search</van-tabbar-item>
    <van-tabbar-item icon="setting-o" badge="5">Setting</van-tabbar-item>
</van-tabbar>
使用在线图片资源
使用对应的url即可
const icon = {
    active: url,
    inactive: url,
};