碎言博客
·
前端React+Material UI开发环境的快速搭建
💡
原文中文，约1500字，阅读约需4分钟。
📝
内容提要
本文介绍了如何快速搭建React和Material UI的开发环境。首先，在WebStorm中创建新项目，或在VSCode终端使用命令创建Vite React项目。然后，安装Material UI及相关依赖，并修改src/index.jsx以引入按钮组件。最后，通过终端运行项目并在浏览器中查看效果。
🎯
关键要点
-
在WebStorm中创建新的Vite React项目，或在VSCode终端使用命令创建项目。
-
安装Material UI及相关依赖，包括@mui/material、@emotion/react、@emotion/styled。
-
安装Roboto字体和Material UI图标。
-
修改src/index.jsx以引入按钮组件，并创建简单的按钮布局。
-
通过终端运行项目并在浏览器中查看效果。
❓
延伸问答
如何在WebStorm中创建Vite React项目？
在WebStorm中，可以直接创建一个全新的Vite React项目。
在VSCode中如何创建React项目？
在VSCode终端使用命令：npm create vite@latest my-project -- --template react。
安装Material UI及其依赖的命令是什么？
使用命令：npm install @mui/material @emotion/react @emotion/styled。
如何在项目中引入Roboto字体？
可以使用命令：npm install @fontsource/roboto。
如何修改src/index.jsx以引入按钮组件？
在src/index.jsx中引入Stack和Button组件，并创建按钮布局。
如何运行项目并查看效果？
在终端运行命令：pnpm run dev，然后在浏览器中打开http://localhost:5173/。
➡️
