从零开始用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 得到如下效果

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

相关推荐
Littlewith5 天前
Node.js:Web模块、Express框架
java·开发语言·前端·c++·后端·node.js·express
Fireworkitte5 天前
node.js 为什么要装 express组件
node.js·express
古怪今人10 天前
NodeJS Express 静态文件、中间件、路由案例
中间件·express
congvee14 天前
express学习第2期 - dotenv 加载配置文件
express
年纪轻轻就扛不住16 天前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
搞前端的小菜16 天前
从零实现一个GPT 【React + Express】--- 【4】实现文生图的功能
gpt·react.js·express
叫我菜菜就好16 天前
【node后端】搭建项目(Express+Ts+Typeorm+Mysql一步到位)
mysql·oracle·express
前端小盆友17 天前
从零实现一个GPT 【React + Express】--- 【5】实现网页生成能力
gpt·react.js·express
搞前端的小菜17 天前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
gpt·react.js·express
前端小盆友19 天前
从零实现一个GPT 【React + Express】--- 【4】实现文生图的功能
react.js·chatgpt·express