1.3vant组件库的安装步骤

(adsbygoogle = window.adsbygoogle || []).push({});

安装 vant

• 打开 vant 官网

vant官网地址

我这里是通过 pnpm 安装的

# 添加 vant 包
pnpm add vant

引入 vant

• 进入 src/main.js 文件修改 main.js

import { createApp } from 'vue';
// import './style.css'
import App from './App.vue';

// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp(App);
// 3. 注册你需要的组件
app.use(Button);

app.mount('#app');

编码测试

• 进入 src/App.vue 修改

<script>
</script>

<template>
  <van-button type="primary" size="large">ok</van-button>
</template>

<style scoped>
</style>