Vue Material 安装与配置

1. 安装 Vue Material

在你的 Vue.js 项目中，可以通过 npm 或 yarn 安装 Vue Material。首先确保你的项目已经初始化。

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

# 使用 yarn
yarn add vue-material

2. 引入 Vue Material

在你的 main.js 文件中，引入 Vue Material 和所需的 CSS 样式，并注册 Vue Material 插件。

import Vue from 'vue';
import App from './App.vue';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css'; // 默认主题

Vue.use(VueMaterial);

new Vue({
  render: h => h(App),
}).$mount('#app');

配置主题和全局样式

1. 自定义主题

Vue Material 提供了多种主题，你可以选择或自定义主题。通过引入不同的 CSS 文件，可以使用不同的主题。

例如，要使用深色主题：

import 'vue-material/dist/theme/deep_purple-amber.css';

2. 创建自定义主题

如果你希望自定义主题，可以在项目中创建一个 CSS 文件，使用 CSS 变量来设置颜色、字体等。

/* custom-theme.css */
:root {
  --md-primary: #3f51b5; /* 主色 */
  --md-accent: #ff4081;  /* 强调色 */
  --md-background: #ffffff; /* 背景色 */
  --md-text: #212121; /* 文字颜色 */
}

/* 应用样式 */
.md-button {
  color: var(--md-primary);
}

在 main.js 中引入这个自定义主题：

import './custom-theme.css';

3. 全局样式配置

如果你需要设置全局样式，可以在 App.vue 或其他 CSS 文件中定义这些样式。

/* global.css */
body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--md-background);
  color: var(--md-text);
}

h1, h2, h3, h4 {
  font-weight: 600;
}

然后在 main.js 中引入这个全局样式：

import './global.css';

总结

通过以上步骤，你可以轻松安装和配置 Vue Material，同时自定义主题和全局样式。这将帮助你创建一个视觉上统一且符合 Material Design 原则的应用程序。如果你有任何问题或需要更具体的指导，随时告诉我！