React
版本
- Node 21.6.0
- Npm 10.2.4
项目
创建
npm init vite 项目名称
- react
- js
- npm i
- npm run dev
依赖
npm i axios # 网络
npm i antd --save # UI
npm i @ant-design/icons
npm i react-router-dom # 路由
npm i sass -D # sass
npm i vite-plugin-html -D # html
环境区分
- package.json
"scripts" : {
"dev": "vite --mode test",
"dev1": "vite --mode production",
"build": "vite build --mode test",
"build1": "vite build --mode production"
}
- package.json 同级
- .env.test
NODE_ENV = "test"
VITE_APP_TITLE = "测试"
VITE_APP_BASE_API = "test"
- .env.production
NODE_ENV = "production"
VITE_APP_TITLE = "生产"
VITE_APP_BASE_API = "production"
- vite.config.js
import { defineConfig,loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from "vite-plugin-html";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) =>{
const env = loadEnv(mode, process.cwd(), "");
return {
plugins: [
react(),
createHtmlPlugin({
inject: {
data: {
title: env.VITE_APP_TITLE,
},
},
}),
],
resolve: {
alias: {
"@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录
},
},
base: "./", // 设置打包路径
server: {
port: 4000, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true, // 允许跨域
// 设置代理,根据我们项目实际情况配置
// proxy: {
// '/api': {
// target: 'http://xxx.xxx.xxx.xxx:8000',
// changeOrigin: true,
// secure: false,
// rewrite: (path) => path.replace('/api/', '/')
// }
// }
},
};
})
- index.html
<title><%= title %></title>
axios
- src/http/index.js
import axios from "axios";
let service = axios.create({
// baseURL: "https://cnodejs.org/api/v1", //相同绝对路径
baseURL:import.meta.env.VITE_APP_BASE_API,
timeout: 100000, //超过这么多时间,则请求终止
headers: {
//请求头携带数据的格式
"Content-Type": "application/json;charset=UTF-8",
// "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
},
});
// 添加请求拦截器(Interceptors)
service.interceptors.request.use(
function (config) {
// 发送请求之前做写什么
let token = localStorage.getItem("token");
// 如果有
if (token) {
// 放在请求头(token跟后端沟通,他需要什么该成什么就可以了)
config.headers.authorization = token;
}
return config;
},
function (error) {
// 请求错误的时候做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response.data;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default service;
- src/http/api.js
import request from "./index";
export async function Ceshi(params) {
return request({
url: "/topics",
method: "GET",
params,
});
}
export async function Ceshi2(data) {
return request({
url: "/Storage/GetStorageLack",
method: "POST",
data,
});
}
- 使用
import {useEffect, useRef } from "react";
import { Ceshi } from "@/http/api.js";
function App() {
const cache = useRef(null);
useEffect(() => {
async function fetchData() {
cache.current = true;
const response = await Ceshi();
console.log(response);
}
if (!cache.current) {
fetchData();
}
}, []);
return (
<>
</>
);
}
antd
- 使用
import { Button } from "antd";
<>
<Button type="primary">Button</Button>
</>
sass
.ddd{
.adsspan{
color: aqua;
}
}
router
- main.jsx
import { HashRouter } from "react-router-dom";
<HashRouter><App></App></HashRouter>
- App.jsx
import { useRoutes,useNavigate } from "react-router-dom";
const navigate = useNavigate()
const GetRoutes = () => {
const routes = useRoutes([
{
path: "/",
element: <Home></Home>,
},
{
path: "/b",
element: <B></B>,
children: [
{
path: "/b/aaaa", // /b 需要加,不加找不到
element: <C></C> ,
},
],
},
{
path: "/*",
exact: true,
element: <div>后台404</div>,
},
]);
return routes;
};
<GetRoutes />
<Button type="primary" onClick={()=> navigate('/b/aaaa')}>Button</Button>
// 在b页面中加
<Outlet></Outlet>
文章来源地址https://www.toymoban.com/news/detail-800705.html
文章来源:https://www.toymoban.com/news/detail-800705.html
到了这里,关于Template -- React的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!