手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目

2024-08-25 18:52
文章标签 项目 打造 手把手 ant 前端 redux frontend eslint react18 ts vite 企业级 prettier 教你用

本文主要是介绍手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

通过这篇文章你可以学到

  • 如何使用使用 webpack 搭建项目
  • 如何在 webpack中集成 typescript
  • 如何在 webpack 中集成 React Router 和 Redux
  • 如何使用 React 的组件库 Ant Design
  • 如何在项目中集成 eslint 和 prettier 保证代码质量
  • 如何为团队开发专属的项目模板

环境依赖版本

  • node：v18.13.0npm -v
  • vite：^4.4.5
  • React：^18.2.0
  • typescript：^5.0.2
  • Redux：^4.2.1
  • React-router：^6.15.0"
  • Ant-design：^5.8.3
  • eslint：^8.47.0
  • prettier：^3.0.1
  • normalize.css：^8.0.1
  • npm:9.8.1

快速查看

  • 仓库地址

1.初始化项目

按步骤提示初始化：

  1. 使用 React-cli 创建命令

npm init vite@latest  xxxx（项目名） --template react-ts//示例：
npm init vite@latest vite-React-ts-Redux --template react-ts

注意：我们这里要把命令中的项目名改成自己将要创建的项目名

  1. 选择一个框架（react）
? Select a framework: » - Use arrow-keys. Return to submit.VanillaVue
>   ReactPreactLitSvelteSolidQwikOthers
  1. 使用 typescript
? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScriptTypeScript + SWCJavaScriptJavaScript + SWC
  1. 启动项目
vite-React-ts-Redux && pnpm install && pnpm run dev

快速初始化（建议使用）：

# pnpm
pnpm init vite@latest project-name --template react-ts# npm 
npm init vite@latest project-name --template react-ts

