ホームページ > 記事 > ウェブフロントエンド > vue の Mint UI とは何ですか?
vue の Mint UI とは何ですか?
- 青灯夜游オリジナル
- 2020-11-25 12:05:172732ブラウズ
vue では、Mint UI は、Ele.me チームによってオープンソース化された Vue.js に基づくモバイル コンポーネント ライブラリです。 Mint UIには、日々のモバイル開発ニーズに対応できる豊富なCSSおよびJSコンポーネントが含まれており、統一されたスタイルのページを迅速に構築し、開発効率を向上させることができます。
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 を設定します。
webpack.base の module.exports にいます。 conf.js 外部を構成する、外部はグローバルに使用するコンポーネントを公開します
PS: ここでは、外部構成の key:vaule 形式に注意を払う必要があります。ここでの値は、多くの記事で自由に構成できると言われています, ただし、自分でテストした後、気軽に設定することはできません。関連する js によって公開されているモジュール名とまったく同じである必要があります。mint-ui の場合、MINT です。mint- のソース コードを見てみましょう。 ui.js
3. main.js を変更します
import MINT from'mint-ui' 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. 実行して結果を表示します
、どうですか、完璧な表示 mint-ui のボタン効果
! ！2020 フロントエンド Vue インタビューの質問の概要 (回答)Vue チュートリアルの推奨事項: 2020 年の最新の 5 つの vue.js ビデオ チュートリアル セレクションプログラミング入門
以上がvue の Mint UI とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。