- 博客(120)
- 收藏
- 关注
RSS订阅
原创 Uniapp uni-app学习与快速上手
uni，读you ni，是统一的意思。Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位，致力于推进HTML5发展构建，HTML5生态。2012年，DCloud开始研发小程序技术，优化webview的功能和性能，推出了HBuilder可视化开发工具。2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。
2023-06-15 16:33:14
2786
原创 前端前沿web 3d可视化技术 ThreeJS学习全记录
就像前端需要webpack来进行模块化开发 three JS也需要一个对应的工具，他就是PARCEL https://www.parceljs.cn/随着浏览器性能和网络带宽的提升 使得3D技术不再是桌面的专利 打破传统平面展示模式。Threejs封装了WebGL的底层细节，可拓展性强，有很多开源的插件和工具，更易上手。就像2G时代文字信息是主要传输媒介 3G时代的图片 4G时代的视频。拷贝项目到本地即可查看文档 案例文件 使用编辑器等。随着硬件性能与技术的提升，未来的前端也一定是3D的。
2023-03-11 22:52:09
7713
2
原创 VUE3的 单文件组件 ＜script setup＞理解与实际上手案例
第一次使用VUE3时，项目中使用的时兼容VUE2引入setup函数的写法，上手很快也容易理解。直到发现官方的源码展示都用了全新的单文件组件写法，意识到这个才是主流。这篇文章记录下学习过程。
2022-11-01 10:49:13
2672
1
原创 从零创建完整的个人项目 （webapck+vue3+element vite+vue3+VantUI）
参考安装node安装vue-cli脚手架npm i -g @vue/cli-init建立项目文件夹执行脚本vue create projectname手动选择需要的插件 vuex、router、babel 、vue版本、Css预处理器 等等配置——项目创建过程已经集成化了 很简单待补全：引入elementUI配置axios与不同环境的访问地址登录环境变量webpack脚本vue.config.js相关配置...
2022-02-15 14:53:31
759
原创 自用快速复习(前端高频常用知识大汇总)前端入门知识树
数组(223查找排序判断遍历定位映射)字符串(3slice substr replace 2 4值索引indexof search索引值charAt charCodeAt)对象(只拷贝基本数据类型和引用的地址-浅 真正实现数组对象的拷贝-深 Object.assign() {…obj}解构 JSON)解构(let [foo, [ , baz], ...arr] = [1, [[2], 3], 4, 5];数组解构对索引可嵌套可省略 let { round:r } = Math;
2021-07-16 10:19:17
649
1
原创 打包的意义 作用等前端概念集合 webpack基础配置等
model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
2024-04-26 11:10:25
218
原创 Vue的图片懒加载 vue-lazyload插件使用
是一种网页性能优化技术，页面加载时仅加载可见区域内的图像，图像只会在用户滚动或浏览到它们时才会被加载，而不是在页面一开始就全部加载。
2024-04-15 16:27:55
174
原创 理解vuecli和nginx启动Vue项目区别
Vue CLI 和 Nginx 在启动 Vue 项目时各自扮演着不同的角色，它们之间存在一些关键的区别。以下是关于这两者的主要差异：总之，Vue CLI 和 Nginx 在启动 Vue 项目时各自扮演着不同的角色。Vue CLI 主要用于本地开发环境的启动和管理，而 Nginx 则用于生产环境的部署和静态资源托管。它们在功能、用途、启动与配置以及实时重新加载与性能优化等方面存在差异。当然 也可以在本地下载Nginx服务器，配置好启动后，通过host文件指向本地代理，访问dist文件的形式实现本地运行
2024-04-12 14:23:06
337
原创 当我们在地址栏输入URL的时候浏览器发生了什么
浏览器缓存 -> 操作系统缓存 -> 路由器缓存 -> DNS缓存 -> 根域名服务器查询。浏览器解析HTML代码 分别渲染DOM树和CSS树 经过回流重绘最终展示。OSI七层模型(应用表示会话传输网络数据链路物理)后端服务器监听特定端口收到后进行对应的逻辑处理。后台代码经过解析封装 对数据库操作等。网络层：IP协议查询Mac地址。应用层：发送 HTTP 请求。传输层：TCP 传输报文。最终返回响应给浏览器。
2024-03-31 13:32:05
296
原创 浏览器页面缓存机制
在响应头由 Expires(服务器返回的过期时间) 和 Cache-Control (优先级更高no-store： 禁用缓存 no-cache：不用强缓存，每次需向服务器验证缓存是否失效) 控制。Chrome会根据本地内存的使用率来决定缓存存放在哪，如果内存使用率很高，放在磁盘里面，内存的使用率很高会暂时放在内存里面。浏览器和和服务器对每个缓存资源先商量一个 “保质期” ，被浏览器缓存的资源在“保质期”内是有效的。如果数据有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。
2024-03-31 12:28:48
272
原创 React入门 学习全记录(适合和我一样有Vue经验想学习react的同学~)
相对于Vue而言，react因为更复杂的JSX语法和社区文档，React项目代码结构相较vue不是太清晰和直观等原因，学习成本比VUE高。但也是前端必会的技术栈。是由Google开发，对java和c的使用者而言，angular的静态检查、依赖注入的特性，以及面向对象的编程风格，使得angular都要更亲切一些。同时，React真正的在拼开发者的JS功底，如果一个开发者对于JS不精通或者熟练，也会在学习Reat时感觉比Vue难。是一款轻量级、渐进式、灵活且易于学习的框架，适合快速构建单页面应用。
2024-03-13 19:00:35
898
原创 Mock.js使用
以前开发流程中，接口比较慢时都是自己写点死数据测试，不够高级~目前在新项目中接触到了mock接口，现在记录学习下：在Vue项目中，可以使用mock来模拟接口，方便进行开发和测试。且正式环境中应该移除mock的配置和依赖，使用真实的接口数据。Mock.js官网地址。
2023-09-11 10:07:22
213
原创 VueQuill 富文本 快速上手开发全记录——附axios小坑 需手动重写axios以支持formdata对象
【代码】VueQuill 富文本 快速上手开发全记录。
2023-03-30 17:09:12
314
1
原创 访问GITHUB太慢修改HOST文件 以及原理是什么
访问GITHUB太慢需要修改windows HOST文件的原理是：本机网络设置的 DNS 服务器解析 Github 相关域名到遭受污染的 IP 地址，这些 IP 地址要么本身无法访问，要么节点过远，从而导致了访问失败或者速度缓慢。修改 HOST 文件可以绕过公共 DNS 解析，直接访问 Github 在韩国、日本等的服务器，从而达到加速访问的目的。hosts 文件路径。
2023-03-11 21:50:56
880
原创 three.js和WEBGL的关系 优劣对比 哪个更流行 在中国更好就业(本文由chatGPT自动生成)
根据GitHub上三个库（BabylonJS、Threejs、LayaboxJS）在2020年12月份到2021年12月份之间新增star数量对比分析结果显示：BabylonJS新增star数量最多（约为5000），其次为Threejs（约为3000），最后为LayaboxJS（约为1000）。Three.js是一种高级的库，它封装了WebGL的底层细节，提供了更简单和友好的接口，以及丰富的功能和示例。WebGL是一种低级的API，可以直接在浏览器中绘制3D图形，但它需要编写很多代码和处理复杂的数学计算。
2023-03-11 19:59:52
3164
原创 Vant 弹出列表多选 输入框下拉选择 (可直接复制使用)
项目要做移动端，部分功能迁移过程中发现，VantUI组件库不支持原Element组件库的部分功能，例如el-select 可以做到输入的同时下拉选择 下拉多选。故需要手动改写，分享记录下代码。
2023-02-20 13:43:41
8252
1
原创 为什么要有websocket 如何使用 伪服务器推 HTTP定时轮询 长轮询 (笔记)
websocket协议同样基于TCP，在HTTP的基础上使用。将HTTP请求超时设置的很大，在较长时间内等待服务器响应，例如百度网盘的扫码登录就是用的这种长轮询机制。为应付网页游戏，网页聊天，网页协同办公等复杂场景，websocket协议应运而生。HTTP1.1基于TCP协议，但只支持同一时间段的单向通信，也就是半双工。以上两种方法本质还是客户端主动请求数据 只能使用扫码等简单场景。TCP是全双工协议，通信两端都可以主动向对方发送数据。随机base64码 用于协议升级转换后的通信验证。
2023-01-31 11:08:01
264
原创 VUE项目添加全局滚动条记录功能
思路：在离开某个路由时 保存当前页面的滚动条高度 再次访问时将滚动条高度重新赋值方式1：尝试使用VueRouter的scrollBehavior()方法调试时发现 在进入无滚动条页面返回有记录值的有滚动条页面时会出现问题。且该方法执行在页面渲染之前，弃用换其他方法。方式2：全局混入activated生命周期VueX：Main.jsAPP.vue或其他根组件
2022-12-07 14:04:27
403
原创 TS学习笔记 类型标签 联合类型 枚举类型 泛型 类型别名
js天生没有编译和类型检查的束缚 灵活好上手 结合项目使用时也可以做到热更新提升开发体验。(需要编译的JAVA以前开发DEBUG很麻烦但现在有了容器编排技术，也可以实现类似效果)TS是JS的超集，添加了类型标注，不能直接在浏览器或Node中运行(Deno可以支持)，其他情况都需要TSC转译为JS后执行。TS可以提升代码的健壮性，可维护性，可扩展性与可读性变量添加类型标注参数添加类型标注可选参数:number){}函数返回值类型标注联合类型类型别名。
2022-11-18 15:37:45
1363
原创 前端面试题个人汇总(精简知识要点 总结话术) / 前端小知识 保持学习 (年终奖年终奖 心心念念年终奖)
ES6++函数、VUE相关、原生JS等各种小知识点 每日学习记录
2022-06-29 10:00:17
370
原创 VUE文件与JS文件的动态引入CSS或其他组件
核心是动态引入的模板字符串import (../styles${url})JS文件中,这里通过接口返回结果判断import { getUserInfo } from '@api/user'getUserInfo({}).then(res => { let url = res.data.sex==1?'/ele-variables.scss':'/ele-variables-teacher.scss' import (`../styles${url}`)})VUE中<
2022-04-24 20:48:10
1869
1
原创 VUE实现自定义指令v-drag与拖拽的实现 + 可用案例代码下载
vue部分<template> <div> <div id="dragTest" style="position: fixed;top: 13%;left: 70%;z-index: 2110; width: 540px;background: #ffffff;box-shadow: 0 4px 8px 0 #eeeeee; border-radius: 4px;left: 20%;top: 20%; width:
2022-03-04 12:07:20
540
1
原创 webpack快速理解上手
webpack 是什么就是前端模块化打包工具把项目资源文件放在一个总的入口文件引入，根据对应的关系合并成一个 bundle.js 。打包后的 index.html 引入 bundle。为什么需要webpack为了加快网页响应速度，将资源打包到一个文件内，需使用webpack按需动态加载资源为了优化性能，提升加载速度，把资源都合并到一个文件内后会发现无法按需加载，所有资源一并加载耗时过长，性能反而降低依赖库关系混乱，难以维护使用webpack有同步和异步两种加载方式，正确配置后，可以进行按
2022-02-23 11:19:48
228
转载 git revert 用法 git版本回退 git回退 git撤回merge分支合并
转载至git revert 用法git revert 撤销 某次操作，此次操作之前和之后的commit和history都会保留，并且把这次撤销作为一次最新的提交* git revert HEAD 撤销前一次 commit* git revert HEAD^ 撤销前前一次 commit* git revert commit （比如：fa042ce57ebbe5bb9c8db709f719cec2c58ee7ff）撤销指定的版本，撤销也会
2022-02-18 10:12:37
2697
原创 vue.use方法与组件注册的理解
一般的组件引入：<template> <div class="answer-wrapper"> <BVnav /> <BVtabs/> </div></template><script>import BVtabs from "@components/tabs/Index";import BVnav from "@components/nav/Index";export default {
2022-02-16 10:01:34
560
原创 VUE的v-for中key的作用
没有key更新视图会全部删除后全部重新渲染。有key值后通过比对，已存在的不需要重新操作以节约性能。且key最好是。元素的唯一ID，不能是数组的index，因为数组有可能在任意地方添加元素，而导致数组index起不到唯一标识的目的，vue依然会全部重新渲染。...
2022-02-08 09:52:36
1267
原创 封装树形数据处理函数
树形数据，每一级都有唯一的标识IDconst tree = [ { title:'动漫', children:[ { title:'那啥空', children:[ {title:'春日野穹'}, {title:'春日野空'}, ], },
2022-02-08 09:51:02
571
原创 vue $set 方法的理解与使用
日常开发中，因需求需要为拿到的后台接口数据添加部分属性以适配前端组件。直接给对象添加属性(类似:let obj={};obj.prop='prop')后，发现并不能触发响应更新。后来看文档发现要通过this.$set 函数动态添加才可用：//错误：obj.check = false//正确：this.$set(obj,'check', false)受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属
2021-12-20 10:59:13
552
原创 富文本Ueditor
官方Wiki中文文档配置项手册各路大神添加链接描述VUE项目引入使用步骤总结(VUE使用模式)：1、下载压缩包官方仓库2、解压到项目static目录中3、项目控制台输入npm i vue-ueditor-wrap4、以以下代码为案例即可使用<template> <div class='race-content'> <vue-ueditor-wrap v-model="write.msg" :config="myCo
2021-11-25 15:41:51
749
原创 VUE组件间传值的方式总结与localStorage + sessionStorage详解+cookie+session+token
1.props 父组件向子组件传值 子组件绑定父组件属性 子组件内部声明使用2.$emit/$on 子组件向父组件传值（通过事件形式） 子组件绑定父组件方法 子组件触发父组件3.vuex 全局传值 可用于同级组件4.EventBus 可用于同级组件4.url传参 route跳转时将参数存在url中供下一页面使用5.$attrs/$listeners6.$parent / $childrenlocalStorage：H5新增的本地存储API，可以理解为浏览器的本地数据库，大小只有5M
2021-11-22 13:50:16
1736
原创 VUE键盘监听 可复用
mounted (){ // 键盘监听 let _this = this; document.onkeydown = function(e) { let key = window.event.keyCode; if (key== 13) { _this.audioOn(!_this.clickShow); }.
2021-11-10 14:18:47
873
转载 Element UI 多选搜索实现拼音匹配
转载，感谢原博主，自己也做个记录。确实好用，增加了对拼音的匹配需要使用 js 拼音库 CnChar ，这个库主要就是做汉字转拼音和汉字笔画数的。使用 npm i cnchar 就可以安装使用啦，详细的使用 CnChar 文档里有介绍。-过滤方法使用 CnChar 提供的 .spell方法可以获取拼音数组。代码：import cnchar from "cnchar"———————————————————————————————————————————— mounted() {
2021-11-08 11:12:33
209
原创 项目理解 + phpstudy
产品线需要新的开发环境phpstudy鼓捣了一番的同时也加深了对前端项目的理解之前只是机械的 装node 在vscode中敲命令 跑项目 并不太明白为什么这么做。实际上，对于webpack打包好的vue项目，无论是Node，或是有php环境(例如phpstudy，只需解析域名到index.html)。其实对于VUE项目来讲都一样，在哪里都能跑以来。就像vscode也只是一个集成开发环境，在内部运行Git，npm命令也和在命令行中没有本质区别，都能跑起来运行。只是Vscode作为集成开发环境
2021-11-02 16:16:48
133
原创 Vue实现锚点滚动 可复用
参数selector是目标DOM的ID值selectorNow是根据ID取得的真实DOM节点，内容如下图goAnchor(selector) { let selectorNow = this.$refs.wordcard[selector].$el; debugger selectorNow.scrollIntoView({ behavior: "smooth", // 平滑过渡 block: "start" // 上边框与视窗顶部.
2021-11-01 14:26:07
299
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人