从零搭建React框架--第一章:create-react-app、antd、less

目录

引言
第一章:项目创建、antd、less
第二章:路由拦截、路由嵌套
第三章:状态管理 Redux
第四章:网络请求、代理、mockjs
第五章:webpack配置
第六章:Eslint

源码地址

https://github.com/dxn920128/cms-base

创建项目

本次项目使用create-react-app命令进行创建

复制代码
// npm 全局安装create-react-app
npm install -g create-react-app
// 创建项目
npx create-react-app react-demo --typescript
// yarn
yarn create react-app react-demo --template typescript

webpack配置

使用 create-react-app初始化项目后,需要对webpack进行配置。webpack配置包含:less进行antd主题配置、别名、请求代理、mocker数据等等。

1、使用 npm run eject 命令将所有内建的配置暴露出来。

2、本次推荐使用 craco 进行配置。

复制代码
npm install -D @craco/craco  @babel/plugin-proposal-decorators babel-plugin-import craco-less 
npm install antd

1、修改package.json启动项。

复制代码
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

2、创建craco.config.js并进行配置

复制代码
const CracoLessPlugin = require('craco-less')
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,//引入less
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true //js修改主题样式
          }
        }
      }
    }
  ],
  babel: {
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }], //装饰器
      [
        'import',//按需引入antd 样式
        {
          'libraryName': 'antd',
          'libraryDirectory': 'es',
          'style': true
        }
      ]
    ]
  },
};

3、定义antd全局样式,在创建 index.less文件

src/assets/style/index.less

复制代码
@import "~antd/dist/antd.less";

@primary-color: #1890ff; //主题色
@border-radius-base: 2px;
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@layout-header-background: #ffffff;
@layout-body-background: #ffffff;

@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影

4、全局引入index.less

复制代码
import React from 'react'
import ReactDOM from 'react-dom'
import reportWebVitals from './reportWebVitals'
import { Provider } from 'react-redux'
import store from './store/index'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/lib/locale/zh_CN'
import AppRouter from './pages/frame/appRouter'
import './assets/style/index.less'

ReactDOM.render(
  <ConfigProvider locale={zhCN}>
    <Provider store={store}>
      <AppRouter />
    </Provider>
  </ConfigProvider>,
  document.getElementById('root')
)

最后编辑于:2025-06-15 11:02:55
© 著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
滴滴滴嘟嘟嘟.7 分钟前
嵌入式Linux驱动开发:蜂鸣器驱动
linux·运维·驱动开发
hit56实验室11 分钟前
腾讯云的运维笔记——从yum的安装与更新源开始
运维·笔记·腾讯云
麦麦大数据1 小时前
vue+Django 双推荐算法旅游大数据可视化系统Echarts mysql数据库 带爬虫
数据库·vue.js·django·可视化·推荐算法·百度地图·旅游景点
成都极云科技1 小时前
裸金属服务器与虚拟机、物理机的核心差异是什么?
运维·服务器·数据库
我命由我123453 小时前
Word - Word 查找文本中的特定内容
运维·经验分享·笔记·word·运维开发·文档·文本
IDC02_FEIYA3 小时前
服务器托管多少钱一年?服务器托管收费标准
运维·服务器
不吃香菜的蟹老板3 小时前
随手小记:elementUI的勾选框使用的坑
vue.js
Sadsvit3 小时前
Ansible 自动化运维工具:介绍与完整部署(RHEL 9)
linux·运维·centos·自动化·ansible
想起你的日子3 小时前
Vue2+Element 初学
前端·javascript·vue.js
一只爱撸猫的程序猿3 小时前
做一个「运维知识库 + 多模态检索问答」的案例
spring boot·aigc·ai编程