it网站建设干嘛的,管理咨询收费标准,做网站商机,WordPress初始化主题1. 整理项目结构#xff0c;项目目录结构大致划分如下#xff1a; 2. 安装sass
安装sass开发环境, 注意#xff1a;使用的文件后缀名要用.scssnpm i sass -D3. 安装Ant Design
npm i antd --save
4. 配置基础路由Router#xff08;具体可参考ReactRouter使用详解#x…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.StrictModeProvider 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 ----------------------------------------以下是根据项目需求需要安装对应插件使用------------------------------
插件1EchartExamples - Apache ECharts
npm i echarts1. 主入口
/*** 针对echart进行封装组件后应用*/
import BarEchart from ./components/BarEchartexport default function Home() {return (divdivHome/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-quill2.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// 自己加的类名classNamepublish_quill// 与上方quill.snow.css对应themesnowplaceholder{placeholder || 请输入内容}/)
}export default Tinymce;style.scss代码如下.publish_quill {.ql-editor {min-height: 300px;}
}
