React实战演练项⽬一需求分析及vite

React实战演练项⽬一需求分析及vite_react搭建项目

React实战演练项⽬一需求分析及项目初始化

需求分析

刚学完React,开始找项目进行上手练习！
react+vite项目搭建

页面组件拆分：

头部：导航tab、搜索框、登录注册
中间：分类导航、轮播图、新人福利、高单价产品导航
课程分类列表、底部内容、登陆提示浮层、登录/注册弹窗

项目搭建

项目git初始化

git init

本地项目设置远程仓库地址

git remote add origin xxxx

通过npm创建react项目
vite创建react项目
使用vscode打开项目，然后安装相关依赖，运行项目

npm install
npm run dev

vite创建react项目
运行成功
删除相关文件，创建首页文件，初始化项目，目录结构

创建首页项目，引入首页
react项目初始化

配置Ant-Design+Unocss

安装antDesign

npm install antd

引入并使用组件
react项目初始化

什么是Unocss

unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。
当然，原子样式也有很多选择，最著名的就是 Tailwind。但由于Tailwind 会生成大量样式定义，会导致全量的 CSS
文件往往体积会多至数 MB，从而有性能上有一些不足。

unocss的优点

它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。
它可以让你的CSS文件更小，因为它只生成你用到的工具类。
它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。
它可以让你的CSS更灵活，因为它支持自定义工具类，变体，指令和图标
它可以让你的CSS更易于维护，因为它避免了样式冲突和重复代码

官网：https://unocss.dev/integrations/vite

安装Unocss

npm install -D unocss

vite配置

再src同级目录下创建unocss.config.tsx，写入：

import { defineConfig, presetAttributify, presetUno } from "unocss";
export default defineConfig({
  presets: [
    presetAttributify(),
    presetUno(),
  ],
});

2.配置vite.config.tsx

import { defineConfig } from 'vite'
import UnoCss from "unocss/vite"
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), UnoCss()],
})

main.tsx中引入virtual:uno.css

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import "virtual:uno.css"

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

搜索其他的样式使⽤

https://www.tailwindcss.cn/

安装自动引入插件

说明：

unplugin-auto-import 这个插件是为了解决在开发中的导入问题，比如经常不清楚相对路径的问题，这个插件就是解决这个问题，这个插件会在根目录生成一个auto-import.d.ts，这个文件会将所有的插件导入到global中，这样在使用的时候直接就可以使用了。

安装

npm i -D unplugin-auto-import

配置文件vite.config.ts

import { defineConfig } from 'vite'
import UnoCss from "unocss/vite"
import react from '@vitejs/plugin-react'
import AutoImport from "unplugin-auto-import/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    UnoCss(),
    AutoImport({
      dts: 'src/types/auto-imports.d.ts',
      imports: ['react'],
      dirs: ['./src/hooks']
    }),
  ],
})