vue-7: コンポーネント ライブラリ (モバイル上の Vant) (PC 上の要素)

モバイルバント

プラグインのインストール (オンデマンドでインポート) 再起動して有効にします

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

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

vite ベースのプロジェクトをインポートします。

如果是基于 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()],
    }),
  ],
};

例: 特別なポイント: Toast、Dialog、Notify、ImagePreview コンポーネント、関数コンポーネントを使用する場合、unplugin-vue-components は対応するスタイルを自動的に導入できないため、手動でスタイルを導入する必要があります

基本コンポーネント: トースト ライト プロンプトにスタイルがありません: 解決

フィードバック コンポーネント:ダイアログ ポップアップ ボックスにスタイルがない: 解決済み

// 导入
import { showToast } from 'vant';

// 导入样式使用
import 'vant/es/toast/style';
import 'vant/es/dialog/style';

 スタイルの浸透: deep()

PC側コンポーネントライブラリ

• vue2 は要素 UI を推奨します

• Vue3 要素に加えて自動的にインポートすることを忘れない

  • 要素をインストールする

    • npm install element-plus --save

  • オンデマンド インポートをインストールし、これら 2 つのプラグインを自動的にインポートします

    • npm install -D unplugin-vue-components unplugin-auto-import

  • vite.config.ts 公式 Web サイトを設定する

    • 

  • インストールアイコンのアイコン設定: npm install @element-plus/icons-vue

    • 

  • 通知はスタイルをインポートする必要があります

                'element-plus' から { ElNotification } をインポートします              

                import 'element-plus/es/components/notification/style/css'

スタイルの浸透: deep()