Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bolehkah vuejs menggunakan mui?

Bolehkah vuejs menggunakan mui?

青灯夜游
青灯夜游asal
2021-09-22 14:58:392181semak imbas

Vuejs boleh menggunakan mui Kaedah: 1. Pergi ke github untuk memuat turun fail MUI; js, Perkenalkan fail gaya css mui 4. Tambahkan kod sumber gaya ke halaman yang ditentukan mengikut keperluan.

Bolehkah vuejs menggunakan mui?

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Cara menggunakan MUI dalam VUE

1 Langkah 1: Muat turun MUI

Baidu Cari MUI dan masukkan laman web rasminya, klik pada alamat github di sudut kanan atas, muat turun fail MUI

Bolehkah vuejs menggunakan mui?

2. Langkah 2: Salin fail

Salin Salin tiga fail dalam direktori dist fail yang dimuat turun ke direktori mui yang dibuat dalam projek anda.

Jika mui.css yang diimport melaporkan ralat , mungkin url dalam mui menghala ke beberapa gambar. Tukar petikan tunggal alamat imej itu petikan bergandaItu sahaja.

Bolehkah vuejs menggunakan mui?

3 Langkah 3: Perkenalkan gaya MUI

Dalam fail main.js, perkenalkan fail gaya css mui

i. import 'laluan relatif ke fail mui.css';

seperti import '../mui/css/mui.css';

Bolehkah vuejs menggunakan mui?

4. Langkah 4: Tambahkan kod sumber gaya pada halaman mengikut keperluan

1) Pilih kesan gaya yang diperlukan

Jalankan mui-masterexampleshello-muiindex. fail html

Klik kanan> Lihat kod sumber halaman web> Paparan kad MUI ( Yang ada gambar dan teks) Contohnya

Bolehkah vuejs menggunakan mui?

2) Salin kod sumber gaya keperluan Bolehkah vuejs menggunakan mui?

Klik pada kad Selepas melihat, masukkan halaman lihat

klik kanan tetikus> untuk melihat kod sumber halaman web> kod ke dalam halaman yang anda mahu gunakan

Kod sumber paparan kad ketiga:

<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>

Cadangan berkaitan: "Bolehkah vuejs menggunakan mui?vue .js tutorial

"

Atas ialah kandungan terperinci Bolehkah vuejs menggunakan mui?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn