当前位置：首页 > VUE

vue实现mui

2026-01-13 01:37:09VUE

Vue 实现 MUI 的步骤

在 Vue 项目中集成 MUI（Material-UI）可以通过以下方法实现。MUI 是一个基于 Material Design 的 React 组件库，但可以通过适配或替代方案在 Vue 中使用。

使用 Vue 的 Material Design 组件库

由于 MUI 是 React 组件库，Vue 项目可以直接使用专为 Vue 设计的 Material Design 组件库，例如 Vuetify 或 Vue Material。

安装 Vuetify

Vuetify 是一个流行的 Vue Material Design 组件库，功能丰富且易于使用。

npm install vuetify

在 main.js 或 main.ts 中引入并配置 Vuetify：

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

安装 Vue Material

Vue Material 是另一个轻量级的 Vue Material Design 组件库。

npm install vue-material

在 main.js 中引入并配置：

import { createApp } from 'vue'
import App from './App.vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

const app = createApp(App)
app.use(VueMaterial)
app.mount('#app')

在 Vue 中使用 MUI（React 组件）

如果需要直接使用 MUI 的 React 组件，可以通过 vuera 或 react2vue 等库将 React 组件转换为 Vue 组件。

安装 vuera

npm install vuera

在 Vue 组件中引入并使用 MUI 组件：

<template>
  <div>
    <react-component :component="muiButton" :message="message" />
  </div>
</template>

<script>
import { ReactWrapper } from 'vuera'
import Button from '@mui/material/Button'

export default {
  components: {
    'react-component': ReactWrapper
  },
  data() {
    return {
      muiButton: Button,
      message: 'Click me'
    }
  }
}
</script>

自定义 Material Design 样式

如果不想使用第三方库，可以通过 CSS 或 SCSS 自定义 Material Design 样式。

安装 Material Design 图标

npm install material-design-icons

在 main.js 中引入图标：

import 'material-design-icons/iconfont/material-icons.css'

在组件中使用 Material Design 样式：

vue实现mui

<template>
  <button class="mdc-button">
    <span class="mdc-button__label">Click me</span>
  </button>
</template>

<style>
@import '~@material/button/mdc-button';
</style>