使用CRA(create-react-app)初始化一个完整的项目环境(该初始化项目已上传到本文章的资源)

news/2024/11/8 12:14:45/

1. 整理项目结构,项目目录结构大致划分如下:

2. 安装sass

安装sass开发环境, 注意:使用的文件后缀名要用.scssnpm i sass -D

3. 安装Ant Design

npm i antd --save

4. 配置基础路由Router(具体可参考ReactRouter使用详解(react-router-dom))

配置步骤
1. 安装路由包react-router-dom
npm i react-router-dom2. 准备两个基础路由组件Layout和Login3. 在router/index.js文件中引入组件进行路由配置,导出router实例4. 在入口文件中渲染<RouterProvider />,传入router实例

5. 配置@别名路径(具体可参考cra(create-react-app)配置别名路径@ 以及Vscode联想路径配置)

什么是@别名路径?    --->   通过@替代src路径,方便开发过程中的路径查找访问如何配置?一. 针对路径转换,修改webpack别名路径配置craco1. 安装craco工具包npm i @craco/craco -D2. 增加craco.config.js配置文件(根目录下创建,与src同级)// 扩展webpack的配置
const path = require('path')
module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定:使用@表示src文件所在路径'@': path.resolve(__dirname, 'src')}}
}3. 修改scripts命令(package.json内修改scripts)
"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "craco eject"
}二. 针对联想提示,修改VSCode配置jsconfig.json(根目录下创建,与src同级){"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}}
}

6. 安装axios,并封装request请求模块

一. 安装指令:
npm i axios二. 在util文件夹下创建request.js文件,代码如下:// axios的封装处理
import axios from 'axios';// 1. 根域名配置
// 2. 超时时间
// 3. 请求拦截器 / 响应拦截器const requset = axios.create({baseURL: 'http://geek.itheima.net/v1_0',timeout: 5000
})// 添加请求拦截器
// 在请求发送之前,做拦截,可以插入一些自定义的配置[参数的处理]
requset.interceptors.request.use(config => {return config
}, error => {return Promise.reject(error)
})// 添加响应拦截器
requset.interceptors.response.use(response => {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response.data
}, error => {// 超出2xx 范围的状态码都会触发该函数// 对响应错误做点什么return Promise.reject(error)
})export { requset }三. 建议在util下创建index.js文件做一个统一中转工具模块函数,代码如下// 统一中转工具模块函数
import {request} from './request';export {request
}

7. 使用Redux(具体用法参考Redux与React环境准备、实现counter(及传参)、异步获取数据)

1安装redux
npm i react-redux @reduxjs/toolkit

8. 安装normalize.css初始化样式

1. npm i normalize.css2. 然后在根目录下引入'normalize.css',具体代码如下import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import router from './router';
import 'normalize.css';
import './index.scss';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><RouterProvider router={router} /></Provider></React.StrictMode>
);3. index.scss代码如下:html,
body {margin: 0;height: 100%;
}#root {height: 100%;
}

9. 使用gitee管理项目

目的:为了记录每次阶段性的功能,采取git管理我们的项目,方便复习实现步骤
1. 在gitee上初始化一个空项目仓库2. 把远程仓库和本地仓库关联3. 提交代码到远程仓库git add .
git commit -m '完成***功能'
git push

----------------------------------------以下是根据项目需求需要安装对应插件使用------------------------------

插件1:Echart(Examples - Apache ECharts)

npm i echarts1. 主入口
/*** 针对echart进行封装组件后应用*/
import BarEchart from './components/BarEchart'export default function Home() {return (<div><div>Home</div>{/* 需要给宽高才能渲染样式 */}<BarEchart title="三大框架满意度" /><BarEchart title="三大框架使用度" /></div>)
}2. 封装的组件:
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';const BarEchart = ({title}) => {const chartRef = useRef();useEffect(() => {const chartDom = chartRef.current;const myChart = echarts.init(chartDom);let option = {title: {text: title},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};option && myChart.setOption(option);}, [])return (<div ref={chartRef} style={{ width: 500, height: 400 }}></div>)
}export default BarEchart;

