当前位置：首页 > article >正文

从零开始用react + tailwindcs + express + mongodb实现一个聊天程序(一)

article 2025/2/23 6:06:57

项目包含5个模块

1.首页 (聊天主页)

2.注册

3.登录

4.个人资料

5.设置主题

一、配置开发环境建立项目文件夹

mkdir chat-project
cd chat-project
mkdir server && mkdir web

cd server npm init
cd web npm create vite@latest

创建前端项目时我们选择javascript （typescript不熟）

根据提示提示 enter 创建后端前后端2个项目把文件夹整理成如下所示

二、安装依赖

1.server端

npm i bcryptjs cloudinary cookie-parser cors dotenv express jsonwebtoken mongoose socket.io

npm i nodemon -D

最终package.json如下图

2.web端

代码如下（示例）：

npm i axios lucide-react react-hot-toast react-router-dom socket.io-client zustand
npm i tailwindcss@3.4.17 postcss autoprefixer daisyui -D

1.配置tailwindcss

在web 文件夹下执行 npx tailwindcss init

tailwind.config.js 内容如下

/** @type {import('tailwindcss').Config} */
import daisyui from "daisyui"
export default  {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    daisyui
  ],
  daisyui: {
    themes:[
      "light",
      "dark",
      "cupcake",
      "bumblebee",
      "emerald",
      "corporate",
      "synthwave",
      "retro",
      "cyberpunk",
      "valentine",
      "halloween",
      "garden",
      "forest",
      "aqua",
      "lofi",
      "pastel",
      "fantasy",
      "wireframe",
      "black",
      "luxury",
      "dracula",
      "cmyk",
      "autumn",
      "business",
      "acid",
      "lemonade",
      "night",
      "coffee",
      "winter",
      "dim",
      "nord",
      "sunset",
    ]
  },
}

vite.config.js配置情况

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import tailwindcss from "tailwindcss"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // 新增 css 配置
  css: {
    postcss: {
      plugins: [tailwindcss()],
    }
  }
})

新建index.css文件并在main.jsx下引入 index.css内容

@tailwind base;

@tailwind components;

@tailwind utilities;

最终前端项目文件结构如下

3.测试依赖安装

把原有的App.jsx内容删除替换为

import { useState } from 'react'
function App() {

  return (
    <>
      <button className="btn">Button</button>
      <button className="btn btn-neutral">Neutral</button>
      <button className="btn btn-primary">Primary</button>
      <button className="btn btn-secondary">Secondary</button>
      <button className="btn btn-accent">Accent</button>
      <button className="btn btn-ghost">Ghost</button>
      <button className="btn btn-link">Link</button>
      <h1 className='text-blue-500'>测试内容</h1>
    </>
  )
}

export default App

在web目录下执行 npm run dev 得到如下效果