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

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

news 2025/2/23 22:20:13

项目包含5个模块

1.首页 (聊天主页)

2.注册

3.登录

4.个人资料

5.设置主题

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

mkdir chat-project
cd chat-project
mkdir server && mkdir webcd 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.ionpm 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 得到如下效果