- 博客(34)
- 收藏
- 关注
RSS订阅原创 vite构建vue3项目
---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------
2023-07-27 15:37:13
115
原创 Hooks
/ 第二个参数是一个数组,可选, 数组中是状态名, 指定那些状态值更新会触发回调函数。// useEffect() 这个函数可以用来模拟组件的生命周期函数, 他有两个参数,// 如果第二个参数是空数组, 则只在初始化时调用,状态更新时不会调用。// 使函数式组件拥有组件状态和生命周期功能, 避免this指向问题, 提高运行效率。// 如果第二个参数数组中有状态名, 则只会在数组中的状态更新时调用。// 如果不加第二个参数, 初始化时调用, 任何状态更新都会调用。3, 在组件模板中, 直接调用状态名即可。
2023-07-03 11:41:33
81
原创 React 高阶组件
/一,高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组件, 而是一个函数, 这个函数接受一个react组件作为参数,并返回一个新组件, 实现了对原有组件的增强和优化, 可以对原有组件中的state, props和逻辑执行增删改操作, 一般用于代码重用和组件增强优化。// 四,高阶组件的渲染劫持: 通过高阶组件把原始组件的模板进行修改和替换。5, 在导出组件时,使用高阶组件处理之后,再导出。
2023-07-03 11:40:54
120
原创 React路由切换动画
Switch 组件要设置location属性为路由信息的props.location, 保证路由跳转组件的key和CSSTransition的key一致。4, 路由组件中没有路由信息location.pathname, 需要使用withRouter导入。2, 在路由配置文件/src/router/index.js中导入动画组件。3, 在路由组件模板中,用动画组件包裹路由组件。5, 在组件的css文件中写路由切换动画过程。/* 入场动画过程 *//* 出场动画过程 */
2023-07-03 11:36:46
91
原创 React 过渡效果
2, 需要在index.js中关闭严格模式, 删除 <React.StrictMode>3, enter-active和exit-active中要写过渡结束状态才有效。注意: 1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒。3, 在需要过渡的标签外层添加CSSTranstion组件。4, 在组建的css中通过class设置入场和出场动画。1, 在react工程中下载安装过渡动画模块。2, 在需要执行过渡的组件中导入动画模块。
2023-07-03 11:36:02
34
原创 React路由6.4配置
4, 在入口文件 src/main.jsx中,从路由模块导入工具组件RouterProvider 和路由对象, 并渲染到根标签root。2, 创建路由文件src/router/index.jsx, 导入根组件和需要路由跳转的组件。// 路由重定向, 借助Navigate组件跳转。7, 在需要跳转的页面, 从路由模块导入工具组件 NavLink。5, 在app.jsx根组件中导入路由出口组件 Outlet。6, 在app.jsx根组件中渲染路由出口。8, 使用NavLink组件执行路由跳转。
2023-07-03 10:10:47
74
原创 React路由监听
2, 在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能。1, 在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle。注: 全局路由监听,根组件App中没有路由信息, 需要使用高阶组件withRouter添加路由信息,然后监听。注: 局部监听只能监听此组件离开时的路由, 类似于vue中beforeRouteLeave() 路由守卫。1, 在app.js中从路由模块导入withRouter。
2023-07-03 10:10:14
466
原创 React路由跳转与传值
路由控制跳转的组件中(一般是views目录下的页面组件),props会自动添加以下三个字段, (根组件和components中的组件没有路由信息)接收 {this.props.location.data && this.props.location.data.name}<Link to={"/user/"+name}>动态路由(友好url)传值</Link><Link to="/user">跳转个人中心</Link> <br/>react路由传值方式2: 动态路由(友好url)传值。
2023-07-03 10:09:34
146
原创 React路由6.3+hooks配置
注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息, 可以在组件中从路由模块导出useLocation和useNavigate函数以实现路由相关功能。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。5, 在app.js中导入路由组件。
2023-07-03 10:07:54
44
原创 React路由6.0配置
注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息, 可以在组件中从路由模块导出useLocation和useNavigate函数以实现路由相关功能。2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。5, 在app.js中导入路由组件。
2023-07-03 10:06:51
69
原创 1.React 路由5.0配置
{/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件。3, 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route。(注: 哈希模式用HashRouter 历史模式用BrowserRouter)7, 在需要跳转的页面, 从路由模块导入工具组件 Link。6, 在根组件app模板中添加路由组件,即路由出口。4, 创建路由组件,配置路由, 并导出。
2023-07-03 10:03:43
33
原创 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:43:01
33
原创 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:42:16
71
原创 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:41:36
111
1
原创 webpack构建react项目配置代理
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆。设置项目端口号: node_modules/react-scripts/scripts/start.js。1, 下载安装代理模块。
2023-06-28 17:39:22
39
1
原创 vite构建react项目配置代理
在vite.config.js中加入以下代码 (针对react,可全选替换)使用vite构建vue项目和react项目,配置代理等信息的方式是一样的。
2023-06-28 17:38:15
242
1
原创 小程序实现分享功能
2, 调用API wx.showShareMenu({menus: []}) 开启分享功能,可设置分享好友还是分享朋友圈 shareAppMessage指微信好友分享 shareTimeline 指的是微信朋友圈分享 ,, 点击右上角菜单分享。1, 在js文件中实现onShareAppMessage函数,即可点击右上角菜单分享给微信好友 (页面中默认已实现)在js文件中实现onShareTimeline函数,即可点击右上角菜单分享到微信朋友圈 (需要自己添加)
2023-06-28 17:19:50
2512
2
原创 uniapp语法特点
3, 之前写项目时,用到一个背景音频播放API, 在浏览器测试发现报错, 查看官方文档才发现, 背景音乐播放不支持H5端, 只支持app和小程序 在H5端调用背景音频播放接口无效,并报错: Cannot read property 'apply' of undefined。uniapp中组件的数据和结构使用vue的结构 (data, computed, filter, watch等)uniapp中的数据绑定与渲染, 使用vue中的指令语法(v-model, ref, $emit, slot)
2023-06-28 17:16:04
44
1
原创 Element-plus
1, 安装环境版本要求(此处环境): node: V18.12 npm: V8.12 cnpm: V9.0 yarn: V1.22.19 (或者用yarn安装依赖)2, 按需引入配置后,组件无需再手动引入,会在根目录生成components.d.ts文件,会在此文件中自动引入页面中使用到的组件。4, element-plus 官方在网络差的情况下, 会被路由定向到404页, 一般刷新几下即可恢复。3, icon图标组件组件单独下载安装@element-plus/icons-vue并引入。
2023-06-28 17:15:10
102
1
原创 TypeScript
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。[教程](http://ts.xcatliu.com/introduction/what-is-typescript.html)JavaScript 是静态类型语言, TypeScript是动态类型语言, 它们都是弱类型的, 请见附件: 类型扩展.txt。
2023-06-28 15:03:59
33
1
原创 vue项目打包APP
8, 点击Hbuilder菜单栏的 发行=>原生App-云打包 , 取消ios包选项, 选择Android面板下的 使用公共测试证书 选项 然后点击下方 打包 按钮 , 开始云打包。7, 打开manifest.json文件, 配置AppID, 应用名, 图标, 取消模块配置中的Contact(通讯录), 勾选App常用其他设置 中的 x86。9, 云端打包完成, 会在控制台打印云端包地址, 点击下载到手机上,安装即可。1, 把项目中所有的跨域代理请求的代理地址,改成跨域原地址。
2023-06-28 15:02:42
256
1
原创 vue3图片懒加载
3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可。2, 在main.js入口文件中引入图片懒加载模块。1, 安装图片懒加载模块。
2023-06-08 17:32:04
23
原创 vue3单文件语法糖
语法糖: 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。// 使用defineProps自定义属性,接收父组件传值, 新版本无需导入,直接用。// 从路由模块中导入路由组合式API函数, 调用函数即可获取路由数据。4, 在setup/语法糖中使用组件路由守卫。//在setup/语法糖中调用路由守卫。
2023-06-08 17:31:08
17
原创 Vue关于样式穿透
* ::v-deep() vue3新增 css/less/sass通用样式穿透 *//* :deep() vue3新增 css/less/sass通用样式穿透 *//* ::v-deep css/less/sass通用样式穿透 *//* /deep/ css/less/sass通用样式穿透 */父组件选择器 >>> 子组件选择器 { 子组件样式 }::v-deep 子组件选择器 { 子组件样式 }::v-deep(子组件选择器){ 子组件样式 }/deep/ 子组件选择器 { 子组件样式 }
2023-05-30 19:31:40
285
原创 Element-ui组件库
官网:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/移动端组件库参考: https://www.jianshu.com/p/c3c671787d1d。在根目录的babel.config.js文件中添加plugins字段。最后, 在组件中直接复制官方文档中的组件代码即可显示。然后在组件中直接复制官方文档中的组件代码即可显示。导入所有组件: 在main.js中添加如下代码即可。在mian.js中按需导入需要用到的组件。按需导入组件(推荐)
2023-05-30 19:28:51
89
原创 less&sass
2:使用Vscode 安装 Easy less 插件 写好less文件之后 ctrl +s 保存 就可以直接编译成css 文件 然后在html文件中引入即可。缺点:这种方式是在客户端把less文件编译成css文件,如果less文件体量比较大,会影响页面渲染速度。3.1全局安装 less npm i less -g。1:直接引入less文件,再引入js文件把less编译成css。官网:https://lesscss.com.cn/官网:https://www.sass.hk/
2023-05-30 19:27:38
21
原创 Vue状态管理
4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中。2, 在/src目录下新建文件 /src/store/index.js 导入vuex。-- state在映射到计算属性中之后,当作计算属性来用 -->-- state在映射到计算属性中之后,当作计算属性来用 -->3, 在/src/store/index.js中创建管理仓库, 并导出。// 使用映射函数把状态数据state映射到计算属性中。// 使用映射函数把状态数据state映射到计算属性中。
2023-05-30 19:21:12
11
原创 Vue图片懒加载模块
3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可。2, 在main.js入口文件中引入图片懒加载模块。(安装最新版的会报错 安装指定版本)1, 安装图片懒加载模块。
2023-05-30 19:18:19
17
原创 Vue项目配置代理服务器
此文件基于vue脚手架5.0实现, 把以下代码替换项目中vue.config.js的内容, 修改代理target即可。// 在vue.config.js中的devServer.proxy字段设置代理服务器。// 这个文件是服务器的配置文件, 所以这个文件的修改需要重启项目生效。lintOnSave: true, // 在保存时校验格式。publicPath: '/', // 启动页地址。outputDir: 'dist', // 打包的目录。服务端设置的一些功能。
2023-05-30 19:14:48
78
原创 vue自定义指令
vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。私有 自定义指令 在每个vue组件中，可以在directives节点下声明私有自定义指令。全局 自定义指令 全局共享的自定义指令需要通过 Vue.directive()进行声明。vue指令: 指在vue中定义的标签属性,一般以v-开头,以实现特定功能。元素全屏指令 v-screenfull。字符串整形指令 v-format。元素说明指令 v-tooltip。响应缩放指令 v-resize。拖拽指令 v-drag。
2023-05-30 19:12:58
8
原创 Vue路由总结
前三种(url拼接传值,友好url传值,query对象传值)的方式,都会把数据拼接到url路径上,刷新页面不会丢失,但是由于url长度有限制(不同浏览器对url的长度限制不同),数据量不能太大。// < router - link :to = "'/main/'+msg" > 主页// { path: "/main", component: MainCom,name:"吴亦凡"},// name:"吴亦凡",//命名路由可通过路由名跳转。
2023-05-30 19:12:38
57
原创 跨域解决方案
缺点:客户端请求比较复杂,请求对目标服务器的依赖性较强,如果目标服务器没有使用jsonp函数响应数据,则不能实现jsonp跨域。跨域:一个服务器A 中的页面,去请求另一个服务器B中的数据或者接口,非同源请求就是跨域请求,浏览器默认是禁止的。同源策略:是浏览器于安全考虑,针对ajax请求的一种限制,浏览器会禁止ajax请求非同源的接口和数据。优点:快捷方便,一句代码即可实现跨域,客户端请求数据方便,无需修改代码。2.在客户端请求数据的时候,不再请求跨域地址,而是请求域内的代理地址。
2023-05-30 19:11:18
20
1
原创 webpack 配置
(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中。
2023-05-25 10:10:54
39
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人