前言

本文所使用的安装方式为 pnpm，大家依然可以选用npm、yarn等方式，如果大家想使用pnpm的话，可以去看看我的另一篇文章：NodeJS、nvm、npm、yarn、pnpm 的安装和使用；

一、引入 `Vant`

1.1 安装 Vant

安装命令：pnpm add vant
在 main.ts 中导入 vant 样式：
- import 'vant/lib/index.css';
- ❗ 注意：
  - 在导入 vant 样式的时候，需要放在所有 css 的前面（降低优先级），因为我们后面可能会对 vant 的组件的样式进行覆盖；
  - 此处导入全部的vant样式文件，对打包的体积影响很小，同时后面在使用函数形式的组件的时候，我们就不需要手动导入样式了；
更多方式的使用方式大家可以去官网了解更多：Vant4官网-安装及使用；

1.2 测试

测试：

html 复制代码

<script setup lang="ts">
// 此处必须使用大写的 Button，如果使用小写的 button，会与原生标签有冲突
import { Button } from 'vant';

// 想要使用小写的，我们可以在导入 Button 的时候，对 Button 进行重命名
import { Button as VanButton } from 'vant';
</script>

<template>
    <Button type="success">按钮</Button>
    <van-button type="primary">按钮</van-button>
<template>

展示：

二、移动适配

2.1 安装适配插件

安装命令：
- pnpm add postcss-px-to-viewport -D；
- 该插件的作用：
  - 将 px 转换为 vw 单位；

2.2 配置插件

新增配置文件：postcss.config.js

js 复制代码

// eslint-disable-next-line no-undef
module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            // 设备宽度 375 计算 vw 的值
            viewportWidth: 375
        }
    }
};

注意：
- 新增配置文件之后，需要重启服务才能生效；
验证配置是否生效：
- 基于 Button按钮，在浏览器中选中 Button ，查看该按钮的样式，px 是否转成了 vw;
更多种类的移动适配大家可以去官网了解更多：Vant4官网-移动适配；

三、主题定制

Vant-主题定制；
组件库的主题定制，常用的就主要是以下三种方式：

3.1 Less变量

语法：@变量名称；

使用：

less 复制代码

// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
// Usage 
a,
.link { 
    color: @link-color;
}

a:hover {
    color: @link-color-hover;
}

.widget {
    color: #fff; background: @link-color;
}

注意：
- @ 是必须的；

3.2 Scss变量

语法：$变量名称；
使用：
scss 复制代码
```
$width: 5em;

#main {
    width: $width;
}
```
- 变量支持 块级作用域 ，嵌套规则内 定义的变量 只能在 嵌套规则内 使用（局部变量 ），不在嵌套规则内定义的变量 则 可在任何地方使用 （全局变量 ）。将 局部变量 转换为 全局变量 可以添加 !global 声明：
  scss 复制代码
```
#main {
    $width: 10em !global;
    width: $width;
}

#sidebar {
    width: $width;
}
```
语法 ;
- $ 是必须的；

3.3 css变量

语法：--变量名称；
- 使用：var(--变量名称)
- 注意：
  - -- 是必须的；

代码展示：

css 复制代码

/* 全局变量 */
/* 可以在全局（任何选择器中）使用 */
.root {
    --main-color: #069;
}

/* 局部变量 */
/* 只能是 `.footer` 下面的元素才能使用 */
.footer {
    --footer-color: #f40;
}

/* 使用变量 */
a {
    color: var(--main-color);
}

3.4 主题定制

新建 src/styles/main.scss 文件;

定义全局变量：

scss 复制代码

:root {
    --变量名称: 变量值;
    ...
    /* 有时候我们可能需要对 Vant 的样式进行覆盖，我们可以使用以下的方式 */
    /* 示例：对 主要按钮 的样式 进行覆盖 */
    --van-primary-color: var(--cp-primary);
}

我们在进行样式覆盖的时候，首先需要知道，Vant对某个元素的定义的css变量名，然后我们对该变量进行重新赋值；
你可以在各个组件文档底部的表格中查看组件变量。

Vant4使用总结 - 基础篇 - 【引入 Vant + 移动端适配 + 主题定制】（配合TS使用）

前言

一、引入 Vant

1.1 安装 Vant

1.2 测试

二、移动适配

2.1 安装适配插件

2.2 配置插件

三、主题定制

3.1 Less变量

3.2 Scss变量

3.3 css变量

3.4 主题定制

一、引入 `Vant`