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

vue の Mint UI とは何ですか?

青灯夜游

リリース： 2020-11-25 12:05:17

オリジナル

2768 人が閲覧しました

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 のボタン効果