前端React+Material UI开发环境的快速搭建

打算把之前一个vue的小应用用使用react+Material UI重构一下，这里记录一下React+Material UI开发环境的快速搭建。

create react

在webStorm,可以直接创建一个全新的vite react项目，如果使用vscode可以在终端使用如下命令：

npm create vite@latest my-project -- --template react
cd my-project

Material UI installation

cd my-project进入到项目之后，添加material UI 到项目中:

npm install @mui/material @emotion/react @emotion/styled

也可以使用:

pnpm i @mui/material @emotion/react @emotion/styled

安装字体：

npm install @fontsource/roboto

或：

pnpm i @fontsource/roboto

安装icons:

npm install @mui/icons-material

或:

pnpm i @mui/icons-material

修改src/index.jsx:

import { useState } from 'react'
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

function App() {
const [count, setCount] = useState(0)

return (
    <Stack spacing={2} direction="row">
    <Button variant="text">Text</Button>
    <Button variant="contained">Contained</Button>
    <Button variant="outlined">Outlined</Button>
    </Stack>
)
}

export default App

终端运行：

pnpm i

当所有以来下载完毕后运行:

pnpm run dev

浏览器打开：http://localhost:5173/, 发现已经成功引入mui的按钮了。