如何用antd create-react-app快速搭建一个前端项目

最新推荐文章于 2024-09-08 13:32:33 发布

一只划水的程序喵

最新推荐文章于 2024-09-08 13:32:33 发布

阅读量247

点赞数 1

分类专栏：前端小白速成教程文章标签：前端 react.js javascript

本文链接：https://blog.youkuaiyun.com/baidu_39516873/article/details/129038249

版权

前端小白速成教程专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何使用create-react-app创建React项目，接着添加Antd库来实现UI组件。为了自定义配置，它推荐了使用craco替代默认的react-scripts，并展示了如何修改package.json的scripts以及如何配置Antd主题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装react脚手架 create-react-app

npm insall create-react-app  -g

2.用 create-react-app 脚手架搭建项目

yarn create create-react-app my-app 或 npx create-react-app my-app

3.然后进入项目并启动。

cd my-app
yarn start

4.安装 Antd：

yarn add antd

5.修改配置

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案）。

现在我们安装 craco 并修改 package.json 里的 scripts 属性。

$ yarn add @craco/craco

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

eject

你也可以使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。

yarn run eject

6.自定义主题

参考antd 配置主题，通过 ConfigProvider 进行主题配置：

import React from 'react';
import { ConfigProvider } from 'antd';

export default () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#00b96b',
      },
    }}
  >
    <MyApp />
  </ConfigProvider>
);