vue の Mint UI とは何ですか?-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

vue の Mint UI とは何ですか?

青灯夜游

Nov 25, 2020 pm 12:05 PM

mint ui vue

vue では、Mint UI は、Ele.me チームによってオープンソース化された Vue.js に基づくモバイルコンポーネントライブラリです。 Mint UIには、日々のモバイル開発ニーズに対応できる豊富なCSSおよびJSコンポーネントが含まれており、統一されたスタイルのページを迅速に構築し、開発効率を向上させることができます。

vue の Mint UI とは何ですか?

Mint UI は、Ele.me チームによってオープンソース化されている Vue.js ベースのモバイルコンポーネントライブラリです。

公式 Web サイト: https://mint-ui.github.io/#!/zh-cn

中国語ドキュメント: http://mint-ui.github.io/docs/ # /zh-cn2

機能の紹介

Mint UI には豊富な CSS コンポーネントと JS コンポーネントが含まれており、日々のモバイル開発ニーズに対応できます。。これにより、統一されたスタイルのページを迅速に構築し、開発効率を向上させることができます。
コンポーネントをオンデマンドで真にロードします。ファイルサイズが大きすぎることを気にせずに、宣言されたコンポーネントとそのスタイルファイルのみをロードできます。
Mint UI は、モバイル端末のパフォーマンスのしきい値を考慮して、CSS3 を使用してさまざまなアニメーションを処理し、ブラウザーの不必要な再描画や再配置を回避し、ユーザーがスムーズなエクスペリエンスを得ることができます。経験。
Vue.js の効率的なコンポーネント化ソリューションを利用している Mint UI は軽量です。すべてインポートしたとしても、圧縮ファイルのサイズは gzip でわずか約 30kb (JS CSS) です。

Vue-cli で Mint UI を使用する

vue-cli を使用してコンポーネント化されたプロジェクトを作成します。 Mint UIを導入するには3つの方法があります

(1)。index.html

に直接導入します。プロジェクトの作成にはvue-cliを使用します。前述したように、プロセスはデモしません。ただし、コアコードを直接見てみましょう

#1)、index.html で cdn を使用して、mint-ui 関連の CSS と js

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mint-ui-demo</title>
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script>
<!-- built files will be auto injected -->
<scrip tsrc="https://unpkg.com/mint-ui/lib/index.js"></script>
<div id="app"></div>
</body>
</html>

ログイン後にコピー

外部設定 mint-ui

# を導入します。 ## 2) webpack.base.conf.js を設定し、次のコードを追加します。

mint-ui を設定します。 vue の Mint UI とは何ですか?
webpack.base の module.exports にいます。 conf.js 外部を構成する、外部はグローバルに使用するコンポーネントを公開します

PS: ここでは、外部構成の key:vaule 形式に注意を払う必要があります。ここでの値は、多くの記事で自由に構成できると言われています, ただし、自分でテストした後、気軽に設定することはできません。関連する js によって公開されているモジュール名とまったく同じである必要があります。mint-ui の場合、MINT です。mint- のソースコードを見てみましょう。 ui.js

vue の Mint UI とは何ですか? ご覧のとおり、mint-ui は使用できるように MINT を公開しているため、externals の値はこの値でなければなりません。「自由に構成することはできません」

3. main.js を変更します

import MINT from&#39;mint-ui&#39;
Vue.use(MINT)

ログイン後にコピー

上記 2 つの文を追加し、mint-ui を導入して使用します

上記 3 つの手順の後、cdn を使用して mint-ui を設定しましたテストしてみましょう

4. 次のコードを App.vue のテンプレートに追加します

<template>
<div id="app">
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
<router-view/>
</div>
</template>

ログイン後にコピー

5. 実行して結果を表示します

vue の Mint UI とは何ですか? 、どうですか、完璧な表示 mint-ui のボタン効果

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7518

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。

Vueはマーキー/テキストスクロール効果を実現します Apr 07, 2025 pm 10:51 PM

CSSアニメーションまたはサードパーティライブラリを使用して、VUEでマーキー/テキストスクロール効果を実装します。この記事では、CSSアニメーションの使用方法を紹介します。スクロールテキストを作成し、テキストを＆lt; div＆gt;をラップします。 CSSアニメーションを定義し、オーバーフローを設定します：非表示、幅、アニメーション。キーフレームを定義し、アニメーションの開始と終了時にtranslatex（）を設定します。期間、スクロール速度、方向などのアニメーションプロパティを調整します。

Function Intercept Vueの使用方法 Apr 08, 2025 am 06:51 AM

VUEの関数傍受は、指定された期間内に関数が呼び出され、パフォーマンスの問題を防ぐ回数を制限するために使用される手法です。実装方法は次のとおりです。LodashLibrary：Import {Debounce}から「Lodash」からインポート。 debounce関数を使用して、インターセプト関数を作成します。インターセプト関数を呼び出すと、制御関数は500ミリ秒でせいぜい1回呼び出されます。

Vue Multi-Page開発とはどういう意味ですか？ Apr 07, 2025 pm 11:57 PM

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。

See all articles

vue の Mint UI とは何ですか?

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック