vue3+ts+setup系列之vant配置

一、安装vant依赖

# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant
复制代码

二、引入vant样式

// main.ts
import 'vant/lib/index.css'
复制代码

三、安装按需导入依赖

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D
复制代码

四、按需导入配置（vant、elementPlus、自定义组件等）

// vite.config.ts

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 按需导入插件，其也会自动导入vue中我们自己定义的组件，即可以省略import xxx from '@/components/xxx.vue'
import Components from 'unplugin-vue-components/vite'
/**
 * @description 引入 解析器，可以解析 .vue 文件中用到 vant、element 的组件，实现 vant、element 按需导入
 * @param ElementPlusResolver 饿了么的解析器
 * @param VantResolver vant的解析器
 * @param 其他解析器，如ant design
 */

import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [
    vue(),
    // 按需导入配置
    Components({
      // 是否给组件自动生成类型声明文件 .d.ts，因 vant 已经做好文件声明了
      dts: false,
      // importStyle 是否引入样式，目前已在全局引入了
      resolvers: [VantResolver({ importStyle: false })]
    })
  ],
  resolve: {
    // 路径别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 配置全局sass变量注入
        additionalData: '@import "@/styles/variable.scss";'
      }
    }
  }
})
复制代码

五、在vue文件中使用

<template>
  <div>
    <van-button type="primary">测试</van-button>
  </div>
</template>

<style scoped lang="scss">

</style>
复制代码

六、vant主题变量定制

1）定义scss变量

// main.scss

:root {
    // 主题颜色
    --base-theme-color:red;
    // 基础字体颜色
    --base-font-color:red;
    // 基础背景色
    --base-bg-color:red;
    // 基础边框颜色
    --base-border-color:red;
  
    /*
    * vant 组件样式覆盖（官方提供的样式变量）
    */
    --van-primary-color: var(--base-theme-color); // primary颜色，即vant样式会被覆盖
}
复制代码

2）引入scss变量

// main.ts

// 注意引入顺序，先引入vant样式，再引入覆盖样式，避免样式失效

// 引入vant样式
import 'vant/lib/index.css'

// 引入全局样式
import './styles/main.scss'
复制代码

3）其他主题变量

// Color Palette 
--van-black: #000;
--van-white: #fff;
--van-gray-1: #f7f8fa;

// Gradient Colors 
--van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors 
--van-primary-color: var(--van-blue);
--van-success-color: var(--van-green);
--van-danger-color: var(--van-red);
复制代码

更多变量请参考vant官方提供的主题变量

作者：angelCopy
链接：https://juejin.cn/post/7194320892355641400
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。