用Vite从零到一创建React+ts项目

方式一：使用create-react-app命令创建项目

1、使用以下命令初始化一个空的npm 项目

npm init -y 

2、输入以下命令安装React

npm i create-react-app

ps:如果失败的话尝试（1：使用管理员身份执行命令（2：切换镜像重试

3、输入以下命令创建项目

create-react-app 项目文件夹名称 --template typescript//如果不想用ts  --template typescript 可以不加

4、然后根据终端界面上的提示命令就可以打开项目了

接下来就是一些配置、路由、网络封装什么的。

方法二：使用vite创建项目(简单快捷)

1、执行以下命令

npm create vite 项目文件夹名称

选择自己想要的一些框架和配置

2、根据提示执行对应命令就可以打开项目了

接下来就是一些配置、路由、网络封装什么的。

关于配置

1、打开vite官网进行vite的相关一些配置 配置 Vite | Vite 官方中文文档

(1 配置路径别名 需要安装path

npm i @types/node --save-dev

 在vite.config.ts 引入path加上下面的代码片段

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import {resolve} from "path";
export default defineConfig({plugins: [react()],resolve:{alias:{"@":resolve(__dirname,'src')}}
})

同时在tsconfig.json 让IDE能识别这个别名

  "compilerOptions": {"paths": {"@/*":["./src/*"]}},

2、执行下列命令安装less 

npm install less

然后在vite.config.ts中进行相关配置

export default defineConfig({plugins: [react()],resolve: {alias: {'@': resolve(__dirname,'src')}},css: {preprocessorOptions: {less: {javascriptEnabled: true,}}}

3、不同环境打包后端接口地址不同相关配置

（1 在你的项目根目录中创建 .env.development 和 .env.production 文件，分别用于开发环境和生产环境的配置。

// .env.developmentVITE_API_URL=http://localhost:3000/api

 

// .env.productionVITE_API_URL=https://example.com/api

（2 修改网络封装请求中的baseUrl改成

const apiUrl = import.meta.env.VITE_API_URL as string;

 （3 在 package.json 的 scripts 中添加如下命令

{"scripts": {"dev": "vite --mode development","build": "vite --mode production"}
}

关于路由

1、执行下列命令安装router

npm i react-router-dom@6

（1 在src文件目录下创建router文件夹 

然后在router文件夹下创建index.tsx文件

/src/router/index.tsx

import type { RouteObject,} from 'react-router-dom';
import { Navigate } from "react-router-dom";
import { lazy } from 'react';const Home = lazy(() => import('@/pages/Home'));
const NotFound = lazy(() => import('@/pages/NotFound'));//使用路由懒加载优化提升const routes: RouteObject[] = [{path: "/",element: <Navigate to="/home" />,},{path: '/404',element: <NotFound />,},{path: '/home',element: <Home />,// children: [//     {//         index : true,//         element: <Home />//     },//     {//         path: "/about",//         element: <About />,//         children: [//             { index : true, element: <AboutIndex />},//             { path : "/about/:id", element :<AboutList />}//         ]//     },//     {//         path: "/bussiness",//         element: <Bussiness />,//     }// ]},
];export default routes;

（2 在scr/App.tsx文件中加入

import React from 'react';
import './App.css';
import { useRoutes } from 'react-router';
import routes from './route';function App() {return (<div className="App">{useRoutes(routes)}</div>);
}export default App;

（3 在scr/main.tsx文件中配置路由模式

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>
);

关于网络请求封装

1、先安装Axios库

npm install axios @types/axios

（1 在src目录下创建apis文件夹接着创建api.tsx文件夹 用于封装网络请求逻辑

import axios from 'axios';
import {baseInfo} from "../common/config";
import {getToken,removeToken,} from "../common/storage";
export function requestAdmin(config){let Token = getToken();if(Token){config.headers={...config.headers,'Token' : `${Token}`,'Authorization' : `token`,}}const instance = axios.create({baseURL:"",headers:{...config.headers},timeout:100000});// axios请求拦截器 请求instance.interceptors.request.use(config=>{return config;},err=>{console.log(err);})// axios响应拦截器 数据返回instance.interceptors.response.use(res=>{let {code,message} = res.data;//判断用户登录的token是否过期做某些操作if(code === ...){}return res;},err=>{console.log(err);})return instance(config);
}

（2 接口统一封装

//引用axios封装函数
import {requestAdmin} from "@/network/request";/*** 登录* @param data*/
export function doLogin(data:any){return requestAdmin({url:"",data,method:"post"})
}

 （3 使用

//引入network的网络请求接口
import { requestLogin } from "@/network/v1/login/index"
interface InitProps{}
const Login:FC<InitProps> = (props:InitProps)=>{
const onLogin = (values: any) => {let data = {};requestLogin(data).then((res: resInterface) => {let { code, data,message } = res.data;if (code === 200) {showSuccess('登录成功');setToken(data.token);setTimeout(_ =>{setLoading(false)},1000)} else {showError(`${message}`);setLoading(false)}}).catch((err:any) => {console.log(err);})};return (<React.Fragment><Button onClick={onLogin}>去登录</Button></React.Fragment>)
}export default Login;

关于UI框架配置

这里可以自行选择适合自己的框架类似于antd、Material UI...等

这里我选的是移动端Material UI 官方文档 Installation - Material UI

（1 先安装框架

npm install @mui/material @emotion/react @emotion/styled

（2 引入框架与使用（按需引入）

import { useState } from 'react';
import { Button } from '@mui/material';import Container from '@mui/material/Container';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';function Home() {const [count, setCount] = useState(0);const Item = styled(Paper)(({ theme }) => ({backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',...theme.typography.body2,padding: theme.spacing(1),textAlign: 'center',color: theme.palette.text.secondary,}));return (<Container fixed><Box sx={{ flexGrow: 1 }}><Grid container spacing={2}><Grid item xs={12}><Item>banner区域</Item></Grid><Grid item xs={12}><Item>广告区域</Item></Grid><Grid item xs={4}><Item>xs=4</Item></Grid><Grid item xs={8}><Item>xs=8</Item></Grid></Grid></Box></Container>);
}export default Home;

以上就是所有内容，感谢阅读。