数据与信息资源共享平台（五）

vue前端项目初始化 vant3组件库vant安装配置插件在main.ts中引入组件

vant3组件库

vant3组件库：https://vant-contrib.gitee.io/vant/#/zh-CN

项目初始化：vite：https://vitejs.cn/guide/#scaffolding-your-first-vite-project
项目目录下cmd并输入命令：$ yarn create vite

项目初始化

npm install安装依赖

vant安装

在现有项目中使用 Vant 时，可以通过 npm 进行安装：
Vue 3 项目，安装最新版 Vant
npm i vant

在 vite 项目中按需引入组件
在 vite 项目中使用 Vant 时，推荐安装 vite-plugin-style-import 插件，它可以自动按需引入组件的样式。
通过 yarn 安装：
yarn add [email protected] -D

配置插件

安装完成后，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
};

在main.ts中引入组件

完成以上两步，就可以直接使用 Vant 组件了：

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);