搭建项目需要做哪些初始化工作
- 使用脚手架搭建一个初始项目
- 将不相关的文件、图标删除
- 创建远程仓库并关联
- 创建开发需要的初始目录：
- components：存放公共组件的文件夹，每个组件也有自己对应的文件夹
- utils：存放功能性 js文件的文件夹
- views 或者是 pages 等文件名，这个文件夹用来存放路由级别组件
- 引入 aixos 封装api请求
- 如果需要前端处理跨域，则配置代理请求
- 引入react-router插件，配置路由
- 引入组件库，配置组件库使用
- 引入redux，创建相应文件，在src目录下创建文件夹 redux，再创建一个 store.js 文件
项目打包上线
- 执行package.json 文件中的打包命令，一般为：bulid
- 执行打包命令后，会生成一个 bulid 文件夹。一般交给后端或者运营去部署即可
- 如果想要在本地去运行，可以在本地安装一个插件，命令：
npm i serve -g，这个插件可以在本地创建一个服务器 - 在打包好的文件中打开cmd终端，输入 serve 执行，服务器会根据当前文件目录下的 index.html 页面部署主页
项目技巧
区分组件文件跟功能性文件
- 在react项目中，创建组件的名称规范是大驼峰
- 在react项目中，正常的功能 js 文件和组件文件都是以 .js 结尾不好区分，可以将组件的后缀改成 .jsx
样式模块化
- 如果在项目中，样式采用是 .css 文件，则可以在 文件后缀前加上 .module：
index.module.css - 这时候你在文件中去引入时就可是定义一个变量接收一个对象，在元素上就可以通过 对象.属性名 的方式，访问到你在 css 文件中书写的样式。语法：
import myStyle from '文件夹路径'
// 下面举例在jsx语法中使用场景
// title 就是你在 css 文件中定义的 calss 选择器名称
<div className='myStyle.title'></div>
项目中 前端处理跨域问题
使用代理模式：
-
方法1：
- 在 package.json 文件中的大括号中添加一个属性 'proxy'，语法：
'proxy': '想要代理的请求域名' - 这时候在项目中想要请求数据时候就可以直接使用自己当前的域名地址去请求api，也就是自己当前域名地址加上请求文件的路径
- 这种方式有个特点：就是会先向自己当前域名请求数据是否存在，存在就返回，不存在再向代理的域名请求
- 缺陷：不能同时代理多个域名地址
- 在 package.json 文件中的大括号中添加一个属性 'proxy'，语法：
-
方法2：
- 在src目录下创建一个 setupProxy.js 文件
- 该文件不能使用ES6语法，只能用 commonjs 语法
- http-proxy-middleware 使用该插件进行代理
- 该文件在项目中不需要引入使用，react脚手架会自动找到这个文件加到webpack中
// setupProxy.js 文件内要写的
const proxy = require('http-proxy-middleware') // 这个包脚手架已经帮我们下载好了
module.exports = function(app) {
app.use(
// proxy 选项可以重复配置，代理不同的域名
// 这里就可以自定义前缀，去触发不同的代理，这个前缀要写在端口号的后面，资源的前面
proxy('/api', { // 请求的地址中，存在'/api'，就会触发当前的代理
target: '要访问的真实域名',
changeOrigin: true, // 让服务器查找不到真实的请求域名，默认false
pathRewrite:{'^/api': ''} // 重写请求路径，将'/api'变成=> ''
}),
proxy('/api1', { // 请求的地址中，存在'/api1'，就会触发当前的代理
target: '要访问的真实域名',
changeOrigin: true, // 让服务器查找不到真实的请求域名，默认false
pathRewrite:{'^/api1': ''} // 重写请求路径，将'/api1'变成=> ''
}),
.....
)
}
多级路径刷新页面样式丢失的问题
- public/index.html 中 引入样式时不写 ./ 写 / （常用）
- public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
