React + UmiJS 项目脚手架搭建

2024-02-06 15:29:23

前言

React 是一个强大的 JavaScript 库，用于构建用户界面。UmiJS 是一个基于 React 的前端构建工具，可以帮助我们快速搭建项目脚手架，提高开发效率。

本文将介绍如何使用 React + UmiJS 构建项目脚手架，包括项目初始化、目录结构、配置、开发和部署等内容。

项目初始化

首先，我们需要安装 Node.js 和 npm。Node.js 是 JavaScript 的运行时环境，npm 是 Node.js 的包管理工具。

安装完成后，打开命令行工具，执行以下命令初始化项目：

npx create-umi-app my-app

其中，my-app 是项目名称，可以根据需要修改。

目录结构

项目初始化完成后，会生成一个名为 my-app 的文件夹。该文件夹包含以下文件和文件夹：

my-app/
  package.json
  README.md
  src/
    App.js
    index.js
  .gitignore
  .prettierrc
  .umirc.js

package.json：项目配置文件，包含项目名称、版本、依赖包等信息。
README.md：项目说明文件。
src/：源代码目录，包含项目的所有源代码。
App.js：项目主组件。
index.js：项目入口文件。
.gitignore：Git 忽略文件。
.prettierrc：Prettier 配置文件。
.umirc.js：UmiJS 配置文件。

配置

UmiJS 配置

UmiJS 配置文件位于 .umirc.js 文件中。我们可以根据需要修改该文件来配置项目。

例如，我们可以修改以下配置：

export default {
  // 路由配置
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/about', component: '@/pages/about' },
  ],
  // 主题配置
  theme: {
    '@primary-color': '#1DA57A',
  },
  // 插件配置
  plugins: [
    // 按需加载组件
    ['umi-plugin-react', {
      antd: true,
    }],
  ],
};