Vue Material 完整教程：6 步做出 Material Design 风格界面

【免费下载链接】vue-materialVue.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 组件库，提供 38 个免费可用的现成组件和一套动态主题引擎。本文按"上手 → 瘦身 → 换肤 → 选组件 → 避坑"的顺序，带你 6 步把它真正用进项目里。

Vue Material 入门：Material Design 组件库能帮你做什么

先说清楚它能替你省掉什么。

不用组件库时，一个"像样"的表单你要自己处理：输入框聚焦时的下划线动画、校验失败的红色提示、日期选择器的弹层定位、手机和桌面两套尺寸。每一样都不难，但加起来是几天工时。

用了 Vue Material 之后，这些行为是组件自带的。你声明一个MdInput，聚焦动画、校验提示、清空按钮这些细节它都内置了；声明一个MdTable，排序、分页、选中行这些交互直接可用。

它的核心卖点有三个：

• 组件全：38 个组件覆盖布局、表单、数据展示和反馈交互，完整清单可以在组件源码目录里数一遍
• 主题引擎：颜色不是写死的，可以随时切换，甚至同一个页面上不同组件用不同配色
• 免费：MIT 协议，永久免费，没有功能阉割版

上面这种后台界面，左侧导航、工具栏、卡片、图表卡片全部来自组件库的现成组件。下面先把它装起来。

Vue Material 安装：一条命令跑通项目 🔧

安装本身只有一条命令的事：

npm install vue-material --save

安装前确认一点：它要求vue版本在^2.7.14以上，这是写死在 package.json 的 peerDependencies 里的。Vue 3 项目用不了它，先确认你的技术栈。

装完后在入口文件引入 Vue、组件库和样式，再执行Vue.use(VueMaterial)即可。另外两个容易被忽略的小动作：

• 建议从 Google CDN 引入 Roboto 字体和 Material Icons，按钮里的图标不显示，八成是少了这一步
• 想研究实现细节，可以 clone 源码（https://gitcode.com/gh_mirrors/vu/vue-material）本地看，比如波纹效果（MdRipple）就是独立组件实现的

装好了别急着写页面。怎么引入组件，决定了你的打包体积。

Vue Material 按需加载：这样引入能减小打包体积

官方文档GettingStarted 页面里有一句明确的提醒：全量包会引入全部组件，"会伤害性能"。

两种引入方式对比一下：

方式一：全量引入。一行Vue.use(VueMaterial)搞定，代价是 38 个组件全进 bundle。你只用了按钮和表格，另外 36 个组件照样被用户下载。

方式二：按需引入。只 import 你用到的组件：

import { MdButton, MdTable } from 'vue-material/dist/components'

你的应用里用几个组件，就注册几个。页面少、组件用得杂的中型项目，这步做不做，首屏 JS 体积能差出几十 KB。

记住一条原则：用到什么引什么，别图省事引全量。

组件就位后，下一件让用户有感知的事是配色。

Vue Material 动态主题设置：换掉整个应用的配色 ⚡

Vue Material 的主题引擎有四个特点，官方主题概念页总结为：Dynamic、Multiple、Flexible、Friendly。

翻译成大白话：

• 动态：通过声明式 API 随时换主题，父组件换色，子组件全部跟着变
• 多主题：同一页面里，侧边栏可以是深色，内容区是浅色，互不干扰
• 按需构建：只编译你真正用到的主题，不用全量颜色
• 自动对比度：文字颜色和背景色的对比由引擎自动计算，你选了个深色背景，它保证上面的字看得清，不会出现"深灰字压在深灰底上"的事故

使用上很简单。给组件加md-primary、md-accent或md-transparent类，背景色引擎自动接管。默认配色定义在 src/theme/variables.scss 里：primary 是蓝（blue A200），accent 是红（red A200），light 模式。

如果不想自己调，src/theme/prebuilt/ 下有 4 套预置主题，含两套深色方案，直接换引用即可。

一个小提醒：官方不建议 primary 和 accent 用同一个颜色，两个强调色撞在一起，页面会失去层次感。

配色解决了，接下来面对的是"该用哪个组件"的问题。

38 个组件按场景分类：这样挑不容易用错

