Vue.jsモバイルコンポーネントライブラリの使い方-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-14 17:06:46

オリジナル

2182 人が閲覧しました

今回は、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中文网其它相关文章！