vuejsはmuiを使用できますか?

vuejs は mui を使用できます。方法: 1. github に移動して MUI ファイルをダウンロードします; 2. ダウンロードしたファイルの dist ディレクトリにある 3 つのファイルを mui プロジェクト ディレクトリにコピーします; 3. main で。 js ファイル、mui の css スタイル ファイルの導入; 4. 要件に応じて、指定されたページにスタイル ソース コードを追加します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

VUE で MUI を使用する方法

1. ステップ 1: MUI をダウンロード

Baidu MUI を検索してその公式 Web サイトに入り、右上隅にある github アドレスをクリックして、MUI ファイル

2 をダウンロードします。 ステップ 2: file

Copy ダウンロードしたファイルの dist ディレクトリにある 3 つのファイルを、プロジェクト内に作成した mui ディレクトリにコピーします。

インポートされた mui.css がエラーを報告する場合は、、mui の URL がいくつかの画像を指している可能性があります。画像アドレスの 一重引用符 を変更してください。 二重引用符 で十分です。

#3. ステップ 3: MUI のスタイルを導入する

main.js ファイルに、mui

## の CSS スタイル ファイルを導入します。 # i

mport '

mui.css ファイルの相対パス ';

import '../mui/css/mui.css など';

#4. ステップ 4: 要件に従ってスタイル ソース コードをページに追加します

1) 必要なスタイル効果を選択します

mui-master\examples\hello-mui\index.html ファイルを実行します

右クリック> Web ページのソース コードを表示> 対応するコードをコピーします (これに対応します) code は必要なスタイルのコードです)

# 次に、MUI を使用したカード ビューの 3 番目のカード (画像とテキストが含まれるカード) を例として取り上げます

2) 要件スタイルのソース コードをコピーします。

カード ビューをクリックした後、ビュー ページに入ります

マウスを右クリック>クリックして Web ページのソース コードを表示>適用するコードをコピー>コピーしたコードを使用するページに貼り付けます

3 番目のカード ビューソース コード:

<div class="mui-card">

<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>

<div class="mui-card-content">

<div class="mui-card-content-inner">

<p>Posted on January 18, 2016</p>

<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>

</div>

</div>

<div class="mui-card-footer">

<a class="mui-card-link">Like</a>

<a class="mui-card-link">Read more</a>

</div>

</div>

関連する推奨事項: 「vue.js チュートリアル

」

以上がvuejsはmuiを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。