ReactJS Vite TailwindCSS 样板项目教程
1. 项目的目录结构及介绍
reactjs-vite-tailwindcss-boilerplate/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.tsx
│ ├── index.tsx
│ └── ...
├── .eslintrc.js
├── .prettierrc
├── tsconfig.json
├── vite.config.ts
└── package.json
目录结构介绍
- public/: 存放公共资源,如
index.html
。 - src/: 源代码目录,包含应用的主要代码。
- assets/: 存放静态资源,如图片、字体等。
- components/: 存放React组件。
- App.tsx: 主应用组件。
- index.tsx: 入口文件。
- .eslintrc.js: ESLint配置文件。
- .prettierrc: Prettier配置文件。
- tsconfig.json: TypeScript配置文件。
- vite.config.ts: Vite配置文件。
- package.json: 项目依赖和脚本配置。
2. 项目的启动文件介绍
入口文件
src/index.tsx
是项目的入口文件,负责渲染React应用到DOM中。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
主应用组件
src/App.tsx
是主应用组件,通常包含应用的路由和全局状态管理。
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
3. 项目的配置文件介绍
ESLint配置
.eslintrc.js
文件用于配置ESLint,确保代码风格一致。
module.exports = {
extends: [
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'prettier',
],
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
settings: {
react: {
version: 'detect',
},
},
rules: {
// 自定义规则
},
};
Prettier配置
.prettierrc
文件用于配置Prettier,格式化代码。
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80
}
TypeScript配置
tsconfig.json
文件用于配置TypeScript编译选项。
{
"compilerOptions": {
"target": "esnext",
"lib": ["dom", "esnext"],
"allowJs": true,
"checkJs": true,
"jsx": "react-jsx",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": ["src"]
}
Vite配置
`vite.config