# reactvjs

**Repository Path**: keyvoice/reactvjs

## Basic Information

- **Project Name**: reactvjs
- **Description**: React+Vite+JavaScript
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-23
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + Vite

* 创建项目
```
# 执行命令，生成React + Vite项目，默认JavaScript
pnpm create vite@latest reactvjs -- --template react
或者
npm create vite@latest reactvjs -- --template react
```

* 安装tailwindcss
```
pnpm install -D tailwindcss @tailwindcss/vite
```

* Vite 核心配置
```javascript
// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd())

  return {
    plugins: [
        react(),
        tailwindcss(), // 引入 tailwindcss
    ],
    resolve: {
      alias: {
        // 配置 @ 指向 src 目录，纯 JS 项目无需安装 @types/node 即可直接使用
        '@': path.resolve(__dirname, './src')
      }
    },
    server: {
      port: 3000,
      open: true,
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL || 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    build: {
      outDir: 'dist',
      rollupOptions: {
        output: {
          entryFileNames: 'assets/[name].[hash].js',
          chunkFileNames: 'assets/[name].[hash].js',
          assetFileNames: 'assets/[name].[hash].[ext]'
        }
      }
    }
  }
})
```

* index.css配置tailwindcss
```css
/* src/index.css */
@import "tailwindcss";
```

* 项目结构
```
reactvjs
  ├── public
  |   └── favicon.svg
  ├── src
  |   ├── api
  |   ├── assets
  |   |   └── logo.svg
  |   ├── components
  |   ├── pages
  |   ├── router
  |   ├── store
  |   ├── utils
  |   ├── App.jsx
  |   ├── index.css
  |   └── main.jsx
  ├── .env
  ├── .env.development
  ├── .env.production
  ├── .gitignore
  ├── eslint.config.js
  ├── index.html
  ├── package.json
  ├── pnpm-lock.yaml
  ├── README.md
  └── vite.config.js
```

* 安装依赖
```
pnpm i / pnpm install
```

* 命令运行项目
```
pnpm run dev
pnpm run build
pnpm run preview
pnpm run start

或者

pnpm dev
pnpm build
```