ホームページ > 記事 > ウェブフロントエンド > Mint-UIをvueにインストールする方法
Mint-UIをvueにインストールする方法
- 亚连オリジナル
- 2018-06-15 13:44:431921ブラウズ
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プロジェクトを作成し、以前に書かれた//www.jb51.net/article/131600.htmを参照してください
3、次にMint UIをインストールします:
npm i mint-ui --save
4、次にMintを導入する必要がありますUI、ここには 2 つの状況があります:
1. すべてのコンポーネントを導入する
プロジェクトが Mint UI でさらに多くのコンポーネントを使用する場合、最も簡単な方法は、それらをすべて導入することです。このとき、エントリファイル main.js にある必要があります:
import Mint from 'mint-ui'; Vue.use(Mint); import 'mint-ui/lib/style.css';
2. オンデマンドでインポート
特定のコンポーネントのみを使用する必要がある場合は、このコンポーネントを導入するだけで、Mint UI が確実に存在することが保証されます。コードをパッケージ化するときにこのコンポーネントとは何の関係もありません。このファイルは最終コードには表示されません。たとえば、main.js で Button コンポーネントを導入する必要がある場合:
import Button from 'mint-ui/lib/button'; import 'mint-ui/lib/button/style.css'; 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 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css'; //不需要手动导入mint-ui样式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);
import { Swipe, SwipeItem } from 'mint-ui'; //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);以前にインストールしたプラグインは、対応する CSS ファイルを自動的にインポートします。
6. UI コンポーネントの具体的な使用法 – 公式ドキュメントを直接参照できます http://mint-ui.github.io/docs/
使用プロセス中に、Mint UI ドキュメントがあまり詳細ではないことがわかりました。 、多くの特定の使用法には追加の Baidu が必要です...
1. まず、公式ドキュメントの最初の紹介と使用法を見てください:
この種のコンポーネントが導入されると、行 Vue.component (「対応するコンポーネント名」) を使用する場合は、vue ドキュメントのテンプレート部分に移動し、対応するタグ名を使用して属性を追加します。実際には、公式ドキュメントのコードを直接コピーすることができます。ただし、比較的複雑で複数の属性のコンポーネントには Baidu が必要です。Vue.component("对应的组件名"),使用的时候是再vue文档的template部分,使用对应的标签名加属性,其实就是直接复制官方文档的代码即可,不过相对复杂多属性的组件就要另外百度了.
那么接下来看一下在项目中的使用代码:
//在main.js里面添加--复制官方文档该组件对应的引入即可
import { Header } from 'mint-ui';
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 'mint-ui';
created:function(){
Toast("使用Toast"); //这里是为了测试才写在created里面,在平时用的时候,是根据自己需要放在对应的位置使用的
}
コンポーネントのレンダリング
2. 次に、公式 Web サイトのドキュメントの 2 番目の紹介と使用方法を見てください:
us この種のコンポーネントが導入されると、Vue.component ("対応するコンポーネント名") が存在しないことがわかります。基本的な使い方を見てください、これはとても簡単です...
私が参照した最初の方法は、ドキュメントの Toast コンポーネントを直接導入し、それをスクリプト内で使用することです。エラーが報告されます:
//在main.js里面添加,这里需要将Toast方法设置为全局变量,否则就要在每个用到该方法的vue页面重新引入该组件....
import { Toast } from 'mint-ui';
window.Toast= Toast;
Baiduで検索すると、私と同じようにこの問題に遭遇した人は多いようです...
実際、Toastの使用法を見ると、Toastがはメソッドなので、定義せずにjs内で直接使用するとエラーが報告されるので、コンポーネントを導入する際にメソッドをグローバル変数として設定します。ページ上のコンポーネントをもう一度見てください:
上記は、将来あなたのために役立つことを願っています。 🎜🎜関連記事: 🎜🎜🎜JSを使用して画像変更時計を実装する(詳細なチュートリアル)🎜🎜
以上がMint-UIをvueにインストールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。