特点：
1. 移动端风格： Vant4 的样式设计符合移动端的设计规范，使得应用程序在移动设备上有良好的用户体验。
2. 灵活的定制： Vant4 提供了丰富的主题变量，你可以根据项目需要定制样式，以适应不同的设计需求。
3. 模块化： Vant4 的样式是模块化的，可以根据需要引入单个组件的样式，而不必引入整个样式库。
使用方法：
1. 安装 Vant4：
npm install vant@next
2. 引入样式：
在你的项目中，你可以选择按需引入 Vant4 的样式。例如，在 Vue.js 项目中：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import vant from 'vant';
import 'vant/lib/index.css';
const app = createApp(App);
app.use(vant);
app.mount('#app');
你也可以单独引入某个组件的样式，以减小样式文件的体积：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import 'vant/lib/button/style'; // 引入按钮组件的样式
const app = createApp(App);
app.mount('#app');
3. 主题定制：
如果你希望定制 Vant4 的主题，你可以在项目中引入一个包含定制主题变量的样式文件，然后在 Vant4 的配置中使用这些变量。例如：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import vant from 'vant';
import 'vant/lib/index.css';
import './custom-theme.css'; // 引入自定义主题样式
const app = createApp(App);
app.use(vant);
app.mount('#app');
在 custom-theme.css 中定义你的主题变量：
:root {
--vant-primary-color: #07c160; /* 自定义主题变量 */
}
这只是 Vant4 内置样式的基本用法和一些配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.zyzy.cn/article/detail/5797/Vant