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

前言

• 本文所使用的安装方式为 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 测试

• 测试：

  <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变量名，然后我们对该变量进行重新赋值；

• 你可以在各个组件文档底部的表格中查看组件变量。