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

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

相关推荐
还是鼠鼠11 小时前
Node.js 中间件-中间件的概念与格式
前端·javascript·vscode·node.js·express
nzz_17121417 小时前
puppeteer+express服务端导出页面为pdf
pdf·express
还是鼠鼠1 天前
Node.js Express 处理静态资源
前端·javascript·vscode·node.js·json·express
还是鼠鼠2 天前
Node.js 路由 - 初识 Express 中的路由
前端·vscode·前端框架·npm·node.js·express
还是鼠鼠6 天前
认识 Express.js:Node.js 最流行的 Web 框架
开发语言·前端·javascript·vscode·node.js·json·express
GDAL13 天前
使用 `better-sqlite3` 与 `Express.js` 的最佳实践:是否需要关闭数据库连接?
数据库·sqlite·express
蜗牛快跑12315 天前
使用Turbopack、Biome、Next.js、Express、Tailwind CSS和ShadCN构建全栈Monorepo项目
前端·express·next.js
一袋米扛几楼9815 天前
【概念】Node.js,Express.js MongoDB Mongoose Express-Validator Async Handler
javascript·node.js·express
twins352016 天前
使用Node.js和Express搭建图片缓存服务或应用服务器
node.js·express
GDAL17 天前
使用 `Express.js` 和 `better-sqlite3` 的最佳实践指南
javascript·sqlite·express