插件2:富文本(react-quill)

/*** 1. 封装富文本编辑器使用(安装指令:npm i react-quill@2.0.0-beta.2 --legacy-peer-deps)* 2. 使用严格模式渲染时会出现两个富文本,因此要去掉严格模式*/
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css';
import './style.scss';const Tinymce = ({placeholder}) => {return (<ReactQuill// 自己加的类名className="publish_quill"// 与上方quill.snow.css对应theme="snow"placeholder={placeholder || '请输入内容'}/>)
}export default Tinymce;style.scss代码如下:.publish_quill {.ql-editor {min-height: 300px;}
}


http://www.ppmy.cn/news/1287190.html

相关文章

玩转MYSQL|详细分析mysql-MGR集群搭建

目录 1、简介 2、环境准备 2.1 数据库服务器规划 2.2 安装mysql5.7.20 2.3 设置hostname和ip映射 3、创建复制环境 3.1 服务器host68.cn 3.1.1 配置/etc/my.cnf 3.1.2 服务器host68.cn上建立复制账号&#xff1a; 3.1.3 在mysql服务器host68.cn上安装group replicatio…

概率论基础复习题

一、填空题 二、选择题 答案&#xff1a;B 答案&#xff1a;C 答案&#xff1a;C 答案&#xff1a;D。统计量不含任何未知参数。 答案&#xff1a;A 答案&#xff1a;C 样本均值是总体均值的无偏估计&#xff1b;样本方差是总体方差的无偏估计。 答案&#xff1a;B。统计值是一…

2、gdb常用功能2

1.4、线程 程序避免不了涉及到多线程.常用指令如下. 命令简写形式说明info thread显示当前进程内所有线程信息thread 切换到num线程thread find 寻找regexp在gdb中的idinfo address 结合上述图片理解&#xff0c;第一列的id是gdb内部为线程排序的一个id&#xff0c;第三列中…

matlab导出高清图片,须经修改后放入latex(例如添加文字说明,matlab画图不易操作)

一、背景 我们在写文章时&#xff0c;使用matlab画图后&#xff0c;如果不需要对图片进行额外修改或调整&#xff0c;例如添加文字说明&#xff0c;即可直接从matlab导出eps格式图片&#xff0c;然后插入到latex使用。 通常latex添加图片&#xff0c;是需要eps格式的。 但很…

Cisco模拟器-OSPF路由协议

设计要求用两台双口路由器连接不同IP网段的计算机&#xff0c;并使用OSFP协议发现路由表使不同IP网段的计算机可以相互通信。 通过设计&#xff0c;可以连通IP地址网段不同的局域网&#xff0c;可应用在园区网的互连和互通的实现上。 主要配置步骤 路由器0&#xff1a; Router…

缺失的第一个正数(LeetCode 41)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路4.1 暴力4.2 排序4.3 哈希表4.4 空间复杂度为 O(1) 的哈希表4.5 置换 参考文献 1.问题描述 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级…

Linux、Windows命令行查看服务、进程是否存在、存活

Linux 服务 查看服务状态 systemctl is-active <serviceName>示例 [rootcurry platform]# systemctl is-active mysqld active [rootcurry platform]# systemctl is-active mysqld1 unknown返回状态 active failed unknown 不存在此服务 进程 查看所有进程名称 …

机器学习系列--R语言随机森林进行生存分析(1)

随机森林&#xff08;Breiman 2001a&#xff09;&#xff08;RF&#xff09;是一种非参数统计方法&#xff0c;需要没有关于响应的协变关系的分布假设。RF是一种强大的、非线性的技术&#xff0c;通过拟合一组树来稳定预测精度模型估计。随机生存森林&#xff08;RSF&#xff0…