- 博客(264)
- 收藏
- 关注
RSS订阅原创 vue2中使用require.context批量注册组件
一个webpack的api，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入。
2024-04-27 16:57:59
712
原创 vue中~@和@的区别
其后的任何内容都会作为一个模块请求被解析，即使是相对路径。的指向都是一样的，唯一的区别在于是否添加。可以在任意地方使用，甚至可以引用。，会作为一个模块请求被解析。
2024-04-25 09:40:04
296
1
原创 npx与npm的差异解析
平时安装node模块的时候，经常使用的命令是npm。其实还有另外一个命令，叫做npx。网上的说法都是：npx是npm命令的升级版本，功能非常强大。
2024-04-19 18:20:08
416
原创 基于Vue3+Vite+TS+ESLint+Prettier+Husky+lint-staged+commitlint+stylelint的项目构建
在新版 TypeScript 中，已经不在使用 package.json 根结构中的 types 字段。而是需要在 exprots 中添加 typs 字段。.eslintrc因为是node写的规范，所以遵循commonjs规范，所以是cjs后缀；如果是ESModel规范，则是mjs后缀。git commit 之前就可以 进行暂存区代码的style校验。创建完成后指令：1：进入项目 2：安装依赖 3：运行项目。此时证明ESLint已经配置成功。
2024-04-19 18:15:24
564
原创 全局安装npm，pnpm，vue-cli等，cmd可以使用，但是在vscode中不能使用的问题
全局安装了pnpm，在cmd中使用时没问题的，但是在vscode内置终端是使用pnpm命令就会报错。
2024-04-19 14:11:14
160
原创 vue项目配置git提交规范husky、lint-staged、@commitlint/cli
项目中代码格式以及git message如果不加以约束，可能最终的格式会五花八门，这样很不利于我们的项目合作。所以我们需要使用工具来约束提交代码和信息的格式。
2024-04-19 12:33:40
1341
原创 解决Vue项目中babel不支持JS新语法[链判断运算符?.空值赋值运算符??=空值合并操作符 ??]
和 || 的用法相同，都是前后是值，中间用符号连接，根据前面的值来判断最终是返回前面的值还是后面的值。允许开发人员读取深度嵌套在对象链中的属性值，而不必验证每个引用。当引用为空时，表达式停止计算并返回。虽然浏览器能够认识这些新的运算符，但是项目中使用必须@babel/plugins转化才能使用。的时候，才会将右侧变量的值赋值给左侧变量，其他所有值都不会进行赋值。时，才会返回右侧的值。
2024-04-19 11:36:27
325
原创 JavaScript中三个高阶运算符讲解??、??=、?.并解决Vue项目中babel编译不识别的问题
和 || 的用法相同，都是前后是值，中间用符号连接，根据前面的值来判断最终是返回前面的值还是后面的值。允许开发人员读取深度嵌套在对象链中的属性值，而不必验证每个引用。当引用为空时，表达式停止计算并返回。虽然浏览器能够认识这些新的运算符，但是项目中使用必须@babel/plugins转化才能使用。的时候，才会将右侧变量的值赋值给左侧变量，其他所有值都不会进行赋值。时，才会返回右侧的值。
2024-04-19 11:33:20
345
原创 Vue2老项目配置ESLint和Prettier
接手一个老项目Vue2，由VueCli构建，需要集成一下ESLint和Prettier，保证代码规范。
2024-04-18 15:11:44
788
1
原创 详解项目中的.vscode文件夹有啥用？
生成 setting.json 文件后，在可视化的工作区设置界面，修改的设置都会自动添加到 setting.json 文件中。代码片段有用户级别的，也有项目级别的。用户级，比如你换了台电脑，就可以将自己之前保存的代码片段共享过来，项目级别的就是便于团队成员之间使用了。如果项目中存在 package.json 文件，vscode 就会读取其中的脚本命令，可以方便的将脚本命令配置为任务。，这样分享项目时，也把该项目的 vscode 配置分享出去了，保证了协同工作开发环境的统一性。文件夹，如下图，它是干什么的？
2024-04-17 20:08:27
1242
原创 ES6之Proxy详解
get(target, propKey, receiver) ：拦截对象属性的读取set(target, propKey, value, receiver) ：拦截对象属性的设置返回一个布尔值。has(target, propKey) ：拦截propKey in proxy的操作，返回一个布尔值。deleteProperty(target, propKey) ：拦截delete proxy[propKey]的操作，返回一个布尔值。
2024-04-17 14:21:58
633
原创 学习TypeScrip13（symbol类型）
for in 遍历Object.keys 遍历[symbol1]: '小满',[symbol2]: '二蛋',age: 19,sex: '女',// 1 for in 遍历// 注意在console看key,是不是没有遍历到symbol1// 2 Object.keys 遍历Object.getOwnPropertySymbols拿到具体的symbol 属性，对象中有几个就会拿到几个Reflect.ownKeys可以拿到对象的所有属性。
2024-04-17 13:44:58
552
原创 学习TypeScrip11（类型推论和类型别名type ）
interface可以继承 type 只能通过 & 交叉类型合并type 可以定义 联合类型 和 可以使用一些操作符 interface不行interface 遇到重名的会合并 type 不行。
2024-04-16 15:01:29
215
原创 学习TypeScrip10（枚举类型）
在javaScript中是没有枚举的概念的TS帮我们定义了枚举这个类型使用枚举 通过enum关键字定义我们的枚举。
2024-04-16 14:55:01
317
原创 学习TypeScrip9（元组类型）
如果需要一个固定大小的不同类型值的集合，我们需要使用元组。元组与集合的不同之处在于，元组中的元素类型可以是不同的，而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值，可以把这多个值作为元组返回，而不需要创建额外的类来表示。当赋值或访问一个已知索引的元素时，会得到正确的类型：元组类型还可以支持自定义名称和变为可选的越界元素对于越界的元素他的类型被限制为 联合类型（就是你在元组中定义的类型）如下图
2024-04-16 14:50:27
119
原创 学习TypeScrip8（Class类）
在TypeScript是不允许直接在constructor 定义变量的 需要在constructor上面先声明这样引发了第二个问题你如果了定义了变量不用 也会报错 通常是给个默认值 或者 进行赋值恭喜你已经学会了在class中 如何定义变量ts interface 定义类 使用关键字 implements 后面跟interface的名字多个用逗号隔开 继承还是用extendsasd:stringclass A {super()set () {
2024-04-16 14:46:36
699
原创 学习TypeScrip7（内置对象）
如果我们不指定返回的类型TS是推断不出来返回的是什么类型指定返回的类型函数定义返回promisePromise类型resolve(1)})})当你在使用一些常用的方法的时候，TypeScript 实际上已经帮你做了很多类型判断的工作了而他们的定义文件，则在 TypeScript 核心库的定义文件中。
2024-04-16 09:53:58
136
原创 学习TypeScrip6（类型断言 | 联合类型 | 交叉类型）
在下面的例子中，将 something 断言为 boolean 虽然可以通过编译，但是并没有什么用 并不会影响结果, 因为编译过程中会删除类型断言。是对字面值的断言，与const直接定义常量是有区别的。多种类型的集合，联合对象将具有所联合类型的所有成员。如果是普通类型跟直接const 声明是一样的。语法：值 as 类型 或 值。
2024-04-15 18:10:51
225
原创 学习TypeScrip3（接口和对象类型）
在typescript中，我们定义对象的方式要用关键字interface（接口），我的理解是使用interface来定义一种约束，让数据的结构满足约束的格式。
2024-04-15 17:52:17
108
原创 学习TypeScrip2（Any 类型 和 unknown 顶级类型）
TypeScript 3.0中引入的 unknown 类型也被认为是 top type ，但它更安全。与 any 一样，所有类型都可以分配给unknown。
2024-04-15 17:46:48
281
原创 学习TypeScrip1（基础类型）
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
2024-04-15 17:42:12
639
原创 vue内置组件Transition的详解
会在一个元素或组件进入和离开 DOM 时应用动画。会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。简单地说，就是当元素发生变化，比如消失、显示时，添加动画让它更自然过渡。它是vue内置组件，不需要引入注册就可以直接使用。通过name可以自定义的过渡类名。注意：里面只能有一个根组件，但使用v-if、v-else、v-else-if切换显示是可以的。如果想对列表中的元素设置过渡，可以使用。
2024-04-15 16:31:02
757
原创 Vue3新特性Suspense和Teleport
添加组件的灵活性，原先由于布局、层级等原因【类似按钮和触发弹窗等】，需要拆分到不同位置【不同组件】的相关联操作，也可以更好的封装起来。子组件的加载方式为异步加载 ，或者子组件的setup应返回一个Promise，async关键字为隐性的Promise返回。Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。await将setup隐性添加了一个async的关键字，也就是 Promise的返回。用法非常简单，只需要使用 to 这个属性就可以把组件渲染到想要的位置。
2024-04-15 16:08:10
530
原创 CSS3滤镜（filter）
filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会生成多种的滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现。
2024-04-15 15:31:49
334
原创 Vue-Router4路由传参详解
当props为一个对象，路由参数key和value就定死了。这两种传参方式一样，本文只以声明式举例，编程式跳转的。query传参的特点参数会在路由路径后面。对象，可以根据这个路由信息按需返回参数。只能接收params参数。函数的参数就是当前的。
2024-04-15 11:12:07
551
原创 vue3自定义Hooks实现
官方对自定义 hook 定义：在 Vue 应用的概念中，“组合式函数” (Composables) 是一个利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。其实 Hooks 本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。自定义 Hooks 可以复用代码, 让 setup 中的逻辑更清楚易懂。自定义Hooks是为了处理组件逻辑的一种模式。它可以让我们在不使用组件之间复制粘贴代码的情况下重用状态逻辑。自定义hooks是简单的javaScrpt函数，
2024-04-13 11:24:25
585
原创 vue3中使用reactive定义的变量响应式丢失问题
在Vue 3中，可以使用reactive函数将普通JavaScript对象转换为响应式对象，这样当对象的属性发生变化时，就会自动更新相应的UI。但使用 reactive 时，如果不当使用，可能导致响应性失效，带来一些困扰。这可能让开发者在愉快编码的同时，突然发现某些操作失去了响应性，不明所以。因此，建议在不了解 reactive 失去响应的情况下慎用，而更推荐使用 ref。对使用reactive 函数定义的变量直接赋值（重新分配一个新对象会丢失响应性）// 定义一个响应式变量name: "",
2024-04-13 10:20:21
732
原创 图文并茂带你弄懂物理分辨率、分辨率、物理像素、逻辑像素、dpr、ppi
物理像素(physical pixel)又可以称为设备像素像素和分辨率有关系，如分辨率为 1920x1080 ，宽就有1920个物理像素 高就有1080个物理像素我们来感受一下这些物理像素点，像一个个小格子，一个个小点，看得很清楚再细看每个小点，每一个小像素点都是由三原色RGB组成，显示器再控制明暗程度就可以显示想要的效果图案，从定义上来看，像素是指三原色及其灰度的基本编码。实际的开发是以物理像素为准的吗？这两个手机的宽和高都是一样的，很显然高清屏分辨率4 * 8比标清屏的2 * 4要清晰一些。
2024-04-08 16:32:36
958
原创 移动端软键盘问题
在 IOS 上，输入框（input、textarea 或 富文本）获取焦点，键盘弹起，页面（webview）并没有被压缩，或者说高度（height）没有改变，只是页面（webview）整体往上滚了，且最大滚动高度（scrollTop）为软键盘高度。同样，在 Android 上，输入框获取焦点，键盘弹起，但是页面（webview）高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动，webview本身不能滚动。
2024-04-08 14:06:52
901
原创 在 JavaScript 中获取路径参数
/ 假设URL为 http://example.com/?// 获取参数foo的值，结果为 "1"// 获取参数bar的值，结果为 "2"
2024-04-07 18:50:14
241
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人