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

项目包含5个模块

1.首页 (聊天主页)

2.注册

3.登录

4.个人资料

5.设置主题

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

bash 复制代码
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端

c 复制代码
npm i bcryptjs cloudinary cookie-parser cors dotenv express jsonwebtoken mongoose socket.io

npm i nodemon -D

最终package.json如下图

2.web端

代码如下(示例):

c 复制代码
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 内容如下

javascript 复制代码
/** @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配置情况

javascript 复制代码
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内容删除 替换为

javascript 复制代码
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 得到如下效果

以上就是今天要讲的内容,本文仅仅简单介绍了文件目录的创建 前后台依赖的安装。如有问题请留言。

相关推荐
水冗水孚14 天前
express使用node-schedule实现定时任务,比如定时清理文件夹中的文件写入日志功能
javascript·node.js·express
羽沢3114 天前
nodejs中Express框架的基本使用
express
gongzemin16 天前
前端根据文件流渲染 PDF 和 DOCX 文件
前端·vue.js·express
十月ooOO16 天前
Express.js 在 ts 模式下运行 npm run dev 的时候无法找到引入项的原因
javascript·npm·express
风清云淡_A16 天前
【mongoose8.x】mongoose8.x入门教程(二):express中mongoose的链接
express
水冗水孚19 天前
面试官:你是前端你了解oss吗?我反手写了一个react+express+minio实现oss文件存储功能
react.js·node.js·express
snpgroupcn21 天前
泰国零售巨头 CJ Express 借助 SAP 内存数据库实现高效数据管理
数据库·express·零售
水冗水孚21 天前
使用nodejs的express框架实现大文件上传的功能,附完整前后端github代码
javascript·node.js·express
程序猿小D23 天前
第29节 Node.js Query Strings
node.js·vim·express
程序猿小D24 天前
第24节 Node.js 连接 MongoDB
数据库·mongodb·npm·node.js·编辑器·vim·express