金属质感 网站,网站推广销售腾讯会员被告怎么办,网站建站建设联系电话,做网站被坑项目包含5个模块
1.首页 (聊天主页)
2.注册
3.登录
4.个人资料
5.设置主题
一、配置开发环境 建立项目文件夹
mkdir chat-project
cd chat-project
mkdir server mkdir webcd server npm init
cd web npm create vitelatest 创建前端项目时我们选择javascrip… 项目包含5个模块
1.首页 (聊天主页)
2.注册
3.登录
4.个人资料
5.设置主题
一、配置开发环境 建立项目文件夹
mkdir chat-project
cd chat-project
mkdir server mkdir webcd server npm init
cd web npm create vitelatest 创建前端项目时我们选择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 tailwindcss3.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 classNamebtnButton/buttonbutton classNamebtn btn-neutralNeutral/buttonbutton classNamebtn btn-primaryPrimary/buttonbutton classNamebtn btn-secondarySecondary/buttonbutton classNamebtn btn-accentAccent/buttonbutton classNamebtn btn-ghostGhost/buttonbutton classNamebtn btn-linkLink/buttonh1 classNametext-blue-500测试内容/h1/)
}export default App在web目录下执行 npm run dev 得到如下效果 以上就是今天要讲的内容本文仅仅简单介绍了文件目录的创建 前后台依赖的安装。如有问题请留言。
