东莞销售网站公司哪家好,怎样推广自己的网站,腾讯云域名续费价格,wordpress媒体库外链一、新建项目并放在码云托管
1、新建项目#xff1a;react ts h5 考虑到这些 用 create-react-app 脚手架来搭建项目。
首先#xff0c;确保你已经安装了 Node.js。如果没有安装#xff0c;请先从官方网站 https://nodejs.org/ 下载并安装 Node.js。打开命令行工具#x…一、新建项目并放在码云托管
1、新建项目react ts h5 考虑到这些 用 create-react-app 脚手架来搭建项目。
首先确保你已经安装了 Node.js。如果没有安装请先从官方网站 https://nodejs.org/ 下载并安装 Node.js。打开命令行工具然后执行以下命令来全局安装 create-react-app 脚手架工具npm install -g create-react-app
接下来在命令行中执行以下命令来创建一个新的 TypeScript React 应用程序npx create-react-app my-react-app --template typescript
其中“my-react-app” 是你的项目名称你可以根据实际情况进行修改。create-react-app 将会自动创建并初始化一个新的 TypeScript React 项目并安装所需的依赖包。这个过程可能会花一些时间。当创建完成后进入项目目录cd my-react-app
最后运行以下命令启动开发服务器以预览你的新项目npm start2、在码云gitee上新建一个仓库
目前为止项目有了仓库有了。现在要做的就是把项目放在gitee上进行托管。
3、在项目对应的命令窗口中依次执行如下命令
git remote add origin 仓库地址
git add .
git commit -m Initial commit
git push -u origin master但是此时很有可能会报错拿着报错信息去百度。
二、写代码
除了我们常见的谷歌浏览器外在火狐浏览器可以用手机扫码在手机上查看效果并且代码修改中保存后会和效果同步。
三、路由
用react-router、安装之后在app.tsx文件中。
import { BrowserRouter as Router, Route, Routes } from react-router-dom;
。。。
return (div idappdiv classNameapp-main style{{ width: ${appMainWidth}px, height: ${appMainHeight}px }}RouterRoutesRoute path/check element{Check /} //Routes/Router/div/div);
。。。四、网络请求接axios
1、安装、配置axios
import axios from axios;const httpService axios.create({baseURL: /api, // 设置API的基本URLtimeout: 10000, // 设置超时时间headers: {Content-Type: application/json,},
});// 添加请求拦截器
httpService.interceptors.request.use(config {// 在发送请求之前做些什么// 可以在这里添加认证信息、loading状态等return config;
}, error {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
httpService.interceptors.response.use(response {// 对响应数据做点什么return response.data;
}, error {// 对响应错误做点什么return Promise.reject(error);
});export default httpService;在写接口的文件中就可以调用这个文件中的axios实例啦
import http from ./indexexport const getCheckList (data: any) {return http({url: ,method: post,data,})
}五、跨域
前端如何解决跨域
可以在webpack的配置文件(webpackDevServer.config.js)中直接配置代理
// proxy is run between before and after webpack-dev-server hooksproxy: {/api: {target: , // 后台服务地址以及端口号ws: true,changeOrigin: true, //是否跨域pathRewrite: { ^/api: / }}},六、项目适配
参考 https://blog.csdn.net/qq_52181663/article/details/134463765?spm1001.2014.3001.5501
