- 博客(11)
- 收藏
- 关注
RSS订阅原创 vue3语法糖
语法糖: 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。// 使用defineProps自定义属性,接收父组件传值, 新版本无需导入,直接用。// 从路由模块中导入路由组合式API函数, 调用函数即可获取路由数据。4, 在setup/语法糖中使用组件路由守卫。//在setup/语法糖中调用路由守卫。
2023-06-28 17:31:05
314
1
原创 vite构建vue3项目
---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------
2023-06-28 17:29:36
244
1
原创 vue3图片懒加载模块
3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可。2, 在main.js入口文件中引入图片懒加载模块。1, 安装图片懒加载模块。
2023-06-28 17:28:59
106
1
原创 在react组件中获取DOM元素的三种方式
2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用。1, 在父组件中用ref获取子组件对象, 必须保证子组件是类组件, 函数式组件获取结果是undefined。1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)2, 父组件使用ref获取子组件对象后, 可以对子组件状态数据和函数执行调用和修改。3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用。4, 使用hook语法查找DOM。
2023-06-28 17:25:59
1935
2
原创 React中如何实现样式隔离
2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入 代替 import './xxx.css'1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替 Home.css。如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式。4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式。
2023-06-28 17:19:40
173
1
原创 4.react图片懒加载-webpack
img src={item.room_src} alt="这是一个图片" />2, 在src/assets/目录下放入懒加载占位图 placeholder.gif。5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签。3, 在需要使用懒加载的组件中导入懒加载模块和占位图。4, 在组件rander函数中创建占位图片标签img。// 此模块适用于webpack构建的项目。1, 下载安装懒加载模块。
2023-06-28 17:16:57
71
1
原创 react 懒加载(vite)
官方地址: https://www.npmjs.com/package/react-lazy-load-image-component。2, 在src/assets/目录下放入懒加载占位图 placeholder.gif。3, 在需要使用懒加载的组件中导入懒加载模块和占位图(blur.css虚化样式)5, 在组件模板中给需要懒加载的图片替换成LazyLoadImage。4, 在组件rander函数中创建占位图片标签img。// 适用于vite构建的react项目。1, 下载安装懒加载模块。
2023-06-28 17:16:07
429
1
原创 3.webpack构建react项目配置代理
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)设置项目端口号: node_modules/react-scripts/scripts/start.js。1, 下载安装代理模块。
2023-06-28 17:15:17
91
1
原创 创建react 脚手架 项目
注意: 在使用 create-react-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令。============= 使用 vite工具构建项目 ================1, 安装react代码行工具(脚手架), 基于webpack工具构建项目。2,创建一个react应用程序, my-app是自定义项目名。2, 使用vite构建项目, 选择react。3, 切换到项目根目录, 安装依赖包。
2023-06-28 17:13:50
155
1
原创 vue脚手架安装
如果重装低版本后,执行webpack -v还显示高版本,需要把高版本删了,重装低版本, 删除路径: 输入 npm root -g 执行命令 返回一个从盘符开始的地址,安装的文件在此文件夹中,只需要在我的电脑 搜索框输入即可 ,找到这个路径下的webpack和cli,进行删除。(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。对a.js文件打包, 默认打包在 dist/main.js文件中。
2023-05-25 10:54:48
66
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人