likes
comments
collection
share

学了两天react的我，用vite+react+ts搭建起了项目

作者站长头像
站长
· 阅读数 66

我们要学习或者使用react项目，那么搭建react是必修课，我根据网上查的资料整理以及针对一些场景进行了整理从而来搭建的这个项目，我相信绝对是最小白；也是最基础实用的搭建方法，我也看了很多人的搭建react项目，我个人感觉哈一个字乱；所以才写了这篇文章，希望能对刚学习react的同学们有用。

安装

输入一下命令以后按照步骤选择即可：

  • 选择react
  • 选择ts；如果你想要用js开发选择js即可
npm create vite

运行

安装依赖运行即可；查看是否可以运行成功

 npm install
 npm run dev

创建文件

在src下面创建以下几个文件

/pages/index.tsx
/router/index.tsx
/store/index.ts
/store/festures
/store/festures/user.ts

配置路由

安装：

npm install react-redux react-router-dom

路由配置：

import React, { lazy } from "react";
import { RouteObject } from 'react-router-dom'
const Index = lazy(() => import('../pages/index'))

const Router: RouteObject[] = [
  {
    path: '/',
    element: <Index />
  }
]

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 <div className="App">
    <Suspense fallback="Loading...">
      <div className="main">
        {useRoutes(routes)}
      </div>
    </Suspense>
  </div>;
};

export default App;

main.tsx：

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(
  <BrowserRouter>
    <App></App>
  </BrowserRouter>
);

index.tsx:

// /pages/index.tsx

function index(params:type) {
  return ('55')
}

export default index

在配置到这儿的时候，基本上我们在网页上打开就可以看到页面上展示的是55了。

创建pages/home.tsx文件


function home(params:type) {
  return ('home')
}

export default home;

路由中增加一个页面

{
    path: '/home',
    element: <Home />,
  },

在路由中切换home，就可以得到展示的home文本。这样我么的路由就算是配置完成了

状态管理

安装：

npm install @reduxjs/toolkit

store/index.ts：

// /store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import counterSlice from './festures/homeReducer';

const store = configureStore({
    reducer: {
        user: counterSlice
    },
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

store/festures/user.ts：

// /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<number>) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export const selectCount = (state: RootState) => state;
export default counterSlice.reducer;

修改app.tsx

import React, { Suspense } from "react";
import { useRoutes, Link } from 'react-router-dom';
import routes from '../src/router';

function App() {
  return <div className="App">
    <Suspense fallback="Loading...">
      <div className="main">
        {useRoutes(routes)}
      </div>
    </Suspense>
  </div>;
};

export default App;

修改main.tsx

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(
  <Provider store={store}>
    <BrowserRouter>
      <App></App>
    </BrowserRouter>
  </Provider>
);

获取/修改状态管理：

// 引入
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：

npm install @types/node -D

配置：

也可以配置多个别名

// vite.config.ts
resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
},

// tsconfig.json
"paths": {
      "@/*":["./src/*"]
}

配置好这两个文件以后，我们在使用@去引入文件的时候就不会报错了，赶紧起来试试吧！

大文件压缩

安装：

npm install vite-plugin-compression -D

vite.config.ts：

// 引入
import viteCompression from 'vite-plugin-compression';
// 使用
viteCompression({
     threshold: 1024, // 对大于 1mb 的文件进行压缩
})

环境配置

.env

# 公共环境-主要用于一些标题以及常用文本等
VITE_APP_TITLE = 公共环境

.env.development

# 开发环境
VITE_APP_NAME = 开发环境

.env.production

# 生产环境
VITE_APP = production
VITE_APP_NAME = 生产环境

.env.test

# 测试环境
VITE_APP = test
VITE_APP_NAME = 测试环境

注意：

我们原来获取环境变量都是通过process.env方法去获取的，但是在vite中取消了该方法。

方法一：

可以获取

import.meta.env

方法二：

vite中提供的loadEnv进行使用。

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

因为会打包很多个文件，所以这几个文件避免上传。

test
pro

跨域配置

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

安装：

npm install sass

当你读到这儿的时候，基本上创建项目就基础搭建完毕了。

如果你还想搭建的更完善的话，可以对请求进行封装以及一些常用方法进行封装等等。

这期的内容到这儿就完了，我们下次有机会再见！

如果转载，请说明出处；创作不易，凌晨一点还在写作。

转载自:https://juejin.cn/post/7268887825639014435
评论
请登录