van4局部引入与主题定制

创建一个vite的vue3+ts项目      npm create vite@latest vue-ts-pro -- --template vue-ts

vant4官网：https://vant-contrib.gitee.io/vant/#/zh-CN

手动按需引入组件

1.安装

# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

2.样式 ：main.ts

注意:  不管手动引入还是自动引入都需要在main.ts文件下引入vant样式 import 'vant/lib/index.css'
如果不进行主题定制的话可以不用引入 import './styles/main.scss'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 样式全局使用
import 'vant/lib/index.css'
// 主题定制文件 一定要放到vant的样式后面，这样主题定制修改后的样式就会覆盖原先的样式
import './styles/main.scss'

const app = createApp(App)
app.use(router)
app.mount('#app')

3.组件按需使用：App.vue

<script setup lang="ts">
import { Button as VanButton } from 'vant'
</script>

<template>
  <van-button>按钮</van-button>
</template>

<style scoped></style>

基于插件自动按需引入组件

1.安装插件

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

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

// 通过 pnpm 安装
pnpm add unplugin-vue-components -D

2.配置插件

如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

如果是基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

主题定制

css变量名

:root {
// 在:root中设置的是全局变量
  --main: #999;
}
a {
// 使用全局变量
  color: var(--main)
}

.box{
// 设置局部变量 只能在.box下的样式才能使用 
 --width:200px
}
.box .son{
// 使用局部变量 
 width:var(--width) // 可以使用
}
.box2{
 width:var(--width) // 不可用 没在.box下不能使用这个变量
 color:var(--main) //可以使用，因为--main是全局变量
} 

主题定制  styles/main.scss

:root {
  // 想要修改vant默认按钮的的背景颜色，先定义要修改后的颜色
  --default-background:#ee0a24  // 红色
  // 找到文档下默认按钮的的变量名
  --van-button-default-background:var(--default-background)
}

怎么找vant元素的变量名，这个是官方定义好的，拿button举例

 选中的这个就是vant默认按钮的变量名称,大家找到想要修改的变量放入提前定好的main.scss文件下的:root来定义