likes
comments
collection
share

从零实现一个React+Antd5.0后台管理系统-项目初始化

作者站长头像
站长
· 阅读数 8

前言

本文将用react的官方的create-react-app搭建项目基本的脚手架，再通过CSS预编译器sass处理公共的样式，并用craco库来覆盖原有create-react-app的默认配置

搭建脚手架

再次提示，本系统需要node.js版本>=16

使用create-react-app

打开命令行工具，跳到你需要存放项目的文件夹，输入以下命令

npx create-react-app react-antd5-admin

等待安装完毕后显示如下图

从零实现一个React+Antd5.0后台管理系统-项目初始化

然后我们按照指示输入指令

cd react-antd5-admin
npm start

显示如下界面，脚手架搭建成功

从零实现一个React+Antd5.0后台管理系统-项目初始化

但因为脚手架有许多我们用不到的文件和代码，所以我们需要简化一下

简化脚手架

我们关掉命令行，用vscode打开项目，初始文件结构是这样的。

从零实现一个React+Antd5.0后台管理系统-项目初始化

我们现在删去不需要的文件，项目文件结构变成这样。并将App.js后缀改为jsx

从零实现一个React+Antd5.0后台管理系统-项目初始化

然后简化代码

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="React+Antd5后台管理系统"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src/App.jsx

import React from 'react'
​
const App = () => {
  return (
    <div>App</div>
  )
}
​
export default App

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

然后npm start启动项目，页面上显示App字样脚手架就搭建与简化成功

集成CSS预编译器sass

安装和编写公有样式

在终端安装sass

npm install sass -D

在src目录下创建index.scss文件编写公共样式并在index.js中引入

从零实现一个React+Antd5.0后台管理系统-项目初始化

页面编写私有样式

若页面文件需要编写私有样式在同名文件夹下创建xx.module.scss文件

.container{
  width:200px;
  height:200px
}

页面使用时

1.导入样式文件

import style from './xx.module.scss'

2.用style对象去访问样式名

<div className={styles.container}>xxxxx</div>

注意，所有引入的css、scss或其它后缀文件最终打包后同类名可能会存在样式冲突问题，所以需要用CSS Module方案去解决

craco库覆盖create-react-app默认配置

安装依赖

npm install @craco/craco

根目录下创建craco.config.js配置文件

我们这里以修改webpack别名为例

craco.config.js

const path = require('path')
const resolve = (dir) => path.resolve(__dirname, dir)
module.exports = {
  webpack: {
    alias: {
      '@': resolve('src')
    }
  }
}

修改package.json中脚本命令

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

重新npm start启动项目，正常显示即没问题