2.配置别名

  1. 给vite.config.js文件添加路径别名配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path' //导入Path模块// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],// 路径别名resolve: {alias: {'@': path.resolve(__dirname, 'src') // 配置 @ 别名指向 src 文件夹}}
})
  1. 给tsconfig.json文件添加路径别名声明，以便ts识别路径别名
{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"lib": ["ES2020", "DOM", "DOM.Iterable"],"module": "ESNext","skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,// 路径别名"baseUrl": "./src","paths": {"@/*": ["*"]}},"include": ["src"],"references": [{ "path": "./tsconfig.node.json" }]
}

3.重置浏览器默认样式的 CSS 文件，兼容不同平台

安装

安装 normalize.css文件

npm install normalize.css

使用

安装之后 引入到我们的项目中.在我们的main.tsx文件中进行引入

@import 'normalize.css';

代码质量风格的统一

这里我们使用prettier 和 eslint 实现我们的格式化和校验

4.配置prettier

安装

首先我们要在项目中安装 prettier

npm install prettier -D

使用

  1. 安装完成后，我们需要创建.prettierrc文件，并且配置一些我们项目所需要的格式
{"useTabs": false,"tabWidth": 2,"printWidth": 80,"singleQuote": true,"trailingComma": "none","semi": false,"endOfLine": "lf"
}

  1. 配置一个忽略文件 不让prettier格式化

    我们需要创建完成.prettierrc文件创建后，我们还需创建.prettierignore文件，文件的作用是声明在项目中不需要prettier格式化的文件。

/build/*
.local
.output.js
.eslintrc.js
.editorconfig
/node_modules/****/*.svg
**/*.sh/public/*

  1. 在package.json中配置prettier的运行命令

    在script字段中添加配置项： “prettier”:“prettier --write .”

    只要我们在控制台运行npm run prettier 即可把所有文件使用prettier格式化

  "scripts": {"dev": "vite","build": "tsc && vite build","preview": "vite preview","prettier": "prettier --write .",},

  1. 在vscode 配置默认prettier（仅仅针对vscode编辑器）

    vscode 配置默认prettier 快捷键‘ctrl+, ’ 搜索editor default 勾选code fomatter为prettier （要先在vscode下载插件prettier）

5.配置eslint

安装

首先我们要在项目中安装eslint

npm install eslint --save-dev

使用

安装完成后，我们需要创建一个.eslintrc.cjs文件。并且配置一些我们项目所需要的校验

module.exports = {env: {browser: true,es2021: true,node: true},settings: {react: {version: 'detect'}},extends: ['eslint:recommended','plugin:@typescript-eslint/recommended','plugin:react/recommended','plugin:prettier/recommended'],overrides: [{env: {node: true},files: ['.eslintrc.{js,cjs}'],parserOptions: {sourceType: 'script'}}],parser: '@typescript-eslint/parser',parserOptions: {ecmaVersion: 'latest',sourceType: 'module'},plugins: ['@typescript-eslint', 'react'],rules: {'@typescript-eslint/no-var-requires': 'off','@typescript-eslint/no-explicit-any': 'off'}
}```3. 在`package.json`中配置Eslint的运行命令在script字段中添加配置项：  "lint": "eslint ."只要我们在控制台运行npm run lint 即可检测所有文件的格式是否正确```js"scripts": {"dev": "vite","build": "tsc && vite build","preview": "vite preview","prettier": "prettier --write .","lint": "eslint ."},

结合eslint和prettier

安装

npm install eslint-plugin-prettier eslint-config-prettier -D

使用

我们需要在.eslint.js配置 添加插件配置

extends ： "plugin:prettier/recommended"

此时就能成功实现prettier显示报错 并结合eslint

6.配置路由：

安装

 npm install react-router-dom

使用

  1. 声明一个ts组件，来匹配我们的路由。首先我们需要在项目的src文件夹中创建views文件夹，然后在views文件夹中创建home文件和index.tsx文件，在home文件夹中创建Component文件夹，在Component文件夹里创建Home.tsx

image.png

  1. 配置我们的home页组件

Home.tsx

import React, { memo } from 'react'
import type { ReactNode, FC } from 'react'interface IProps {children?: ReactNode
}const Home: FC<IProps> = () => {return <div>我是home页</div>
}export default memo(Home)
  1. 配置我们的home页index出口文件

index.tsx

import Home from './Component/Home'export default Home

  1. 然后我们需要在项目的src文件夹中创建route文件夹，然后在route文件夹中建立index.tsx文件。

  2. 因为我们要引入组件，所有我们需要创建tsx而不是ts文件。

  3. 配置我们的路由文件

//route/index.tsximport React from 'react'
import { createBrowserRouter } from 'react-router-dom'
import { lazy } from 'react'
//引入懒加载的形式:
const Home = lazy(() => import('@/views/home/index.tsx'))const routes = createBrowserRouter([{path: '/',element: <Home />, //(xxx组件)children: [//xxx  多级路由配置]}
])export default routes
  1. 在我们的App.tsx中引入路由，进行使用
//App.tsximport React from 'react'
import { RouterProvider } from 'react-router-dom'
import routes from '@/router'return <RouterProvider router={routes} />
}export default App

7.配置redux

安装

npm install @reduxjs/toolkit

使用

  1. 声明一个ts组件，来存放我们的数据。首先我们需要在项目的src文件夹中创建store文件夹，然后在store文件夹中创建index.ts文件，

image.png

  1. 配置我们的Redux文件

index.ts

import { configureStore } from '@reduxjs/toolkit'
// 初始化数据
const initialState = {name: 'zayyo',}
// Reducer：定义如何更新状态
const rootReducer = (state = initialState, action: any) => {// 根据 action 类型来更新状态// 返回新的状态return state
}
// 创建store
const store = configureStore({reducer: rootReducer
})
export default store
  1. 然后配置我们的App.tsx文件，使得我们整个项目都能使用Redux

App.tsx

import React from 'react'
import { RouterProvider } from 'react-router-dom'
import routes from '@/router'
//引入provide组件进行包裹
import { Provider } from 'react-redux'
import store from './store'function App() {return (//引入provide组件进行包裹<Provider store={store}><RouterProvider router={routes} /></Provider>)
}export default App
  1. 在组件中使用我们的Redux数据
    Home.tsx
import React, { memo } from 'react'
import type { ReactNode, FC } from 'react'
//导入useSelector可以将Redux 的状态集成到 React 组件中，使得组件能够订阅特定的状态，并在状态发生变化时进行更新
import { useSelector } from 'react-redux'interface IProps {children?: ReactNode
}
interface RootState {name: string// 其他属性...
}const Home: FC<IProps> = () => {const data = useSelector((state: RootState) => state.name) // 替换为您的状态属性路径return (<div>我是home页<div>{data}</div></div>)
}export default memo(Home)

8.引入Ant Design组件

安装

安装Ant Design包

$ npm install antd --save

使用

我们在Home。tsx组件中进行使用

import React, { memo } from 'react'
import type { ReactNode, FC } from 'react'
import { useSelector } from 'react-redux'
//引入我们要使用的组件
import { Button } from 'antd'interface IProps {children?: ReactNode
}
interface RootState {name: string// 其他属性...
}const Home: FC<IProps> = () => {const data = useSelector((state: RootState) => state.name) // 替换为您的状态属性路径return (<div>我是home页<div>{data}</div>//使用组件<Button type="primary">Button</Button></div>)
}export default memo(Home)

项目模板地址

传送门

这篇关于手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1106377。

相关文章

用Java打造简易计算器的实现步骤

用Java打造简易计算器的实现步骤

《用Java打造简易计算器的实现步骤》：本文主要介绍如何设计和实现一个简单的Java命令行计算器程序,该程序能够执行基本的数学运算（加、减、乘、除）,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录目标：一、项目概述与功能规划二、代码实现步骤三、测试与优化四、总结与收获总结目标：简单计算器，设计
阅读更多...
Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ
阅读更多...
SpringBoot项目启动后自动加载系统配置的多种实现方式

SpringBoot项目启动后自动加载系统配置的多种实现方式

《SpringBoot项目启动后自动加载系统配置的多种实现方式》：本文主要介绍SpringBoot项目启动后自动加载系统配置的多种实现方式,并通过代码示例讲解的非常详细,对大家的学习或工作有一定的... 目录1. 使用 CommandLineRunner实现方式：2. 使用 ApplicationRunne
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
使用IntelliJ IDEA创建简单的Java Web项目完整步骤

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》：本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.
阅读更多...
Python项目打包部署到服务器的实现

Python项目打包部署到服务器的实现

《Python项目打包部署到服务器的实现》本文主要介绍了PyCharm和Ubuntu服务器部署Python项目,包括打包、上传、安装和设置自启动服务的步骤,具有一定的参考价值,感兴趣的可以了解一下... 目录一、准备工作二、项目打包三、部署到服务器四、设置服务自启动一、准备工作开发环境：本文以PyChar
阅读更多...
多模块的springboot项目发布指定模块的脚本方式

多模块的springboot项目发布指定模块的脚本方式

《多模块的springboot项目发布指定模块的脚本方式》该文章主要介绍了如何在多模块的SpringBoot项目中发布指定模块的脚本,作者原先的脚本会清理并编译所有模块,导致发布时间过长,通过简化脚本... 目录多模块的springboot项目发布指定模块的脚本1、不计成本地全部发布2、指定模块发布总结多模
阅读更多...
SpringBoot项目删除Bean或者不加载Bean的问题解决

SpringBoot项目删除Bean或者不加载Bean的问题解决

《SpringBoot项目删除Bean或者不加载Bean的问题解决》文章介绍了在SpringBoot项目中如何使用@ComponentScan注解和自定义过滤器实现不加载某些Bean的方法,本文通过实... 使用@ComponentScan注解中的@ComponentScan.Filter标记不加载。@C
阅读更多...
javafx 如何将项目打包为 Windows 的可执行文件exe

javafx 如何将项目打包为 Windows 的可执行文件exe

《javafx如何将项目打包为Windows的可执行文件exe》文章介绍了三种将JavaFX项目打包为.exe文件的方法：方法1使用jpackage（适用于JDK14及以上版本）,方法2使用La... 目录方法 1：使用 jpackage（适用于 JDK 14 及更高版本）方法 2：使用 Launch4j（
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2