?項目包含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 得到如下效果?

以上就是今天要講的內容，本文僅僅簡單介紹了文件目錄的創建 前后臺依賴的安裝。如有問題請留言。