按字母表找组件效率很低。按"你要做什么"来挑，更快：

搭骨架（布局）MdApp负责整体结构（工具栏 + 侧边抽屉 + 内容区），MdToolbar是顶部工具栏，MdDrawer是侧边抽屉，MdLayout提供响应式栅格，MdElevation负责阴影层级。后台管理界面 80% 的框架结构就靠这五个。

收数据（表单）MdInput文本输入、MdSelect下拉、MdDatepicker日期选择、MdCheckbox复选、MdSwitch开关、MdRadio单选、MdAutocomplete搜索联想、MdChips标签输入。这一组全部自带校验提示和聚焦动画。

展数据（展示）MdTable数据表格、MdList列表、MdCard卡片、MdTabs标签页、MdSteppers分步流程。

给反馈（交互）MdDialog对话框（内置 alert / confirm / prompt 三种快捷用法）、MdSnackbar轻提示（自带排队机制，多条提示不重叠）、MdTooltip气泡提示、MdMenu弹出菜单、MdProgress进度条和加载圈。

这里面使用频率最高的往往是表格。单独展开讲一下。

Vue Material Table 组件：10 分钟做出可排序可分页的数据表

数据表格是后台项目里最重的一块。MdTable的官方示例目录里就有 11 个场景，对应能力可以这么理解：

• 排序：表头默认支持点击排序；TableCustomSort示例演示了完全自定义排序逻辑（比如按"最近更新时间"这种非字段名排序）
• 分页：TablePagination是本地分页，TablePaginationRemote演示了远程分页——数据在服务端，组件只管请求第几页
• 多选与单选：TableMultiple、TableSingle示例覆盖行选中、全选
• 搜索：TableSearch示例演示了输入关键字过滤行
• 自定义模板：TableTemplate允许你接管任意单元格的渲染，放头像、放操作按钮都行
• 固定高度：TableFixed让表格在容器内滚动，而不是把页面撑长

想读实现的话，源码都在 src/components/MdTable/ 下，文件名和职责一一对应。

会用了，还得会避坑。下面是新手最常踩的几个。

Vue Material 避坑清单：新手最容易犯的 5 个错

• 引了全量包：页面只用了 5 个组件，却打包了 38 个。改按需引入
• Vue 版本不对：它只支持 Vue 2（^2.7.14），Vue 3 项目直接装不上或行为异常，选型阶段就该确认
• 忘了主题 CSS：组件 JS 引了，vue-material.min.css和dist/theme/default.css没引，界面就是一堆无样式裸元素
• 忘了字体和图标：Roboto / Material Icons 没从 CDN 引入，按钮图标和字体全部失效
• primary 和 accent 撞色：两个强调色用同一个色，视觉层次会糊掉，官方明确不推荐

这 5 条都发现不了代码报错，只会让界面"看起来不对"，所以踩坑的人特别多。

最后回答一个问题：它到底适合谁。

Vue Material 适合谁：3 类场景快速判断

适合的项目

1. Vue 2 的后台管理、SaaS 产品：布局、表单、表格、反馈全有现成的，能直接对标上面两张仪表盘的效果
2. 需要品牌色和深色模式的中型项目：动态主题引擎让"换皮"变成改几个变量的事，还能整页深浅色混用
3. 想快速出演示版的团队：免费、无商业授权限制，demo 和正式环境用同一套组件

不适合的情况：你的项目在 Vue 3 上。这个组件库基于 Vue 2 生态，长期看维护节奏不如 Vue 3 系组件库，新项目选型要掂量。

核心判断：如果你的技术栈是 Vue 2，又想要完整的 Material Design 交互细节，Vue Material 是目前免费方案里组件覆盖最全的一个，值得先花半小时装一遍。

建议的行动顺序：先按本文第 2 节装好 → 用第 4 节的方式定好 primary / accent 两个颜色 → 挑MdTable和MdForm相关的表单组件搭一个真实页面，跑通后再扩展其余组件。

【免费下载链接】vue-materialVue.js Framework - ready-to-use Vue components with Material Design, free forever.项目地址: https://gitcode.com/gh_mirrors/vu/vue-material