@Vant

1. 安装

更多 Vant 安装方式，请参考 Vant 官网

npm i 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';

// 3. Use the components
createApp(App).use(Button).mount('#app')

使用所有组件 - 不要忘记引入样式（系统文档说的比较糙）

import Vant from 'vant';
import 'vant/lib/index.css';
app.use(Vant);

3. 使用

<van-button type="primary">Primary</van-button>

适配

amfe-flexible

自动设置 Rem 基准值 - HTML 的 font-size 字体大小

install

npm i amfe-flexible

import - main.js

import "amfe-flexible";

postcss-pxtorem

将单位 px 转化为 rem - 行内样式单位无效

install

npm install postcss postcss-pxtorem --save-dev

根目录创建文件 postcss.config.js

// postcss.config.js
export default {
  plugins: {
    "postcss-pxtorem": {
      // 设计稿宽度；默认是350px
      rootValue: 37.5,
      // 需要转化的 CSS 属性
      propList: ["*"],
    },
  },
};

重新启动项目

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,
};