Mint-UIをvueプロジェクトにインストールする方法-jsチュートリアル-php.cn

Mint-UIをvueプロジェクトにインストールする方法

不言

リリース： 2018-06-25 13:53:15

オリジナル

1496 人が閲覧しました

Mint UI は、Ele.me フロントエンドチームによって立ち上げられた Vue.js に基づくモバイルコンポーネントライブラリです。この記事では、Mint-UI を vue プロジェクトにインストールして使用する方法を紹介します。必要な方は参照してください。それ

一、Mint UI は、Ele.me フロントエンドチームによって立ち上げられた Vue.js に基づくモバイルコンポーネントライブラリです。次の機能があります。使用方法ドキュメント:

http://mint-ui.github.io /#!/zh-cn

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

2. まず、vue プロジェクトを作成します

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

npm i mint-ui --save

ログイン後にコピー

4. 次に、Mint UI を導入する必要があります。ここには 2 つの状況があります:

1. すべてのコンポーネントを導入します。

プロジェクトでより多くのコンポーネントを Mint UI で使用する場合、最も簡単な方法は、それらをすべて導入することです。このとき、エントリファイル main.js にある必要があります:

import Mint from &#39;mint-ui&#39;;
Vue.use(Mint);
import &#39;mint-ui/lib/style.css&#39;;

ログイン後にコピー

2. オンデマンドで導入

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

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

ログイン後にコピー

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

5. この問題を回避するには、babel-plugin-component プラグインを使用します。

1. まずはもちろんインストールします:

npm i babel-plugin-component -D

ログイン後にコピー

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

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-2"
 ],
 "plugins": ["transform-runtime",["component",[
   {"libraryName":"mint-ui","style":true}
  ]]],
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": ["istanbul"]
 }
 }
}

ログイン後にコピー

3. このようにして、上記の 2 つのインポート方法は次のように簡略化できます。

//import Mint from &#39;mint-ui&#39;;
//Vue.use(Mint);
//import &#39;mint-ui/lib/style.css&#39;; //不需要手动导入mint-ui样式
import Button from &#39;mint-ui/lib/button&#39;;
Vue.component(Button.name, Button);

import { Swipe, SwipeItem } from &#39;mint-ui&#39;; //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

ログイン後にコピー

先ほどインストールしたプラグインにより、対応するCSSファイルが自動でインポートされます！

6. UI コンポーネントの具体的な使用法 – 公式ドキュメントを直接参照できます http://mint-ui.github.io/docs/

使用プロセス中に、Mint UI ドキュメントがあまり詳細ではないことがわかりました。、多くの特定の使用法には追加の Baidu が必要です...

1. まず、公式ドキュメントの最初の紹介と使用法を見てください:

この種のコンポーネントが導入されると、行 < code>Vue.component (「対応するコンポーネント名」) を使用する場合は、vue ドキュメントのテンプレート部分に移動し、対応するタグ名を使用して属性を追加します。実際には、公式ドキュメントのコードを直接コピーすることができます。ただし、比較的複雑で複数の属性のコンポーネントには Baidu が必要です。Vue.component("对应的组件名"),使用的时候是再vue文档的template部分,使用对应的标签名加属性,其实就是直接复制官方文档的代码即可,不过相对复杂多属性的组件就要另外百度了.

　　那么接下来看一下在项目中的使用代码:

//在main.js里面添加--复制官方文档该组件对应的引入即可
import { Header } from &#39;mint-ui&#39;;
Vue.component(Header.name, Header);
<template>
 <mt-header title="修改客户资料">
   <a @click="toBack" replace slot="left">
    <a class="back-icon"></a>
   </a>
   <!--这个头部导航栏关键的是mt-header父标签,而该标签内的内容是根据需求写的哦-->
 </mt-header>
</template>

ログイン後にコピー

组件效果图

　　2. 然后看官网文档的第二种引入和用法:

　　我们可以看到这种组件引入的时候,居然没有Vue.component("对应的组件名"),然后看基本用法,就这么简单一句......

次に、プロジェクトで使用されているコードを見てみましょう:

//提示框
import { Toast } from &#39;mint-ui&#39;;
created:function(){
 Toast("使用Toast"); //这里是为了测试才写在created里面,在平时用的时候,是根据自己需要放在对应的位置使用的
}

ログイン後にコピー

コンポーネントレンダリング

2. 次に、公式 Web サイトのドキュメントの 2 番目の紹介と使用方法を見てください:

この種のコンポーネントが導入されたときには、Vue.component ("対応するコンポーネント名") が存在しなかったことがわかります。 , そして、基本的な使い方を見てみましょう。それはとても簡単です...

今回は、ドキュメントの Toast コンポーネントを直接導入する最初の方法を参照し、それをスクリプト内で使用します。、エラーが報告されます:

//在main.js里面添加,这里需要将Toast方法设置为全局变量,否则就要在每个用到该方法的vue页面重新引入该组件....
import { Toast } from &#39;mint-ui&#39;;
window.Toast= Toast;

ログイン後にコピー

Baiduで検索したところ、多くの人が私と同じようにこの問題に遭遇しているようです…

🎜実際、使用方法を見ると。 Toastの文を見るとToastがメソッドであることが分かるので、定義せずにjs内で直接使用するとエラーが報告されるので、コンポーネントを導入する際にはこのメソッドをグローバル変数として設定します。 : 🎜🎜🎜rrreee🎜🎜🎜 設定後は、ページ上のコンポーネントをもう一度見てください: 🎜🎜🎜 コンポーネントのレンダリング 🎜

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。