学了两天react的我，用vite+react+ts搭建起了项目
我们要学习或者使用react项目，那么搭建react是必修课，我根据网上查的资料整理以及针对一些场景进行了整理从而来搭建的这个项目，我相信绝对是最小白；也是最基础实用的搭建方法，我也看了很多人的搭建react项目，我个人感觉哈一个字乱；所以才写了这篇文章，希望能对刚学习react的同学们有用。
安装
输入一下命令以后按照步骤选择即可：
- 选择react
- 选择ts；如果你想要用js开发选择js即可
javascript npm create vite
运行
安装依赖运行即可；查看是否可以运行成功
typescript npm install npm run dev
创建文件
在src下面创建以下几个文件
/pages/index.tsx
/router/index.tsx
/store/index.ts
/store/festures
/store/festures/user.ts配置路由
安装：
typescript npm install react-redux react-router-dom
路由配置：
```typescript import React, { lazy } from "react"; import { RouteObject } from 'react-router-dom' const Index = lazy(() => import('../pages/index'))
const Router: RouteObject[] = [ { path: '/', element: } ]
export default Router; ```
app.tsx：
import React, { Suspense } from "react";
import { useRoutes, Link } from 'react-router-dom';
import routes from '../src/router';
function App() {
return
{useRoutes(routes)}
;
};
export default App;main.tsx：
typescript import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from "./App"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render(
index.tsx:
``` // /pages/index.tsx
function index(params:type) { return ('55') }
export default index
```
在配置到这儿的时候，基本上我们在网页上打开就可以看到页面上展示的是55了。
创建pages/home.tsx文件
```typescript
function home(params:type) { return ('home') }
export default home; ```
路由中增加一个页面
typescript { path: '/home', element:
在路由中切换home，就可以得到展示的home文本。这样我么的路由就算是配置完成了
状态管理
安装：
typescript npm install @reduxjs/toolkit
store/index.ts：
```typescript // /store/index.ts import { configureStore } from '@reduxjs/toolkit'; import counterSlice from './festures/homeReducer';
const store = configureStore({ reducer: { user: counterSlice }, }); export type RootState = ReturnType ; export type AppDispatch = typeof store.dispatch; export default store; ```
store/festures/user.ts：
```typescript // /store/festures/user.ts import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import type { RootState } from '../index';
interface CounterState { // 定义初始化状态的类型 value: number } const initialState: CounterState = { // 初始化状态 value: 33, } export const counterSlice = createSlice({ name: 'user', initialState, reducers: { increment: (state) => { state.value += 1 }, decrement: (state) => { state.value -= 1 }, incrementByAmount: (state, action: PayloadAction ) => { state.value += action.payload }, }, })
export const { increment, decrement, incrementByAmount } = counterSlice.actions; export const selectCount = (state: RootState) => state; export default counterSlice.reducer; ```
修改app.tsx
```typescript import React, { Suspense } from "react"; import { useRoutes, Link } from 'react-router-dom'; import routes from '../src/router';
function App() { return
export default App; ```
修改main.tsx
typescript import React from 'react'; import ReactDOM from 'react-dom/client'; import store from './store/index'; import {BrowserRouter} from 'react-router-dom'; import { Provider } from 'react-redux'; import App from "@/App"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render(
获取/修改状态管理：
```typescript // 引入 import { useSelector, useDispatch } from 'react-redux';
// 获取 const counts = useSelector((state:any) => state.user); console.log(counts);
// 修改 const dispatch = useDispatch(); dispatch(increment()) ```
到这儿的时候我们的状态管理就完成了，我们可以通过控制台查看到user文件的数据。
vite.config.ts配置
alias配置：
我们在文件中可以看到，我们引入的时候都是相对路径或者绝对路径；这样的话如果层级多的话可能会出现问题，所以我们需要配置@引入方式
安装@types/node：
typescript npm install @types/node -D
配置：
也可以配置多个别名
```typescript // vite.config.ts resolve: { alias: { '@': path.resolve(__dirname, './src') } },
// tsconfig.json "paths": { "@/":["./src/"] } ```
配置好这两个文件以后，我们在使用@去引入文件的时候就不会报错了，赶紧起来试试吧！
大文件压缩
安装：
typescript npm install vite-plugin-compression -D
vite.config.ts：
typescript // 引入 import viteCompression from 'vite-plugin-compression'; // 使用 viteCompression({ threshold: 1024, // 对大于 1mb 的文件进行压缩 })
环境配置
.env
```javascript
公共环境-主要用于一些标题以及常用文本等
VITEAPPTITLE = 公共环境 ```
.env.development
```javascript
开发环境
VITEAPPNAME = 开发环境 ```
.env.production
```javascript
生产环境
VITEAPP = production VITEAPP_NAME = 生产环境 ```
.env.test
```javascript
测试环境
VITEAPP = test VITEAPP_NAME = 测试环境 ```
注意：
我们原来获取环境变量都是通过process.env方法去获取的，但是在vite中取消了该方法。
方法一：
可以获取
javascript import.meta.env
方法二：
vite中提供的loadEnv进行使用。
```javascript import { defineConfig, loadEnv } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path'; // @types/node import viteCompression from 'vite-plugin-compression';
// https://vitejs.dev/config/ export default ({ mode }) => { let outDir:string = 'dist'; const APPNAME:string = loadEnv(mode, process.cwd()).VITE_APP; const pro = loadEnv(mode, process.cwd()); if (APPNAME === 'test') { // 测试环境 outDir = 'test'; }else if (APPNAME === 'production') { // 生产环境 outDir = 'pro'; }else { outDir = 'dist'; };
return defineConfig({ plugins: [ react(), viteCompression({ threshold: 1024, // 对大于 1mb 的文件进行压缩 }) ], build: { outDir: outDir, }, resolve: { alias: { '@': path.resolve(__dirname, './src') } }, define: { 'process.env': pro }, }) } ```
.gitignore
因为会打包很多个文件，所以这几个文件避免上传。
javascript test pro
跨域配置
typescript server: { port: 3000, // 开发环境启动的端口 host: '0.0.0.0', // open: true, // 项目启动时自动打开浏览器 proxy: { '/api': { target: 'http:xxxxxx', // 当遇到 /api 路径时 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置 // 一般情况下，配置上面两个即可 // secure: false, // 如果是 https 接口，需要配置这个参数 // rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空 } } }
scss
安装：
typescript npm install sass
当你读到这儿的时候，基本上创建项目就基础搭建完毕了。
如果你还想搭建的更完善的话，可以对请求进行封装以及一些常用方法进行封装等等。
这期的内容到这儿就完了，我们下次有机会再见！
如果转载，请说明出处；创作不易，凌晨一点还在写作。