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

本文主要是介绍使用CRA（create-react-app）初始化一个完整的项目环境（该初始化项目已上传到本文章的资源），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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;}
}

这篇关于使用CRA（create-react-app）初始化一个完整的项目环境（该初始化项目已上传到本文章的资源）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---