UniApp が H5 を開発し、Vant を導入

ステップ 1: Vant をダウンロードしてインストールする

npm i vant -S --production

ステップ 2: Main.ts で Vant を導入する

import {createSSRApp} from 'vue'

import App from './App.vue'
// 引入Vant
import Vant from "vant";

export function createApp() {
    const app = createSSRApp(App).use(Vant)
    return {
        app,
    }
}

jsでもtsでもVue.use()が正しい

構造後のオンデマンドでインポートすることもできます

import {Button,......} from "vant"

Vue.use(Button)

ステップ 3: App.vue にグローバル スタイルを導入し、両方のインポートを試します。これには多くの落とし穴があります

<style>
/*每个页面都引入Vant*/
/*@import url("./node_modules/vant/lib/index.css");*/
@import "vant/lib/index.css";
</style>

ステップ 4: すぐに使用できます

Vant 3 - Vue 上に構築された軽量モバイル UI コンポーネントVue 上に構築された軽量モバイル UI コンポーネントhttps://vant-contrib.gitee.io/vant/#/zh-CN