前言

一、引入 Vant

1.1 安装 Vant

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

1.2 测试

• 测试：

  <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

  // 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变量

• 语法：@变量名称；
• 使用：

  // 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变量

• 语法：$变量名称；
• 使用：

  $width: 5em;
  
  #main {
      width: $width;
  }
  

  • 变量 支持 块级作用域，嵌套规则内 定义的变量 只能在 嵌套规则内 使用（局部变量），不在嵌套规则内定义的变量 则 可在任何地方使用（全局变量）。将 局部变量 转换为 全局变量 可以添加 !global 声明：

    #main {
        $width: 10em !global;
        width: $width;
    }
    
    #sidebar {
        width: $width;
    }
    

• 语法;
  • $ 是必须的；

3.3 css变量

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

  /* 全局变量 */
  /* 可以在全局（任何选择器中）使用 */
  .root {
      --main-color: #069;
  }
  
  /* 局部变量 */
  /* 只能是 `.footer` 下面的元素才能使用 */
  .footer {
      --footer-color: #f40;
  }
  
  /* 使用变量 */
  a {
      color: var(--main-color);
  }
  

3.4 主题定制

• 新建 src/styles/main.scss 文件;
• 定义全局变量：

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

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