這篇文章給大家分享的是有關(guān)vue-material指的是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括裕華網(wǎng)站建設(shè)、裕華網(wǎng)站制作、裕華網(wǎng)頁制作以及裕華網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，裕華網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到裕華省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

vue-material是一個(gè)建立在谷歌的Material Design基礎(chǔ)上的輕量級(jí)框架，是一個(gè)實(shí)現(xiàn)Google像素材料設(shè)計(jì)的Vue組件庫(kù)，它提供了適合所有現(xiàn)代Web瀏覽器的內(nèi)置動(dòng)態(tài)主題的組件，它的API也簡(jiǎn)單明了。

Vue Material 是一個(gè)輕量級(jí)的框架， 建立在谷歌的 Material Design 基礎(chǔ)上。 設(shè)計(jì)強(qiáng)大的和美觀的web應(yīng)用并適用于不同的屏幕。

vue material是一個(gè)實(shí)現(xiàn)Google像素材料設(shè)計(jì)的Vue組件庫(kù)，它提供了適合所有現(xiàn)代Web瀏覽器的內(nèi)置動(dòng)態(tài)主題的組件，它的API也簡(jiǎn)單明了。

你可以動(dòng)態(tài)地生成和使用主題，根據(jù)自己的需求只用組件，UI元素與組件的優(yōu)勢(shì)在于可以更簡(jiǎn)單的使用API和其他的。

它提供一組可重用的組件和一系列的UI元素，使用 Vue 2.0 建立支持 主流的瀏覽器 的應(yīng)用。

官網(wǎng)：http://vuematerial.materializecss.cn/#/

安裝方法

引入 Roboto 和谷歌 Icons 從谷歌 CDN:

<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 或 yarn 來安裝 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>

用法

啟用 Vue Material 在你的應(yīng)用中通過 Vue.use()。 您也可以單個(gè)單個(gè)的啟用組件:

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

應(yīng)用主題

為了讓 Vue Material 正常工作，你需要配置一個(gè)默認(rèn)的主題。 你也可以一次性注冊(cè)多個(gè)主題。

單個(gè)主題

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

多個(gè)主題

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

應(yīng)用你的主題到每一部分代碼，你需要使用 v-md-theme 指令:

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

感謝各位的閱讀！關(guān)于vue-material指的是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

名稱欄目：vue-material指的是什么-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.chinadenli.net/article6/dcijog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站制作、用戶體驗(yàn)、面包屑導(dǎo)航、Google、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)