使用 vite工具构建项目
1.安装vite构建工具
cnpm i vite create-vite -g
- 使用vite构建项目, 选择react
npm init vite
- 切换到项目根目录, 安装依赖包
cnpm i / npm i / yarn install
- 运行,启动vite项目
npm run dev
使用vite构建vue项目和react项目,配置代理等信息的方式是一样的
在vite.config.js中加入以下代码 (针对react,可全选替换)
可用于请求数据设置代理
再下载个axios来进行请求数据
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { fileURLToPath, URL } from "node:url";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
base: "./",
server: {
host: "localhost",
open: true,
port: 3000,
proxy: {
"/myDouyu": {
target: "http://open.douyucdn.cn/api/RoomApi",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/myDouyu/, ""),
},
},
}
})
vite图片懒加载
官方地址: https://www.npmjs.com/package/react-lazy-load-image-component
// 适用于vite构建的react项目
1, 下载安装懒加载模块
cnpm i react-lazy-load-image-component
2, 在src/assets/目录下放入懒加载占位图 placeholder.gif
3, 在需要使用懒加载的组件中导入懒加载模块和占位图(blur.css虚化样式)
import { LazyLoadImage } from "react-lazy-load-image-component";
import 'react-lazy-load-image-component/src/effects/blur.css';
import placeholder from "@/asset/placeholder.jpg"
4, 在组件rander函数中创建占位图片标签img
var holderImg = <img src={placeholder} >
5, 在组件模板中给需要懒加载的图片替换成LazyLoadImage
<LazyLoadImage
placeholder={holderImg}
alt="图片"
src={item.room_src}
effect="blur"
/>
样式隔离
在react组件中,默认所有的样式文件都是全局作用域,不存在样式隔离
方法一: 根标签选择器限制
如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式
方法二: 使用CSS Modules css模块化
1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替 Home.css
2, 在组件jsx导入样式文件时使用 import styles from ‘./xxx.module.css’ 导入 代替 import ‘./xxx.css’
3, 在组件中需要设置样式的标签上添加class值, className={styles.yyy} 其中yyy指的是css样式中的class值
4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式
一般建议:
自定义组件的样式,自己写的样式使用方法一
第三方导入的组件或样式文件,使用方法二