Vue Material 入门指南：从安装到基础使用

倪澄莹George

于 2025-06-04 09:09:48 发布

阅读量243

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00024/article/details/148416970

Vue Material 入门指南：从安装到基础使用

vue-material Vue.js Framework - ready-to-use Vue components with Material Design, free forever. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-material

前言

Vue Material 是一个优秀的 Vue.js 与 Material Design 规范的集成方案。它为开发者提供了一套美观、响应式的 UI 组件，同时保持了 Vue.js 的灵活性和易用性。本文将详细介绍如何开始使用 Vue Material，包括安装、配置和基础使用方法。

环境准备

在开始使用 Vue Material 之前，请确保您已经具备以下条件：

熟悉 Vue.js 2.5+ 的基础知识
已安装 Node.js 环境
了解基本的 npm/yarn 命令

如果您是 Vue.js 的新手，建议先学习 Vue.js 的基础知识，再回来使用 Vue Material。

安装 Vue Material

Vue Material 可以通过 npm 或 yarn 进行安装：

# 使用 npm 安装
npm install vue-material --save

# 使用 yarn 安装
yarn add vue-material

为了获得最佳体验，建议同时引入 Roboto 字体和 Material Icons：

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

使用方式

Vue Material 支持按需引入组件，这样可以显著减小最终打包的体积。以下是推荐的引入方式：

import Vue from 'vue'
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)

这种方式只引入了按钮、内容区域和标签页三个组件，其他组件不会被包含在最终构建中。

完整引入（不推荐）

虽然不推荐，但在某些特殊情况下，您可能需要完整引入所有组件：

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

Vue.use(VueMaterial)

注意：这种方式会引入所有组件，可能会影响应用性能。

CDN 方式（快速原型开发）

对于快速原型开发，可以使用 CDN 方式引入：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
    <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
  </head>

  <body>
    <div id="app">
      <!-- 您的应用代码 -->
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-material"></script>
    <script>
      Vue.use(VueMaterial.default)

      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>