vue-material이란 무엇입니까?

vue-material은 Google의 Material Design을 기반으로 구축된 경량 프레임워크로, Google Pixel Material Design을 구현한 Vue 구성 요소 라이브러리로 모든 최신 웹 브라우저에 적합한 내장형 동적 테마를 제공합니다. 그리고 명확합니다.

Vue Material은 Google의 Material Design을 기반으로 구축된 경량 프레임워크입니다. 다양한 화면에서 작동하는 강력하고 아름다운 웹 애플리케이션을 디자인하세요.

vue Material은 Google Pixel Material Design을 구현한 Vue 구성 요소 라이브러리로, 모든 최신 웹 브라우저에 적합한 내장형 동적 테마가 포함된 구성 요소를 제공하며 API도 간단하고 명확합니다.

필요에 따라 컴포넌트만 사용하여 동적으로 테마를 생성하고 사용할 수 있습니다. UI 요소와 컴포넌트의 장점은 API 등을 사용하기가 더 쉽다는 것입니다.

Vue 2.0을 사용하여 주류 브라우저를 지원하는 애플리케이션을 구축하여 재사용 가능한 구성 요소 세트와 일련의 UI 요소를 제공합니다.

공식 웹사이트: http://vuematerial.materializecss.cn/#/

설치 방법

Google CDN의 Roboto 및 Google 아이콘 소개:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

npm 또는 원사를 통해 Vue Material 설치

npm install vue-material
yarn add vue-material

* 기타 패키지 JSPM, Bower 등의 관리는 아직 지원되지 않습니다.

또는 Github에서 스크립트와 스타일을 다운로드하여 HTML에 도입하세요. (다운로드 주소 https://github.com/marcosmoura/vue-material/archive/master.zip)

<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>

Usage

Vue Material 활성화 애플리케이션에서 Vue.use()를 통해. 구성요소를 개별적으로 활성화할 수도 있습니다.

// To import the whole library
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

Vue.use(VueMaterial)

// Or to import individual components
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/components/mdCore/index.css' //Required to boot vue material
import 'vue-material/dist/components/mdButton/index.css'
import 'vue-material/dist/components/mdIcon/index.css'
import 'vue-material/dist/components/mdSidenav/index.css'
import 'vue-material/dist/components/mdToolbar/index.css'

Vue.use(VueMaterial.mdCore) //Required to boot vue material
Vue.use(VueMaterial.mdButton)
Vue.use(VueMaterial.mdIcon)
Vue.use(VueMaterial.mdSidenav)
Vue.use(VueMaterial.mdToolbar)

테마 적용

Vue Material이 제대로 작동하려면 기본 테마를 구성해야 합니다. 여러 테마를 한 번에 등록할 수도 있습니다.

단일 테마

Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
})

다중 테마

Vue.material.theme.registerAll({
  default: {
    primary: 'cyan',
    accent: 'pink'
  },
  indigo: {
    primary: 'indigo',
    accent: 'pink'
  }
})

코드의 각 부분에 테마를 적용하려면 v-md-theme 명령을 사용해야 합니다:

<div id="app" v-md-theme="&#39;default&#39;">
  <md-toolbar>
    <div class="md-title">My App</div>
  </md-toolbar>
  <md-button v-md-theme="&#39;indigo&#39;">My Button</md-button>
</div>

관련 권장 사항:

2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 학습 코스를 방문하세요! !

위 내용은 vue-material이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!