Vue.jsモバイルコンポーネントライブラリの使い方

今回は、Vue.js モバイル コンポーネント ライブラリの使用方法について説明します。Vue.js モバイル コンポーネント ライブラリを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

Mint UI には豊富な CSS コンポーネントと JS コンポーネントが含まれており、日々のモバイル開発ニーズを満たすことができます。これにより、統一されたスタイルのページを迅速に構築し、開発効率を向上させることができます。

本当の意味でコンポーネントをオンデマンドでロードします。ファイル サイズが大きすぎることを心配することなく、宣言されたコンポーネントとそのスタイル ファイルのみをロードできます。

Mint UIは、モバイル端末のパフォーマンス閾値を考慮し、ブラウザの不要な再描画や再配置を回避するためにCSS3を使用して各種アニメーションを処理し、ユーザーがスムーズでスムーズなエクスペリエンスを得ることができます。

Vue.js の効率的なコンポーネント化ソリューションに依存している Mint UI は軽量です。すべて導入したとしても、圧縮ファイルのサイズはわずか 100K を超えます。

ミントUI

Ele.me フロントエンド チームによって立ち上げられた Mint UI は、Vue.js に基づくモバイル コンポーネント ライブラリです。 6時から 今月初めにオープンソース化されて以来、コミュニティからのフィードバックに基づいていくつかのバグが修正され、いくつかの新しいコンポーネントが追加され、バージョン 0.2.0 が今週リリースされました。この記事では、を使用してプログラムを最初から構築する方法について説明します。 Mint UI 用の Vue プロジェクト。

足場

Vue.js の急速な発展に伴い、現在、Vue プロジェクトの足場を構築するためのオプションが多数あります。たとえば、公式に提供されている vue-cli を使用できます。この記事では、Ele.me 独自のビルド ツール クッキングを使用してこのタスクを完了します。

まず、クッキングをグローバルにインストールします:

npm i cooking -g

新しいプロジェクト フォルダーを作成します:

mkdir mint-ui-example

プロジェクト フォルダーに入り、クッキングを使用してビルドします:

cooking init vue

最後のパラメーター vue は、スキャフォールディングが Vue.js に基づいて構築されることを示します。

その中で、「どの CSS 前処理を使用するか」については、PostCSS をベースにしたソリューションである Salad を使用します。興味のある学生はそれについて学ぶことができます。もちろん、他のプリプロセッサを選択することもできます。

次に Mint UI をインストールします:

npm i mint-ui --save

Mint UIのご紹介

さて、その後の作業は 2 つの状況に分けられます:

1. すべてのコンポーネントを紹介します

プロジェクトで Mint UI のさらに多くのコンポーネントを使用する場合、最も簡単な方法は、それらをすべてインポートすることです。現時点では、

エントリ ファイル main.js:

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);

に含まれている必要があります。

2. オンデマンドでご紹介します

特定のコンポーネントのみを使用する必要がある場合は、このコンポーネントを導入するだけで、コードがパッケージ化されるときに、このコンポーネントに関係のないファイルが最終コードに表示されないようにすることができます。たとえば、Main.js で Button コンポーネントを導入する必要がある場合:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

上記の 2 つのインポート方法では、対応する CSS ファイルを個別にインポートする必要があることがわかります。これは、特にオンデマンド インポート方法を使用して複数のコンポーネントを導入する場合には不便です。この問題を回避するには、

プラグインを使用できます。もちろん最初にインストールすることです: babel-plugin-component

npm i babel-plugin-component -D

次に、.babelrc で設定します:

{
 "plugins": ["other-plugin", ["component", [
 { "libraryName": "mint-ui", "style": true }
 ]]]
}

このように、上記 2 つの導入方法は次のように簡略化できます:

import MintUI from 'mint-ui';
Vue.use(MintUI);

そして

りー

プラグインは、対応する CSS ファイルを自動的にインポートします。

を使用する 各

コンポーネントの使用方法についてはドキュメントをお読みください。ここではほんの一例を示します。 app.vue 内:

import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

以上がMint UIの使い方の紹介です。使用中に問題が発生した場合、またはいくつかの提案が必要な場合は、GitHub リポジトリに問題を提出してください。

可能有些同学知道，除了这个移动端组件库以外，饿了么还有一套桌面端组件库 vue-desktop。目前我们正在对它进行重构，这次有了 UED 的介入，整体视觉有了很大的提升。完成后也会开源，而且会有两个版本，分别支持 vue 1.0.x 和 vue 2.0。当然，Mint UI 也会考虑支持 vue 2.0。

PS: mint-ui在手机页面的样式不正常问题

 问题一、

在使用 vue2.0 +mint-ui 时pc端的样式没有问题但是手机端的就缩小了，失去了想要的效果

这是一个头文件的申明问题在入口文件index.html里的标签里加上这个代码即可

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue父子组件通信使用方法

mint-ui loadmore上拉加载与下拉刷新冲突处理方法

以上がVue.jsモバイルコンポーネントライブラリの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。