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

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

相关推荐
HWL56792 天前
在本地使用Node.js和Express框架来连接和操作远程数据库
node.js·express
SEO-狼术2 天前
Add-in Express for Microsoft Office
microsoft·express
盛夏绽放11 天前
Node.js 和 Express 面试问题总结
面试·职场和发展·node.js·express
天天进步201516 天前
Node.js中Express框架入门教程
node.js·express
mosen86816 天前
易混淆的CommonJS和ESM(ES Module)及它们区别
javascript·node.js·express
一枚小小程序员哈21 天前
基于Vue + Node能源采购系统的设计与实现/基于express的能源管理系统#node.js
vue.js·node.js·express
一枚小小程序员哈21 天前
基于Vue的个人博客网站的设计与实现/基于node.js的博客系统的设计与实现#express框架、vscode
vue.js·node.js·express
茶茶只知道学习1 个月前
Express中间件和路由及响应方法
中间件·express
计算机毕设定制辅导-无忧学长1 个月前
InfluxDB 与 Node.js 框架:Express 集成方案(二)
node.js·express
啃火龙果的兔子1 个月前
Node.js (Express) + MySQL + Redis构建项目流程
mysql·node.js·express