当前位置：首页 > VUE

mui实现vue

2026-03-07 14:23:59VUE

使用 MUI 实现 Vue 项目的步骤

安装 MUI 和 Vue 依赖

确保已安装 Vue 项目，若未创建可通过 Vue CLI 初始化。安装 MUI 核心库及样式依赖：

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material  # 可选，图标库

配置主题（可选）

在 src 目录下创建 theme.js 文件，自定义主题颜色、字体等：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

export default theme;

在 Vue 中集成 MUI 组件

在 main.js 或入口文件中引入主题和 MUI 组件：

import { createApp } from 'vue';
import App from './App.vue';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

const app = createApp(App);
app.mount('#app');

// 在根组件中包裹 ThemeProvider
app.component('ThemeProvider', ThemeProvider);

使用 MUI 组件示例

在 Vue 单文件组件中直接使用 MUI 组件，例如按钮：

<template>
  <ThemeProvider :theme="theme">
    <Button variant="contained" color="primary">Click Me</Button>
  </ThemeProvider>
</template>

<script>
import { Button } from '@mui/material';
import theme from '../theme';

export default {
  components: { Button },
  data() {
    return { theme };
  },
};
</script>

处理样式冲突

若需要覆盖 MUI 样式，使用 sx 属性或 styled API：

import { styled } from '@mui/system';

const CustomButton = styled(Button)({
  backgroundColor: 'green',
});

响应式设计

利用 MUI 的 useMediaQuery 钩子（需配合 Vue 的 Composition API）：

mui实现vue

import { useMediaQuery } from '@mui/material';

export default {
  setup() {
    const matches = useMediaQuery('(min-width:600px)');
    return { matches };
  },
};