vuejs에서 mui를 사용할 수 있나요?

vuejs는 mui를 사용할 수 있습니다. 1. github로 이동하여 MUI 파일을 다운로드합니다. 2. 다운로드한 파일의 dist 디렉터리에 있는 세 파일을 mui 프로젝트 디렉터리에 복사합니다. mui 스타일 파일의 CSS 4. 요구 사항에 따라 지정된 페이지에 스타일 소스 코드를 추가합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

VUE에서 MUI를 사용하는 방법

1. 1단계: MUI

다운로드 Baidu에서 MUI를 검색하고 오른쪽 상단에 있는 github 주소를 클릭하여 MUI 파일을 다운로드합니다.

2. 두 번째 단계: 파일 복사

다운로드한 파일의 dist 디렉터리에 있는 세 파일을 프로젝트에서 생성된 mui 디렉터리에 복사합니다.

가져온 mui.css가 오류를 보고하는 경우, mui의 URL이 일부 사진을 가리키는 것일 수 있습니다. 이미지 주소의 작은따옴표를 큰따옴표로 변경하세요.

3단계: MUI 스타일 도입

main.js 파일에 mui CSS 스타일 파일

import 'mui.css 파일 상대 경로'을 도입합니다.

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

4. 4단계: 요구 사항에 따라 페이지에 스타일 소스 코드를 추가합니다.

1) 필요한 스타일 효과를 선택하고

mui-masterexampleshello-muiindex.html 파일을 실행합니다

right -클릭 > 웹 페이지 보기 소스 코드 > 해당 코드 복사(해당 코드가 필요한 스타일의 코드입니다)

다음으로 MUI를 사용하여 카드 보기의 세 번째 카드(그림과 텍스트가 있는 카드)를 가져옵니다. 예를 들어

2) 필요한 스타일 소스 코드를 복사하세요

카드 보기를 클릭하고 보기 페이지로 들어갑니다

마우스 오른쪽 버튼 클릭> 적용하고 싶은 코드 복사> 복사한 코드를 원하는 곳에 붙여넣기

사용된 페이지의 세 번째 카드뷰 소스코드 :

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

위 내용은 vuejs에서 mui를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!