本文主要是介绍手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
通过这篇文章你可以学到
- 如何使用使用 webpack 搭建项目
- 如何在 webpack中集成 typescript
- 如何在 webpack 中集成 React Router 和 Redux
- 如何使用 React 的组件库 Ant Design
- 如何在项目中集成 eslint 和 prettier 保证代码质量
- 如何为团队开发专属的项目模板
环境依赖版本
node
:v18.13.0npm -vvite
:^4.4.5React
:^18.2.0typescript
:^5.0.2Redux
:^4.2.1React-router
:^6.15.0"Ant-design
:^5.8.3eslint
:^8.47.0prettier
:^3.0.1normalize.css
:^8.0.1npm
:9.8.1
快速查看
- 仓库地址
1.初始化项目
按步骤提示初始化:
- 使用 React-cli 创建命令
npm init vite@latest xxxx(项目名) --template react-ts//示例:
npm init vite@latest vite-React-ts-Redux --template react-ts
注意:我们这里要把命令中的项目名改成自己将要创建的项目名
- 选择一个框架(react)
? Select a framework: » - Use arrow-keys. Return to submit.VanillaVue
> ReactPreactLitSvelteSolidQwikOthers
- 使用 typescript
? Select a variant: » - Use arrow-keys. Return to submit.
> TypeScriptTypeScript + SWCJavaScriptJavaScript + SWC
- 启动项目
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.配置别名
- 给
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 文件夹}}
})
- 给
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
使用
- 安装完成后,我们需要创建
.prettierrc
文件,并且配置一些我们项目所需要的格式
{"useTabs": false,"tabWidth": 2,"printWidth": 80,"singleQuote": true,"trailingComma": "none","semi": false,"endOfLine": "lf"
}
-
配置一个忽略文件 不让prettier格式化
我们需要创建完成
.prettierrc
文件创建后,我们还需创建.prettierignore
文件,文件的作用是声明在项目中不需要prettier格式化的文件。
/build/*
.local
.output.js
.eslintrc.js
.editorconfig
/node_modules/****/*.svg
**/*.sh/public/*
-
在
package.json
中配置prettier的运行命令在script字段中添加配置项: “prettier”:“prettier --write .”
只要我们在控制台运行npm run prettier 即可把所有文件使用prettier格式化
"scripts": {"dev": "vite","build": "tsc && vite build","preview": "vite preview","prettier": "prettier --write .",},
-
在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
使用
- 声明一个ts组件,来匹配我们的路由。首先我们需要在项目的
src
文件夹中创建views
文件夹,然后在views
文件夹中创建home
文件和index.tsx
文件,在home
文件夹中创建Component
文件夹,在Component
文件夹里创建Home.tsx
- 配置我们的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)
- 配置我们的home页index出口文件
index.tsx
import Home from './Component/Home'export default Home
-
然后我们需要在项目的
src
文件夹中创建route
文件夹,然后在route
文件夹中建立index.tsx
文件。 -
因为我们要引入组件,所有我们需要创建tsx而不是ts文件。
-
配置我们的路由文件
//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
- 在我们的
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
使用
- 声明一个ts组件,来存放我们的数据。首先我们需要在项目的
src
文件夹中创建store
文件夹,然后在store
文件夹中创建index.ts
文件,
- 配置我们的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
- 然后配置我们的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
- 在组件中使用我们的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打造企业级前端项目的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!