通过 Vue Material 和 Vue 2.0 建立精美的 APP 应用 - 文章教程

通过 Vue Material 和 Vue 2.0 建立精美的 APP 应用

发布于 2020-02-25 字数 5220 浏览 1741 评论 0

Vue Material 是一个简单、轻便,完全按照 Google Material 设计规范构建的前端开发框架,用于构建设计良好的应用程序,它可以适应每一个屏幕,支持所有具有动态主题的现代 Web 浏览器,按需提供组件,所有这些都具有易于使用的 API。

通过 Vue Material 和 Vue 2.0 建立精美的 APP 应用

特点

Material 设计

Vue Material 是一个轻量级的框架, 建立在谷歌的 Material Design 基础上。 设计强大的和美观的web应用并适用于不同的屏幕。

全功能应用

你可以动态地生成和使用主题,根据自己的需求只用组件,UI元素与组件的优势在于可以更简单的使用API和其他的。

兼容性

它的目的是提供一组可重用的组件和一系列的UI元素,使用 Vue 2.0 建立支持 主流的浏览器 的应用。

通过 Vue Material 和 Vue 2.0 建立精美的 APP 应用

安装

引入 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">

– 安装 Vue Material 通过 npm 或 yarn:
npm install vue-material
yarn add vue-material

* 其他包管理,比如 JSPM 和 Bower 暂不支持。

ES6

import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

AMD

var Vue = require('vue')
var VueMaterial = require('vue-material')
require('vue-material/dist/vue-material.css')

或从Github 下载 这个脚本和样式并引入到HTML中:

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

用法

启用 Vue Material 在你的应用中通过 Vue.use()。 您也可以单个单个的启用组件:

ES6

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

AMD

// To import the whole library
var Vue = require('vue')
var VueMaterial = require('vue-material')
require('vue-material/dist/vue-material.css')

Vue.use(VueMaterial)

// Or to import individual components
var Vue = require('vue')
var VueMaterial = require('vue-material')
require('vue-material/dist/components/mdCore/index.css') //Required to boot vue material
require('vue-material/dist/components/mdButton/index.css')
require('vue-material/dist/components/mdIcon/index.css')
require('vue-material/dist/components/mdSidenav/index.css')
require('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="'default'">
  <md-toolbar>
    <div class="md-title">My App</div>
  </md-toolbar>

  <md-button v-md-theme="'indigo'">My Button</md-button>
</div>

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论