Html5によるマンドモバイル活用の甌穴（おうけつ）踏査
マンドモバイル 使用上の注意
{マンドモバイル mandMobileは金融シナリオのためのオープンソースのVueモバイルUIコンポーネントライブラリで（金融以外のクラスも使用可能）、最近弊社では金融商品をインキュベートしているので、それを使ってみようと思っています。
初めて利用される方は、以下のように 公式ドキュメント ここでは、初めて使ってみてわかったことをまとめています。また、このノートは今後も更新を続け、使用上の様々な問題点を記録していきます。また、メッセージ交換の使用中に問題が発生した場合、一緒にバグについて言及することを歓迎します :smile: ハハハ。
1. 最初のインストール
npm i mand-mobile -S
2. 紹介
グローバルな紹介
を使用する場合
import { Button } from 'mand-mobile';
は、mand-mobileの下にあるすべてのモジュールを取り込みます。
パッケージングやブラウザのダウンロード速度を向上させるために オンデマンド
オンデマンドの導入は、以下の方法で行うことができます。
import Button from 'mand-mobile/lib/button'
import 'mand-mobile/lib/mand-mobile.css' // styles are introduced separately
これはオンデマンドでコンポーネントを取り込みますが、スタイルはすべて取り込まれたままです。
より良い方法は、プラグイン babel-plugin-import を使用することです。
プラグインをインストールする
cnpm i babel-plugin-import --save-dev
module.exports = {
"plugins": [
["import", {
"libraryName": "mand-mobile",
"libraryDirectory": "lib",
"style": true // The documentation says there is no need to configure style, so maybe the default value is true
}]
]
};
設定が完了したら、次のようにプロジェクトで直接使用することができます。
import { Button } from 'mand-mobile';
このようにコンポーネントやスタイルはオンデマンドで導入され、比較的少ない行数のコードで済むので、多くのコンポーネントを導入する場合は設定しておくと便利です。
3. postcss.config.js または .postcssrc.js を設定する。
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 75, // result is: design element size minPixelValue: 2, // elements smaller than or equal to 2 are not processed
propWhiteList: []
})
}
}
変換せずに個々の属性を無視したい場合、最も簡単な方法は、ピクセルセル宣言で大文字のPXを使用することです、例えば、いくつかのフォントは変換する必要がありません。この時点で、このUIライブラリへのプロジェクトのアクセスは完了です。
4. テーマのカスタマイズ方法
[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン