
前端
前端领域
是阿臻
坚信家人是我坚实的后盾
展开
-
前端项目部署,小公司必备,Jenkins 绕道
告别繁重的 Jenkins,远离手动部署的烦恼。本文将介绍一个轻量级的前端部署方案。原创 2025-03-08 16:59:08 · 262 阅读 · 0 评论 -
别用 npm config set registry 设置淘宝镜像了!!!
我相信大部分人都会用这个命令来切换淘宝镜像。我之前也是,我有一个问题那就是我每当想切换镜像的时候都会搜一下淘宝npm镜像。因为我大部分时候都会忘记这个命令是什么样子的。选中我们开发者最爱的淘宝镜像宝贝,然后我们就可以享受高速下载的快感了。当然你也可以选择别的哦。, 你就能看到所有的镜像源列表。这么多选项总有适合你的吧。nrm 还有别的命令,可以自己去探索一下。,妈妈再也不会为我切换镜像担心了。安装好这个大宝贝,然后执行。原创 2024-09-14 17:16:44 · 898 阅读 · 0 评论 -
多人开发小程序设置体验版的痛点
我们可以使用 miniprogram-ci 配合 Jenkins 实现自动化部署,提交完成代码就可以自动部署了。以下是一个 github 的 actions 示例。当然也可以使用别的方式,例如本地提交,Jenkins提交等。on:push:branches: ['feature_*'] # 使用通配符匹配所有feature分支jobs:steps:with:run: |env:run: |then-r 7 \elsefi。原创 2024-09-10 16:59:17 · 1406 阅读 · 1 评论 -
svg 学习记录之 viewBox 属性
首先可以想象 svg 标签是一个屏幕, viewBox 是一个截屏窗口大小, 而 rect 是截取窗口里面的内容, 当你截屏完成后, 你要把这个截取的图片放在一个名为 svg 的屏幕上, 这时候如果 viewBox 小于舞台大小, 那就要放大截图来铺满 svg, 如果 viewBox 大于 svg 的尺寸那就要缩小截图来达到铺满 svg 舞台。有 viewBox 的效果 , 现在的 viewBox 是远小区 svg 的宽高。有 viewBox 的效果 , 现在的 viewBox 是远大于 svg的宽高。原创 2022-08-22 17:55:29 · 2498 阅读 · 0 评论 -
手写一个 call 方法
本质就是利用了函数的隐式绑定, 函数是谁的属性, this 就会默认指向这个对象, 但是箭头函数除外。call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。call 函数还能给定参数执行函数。只需稍加改造就可以实现。原创 2022-10-13 08:41:06 · 357 阅读 · 0 评论 -
百度地图实现 区域高亮
已经封装位 api , 直接调用就可以。原创 2022-09-02 18:03:35 · 2001 阅读 · 7 评论 -
rollup 打包一个组件库
为什么说这个的使用呢,我在基于 element plus 构建组件的时候报错,搜索到解决方案是使用 commonjs,但是打包出的依赖太多,一个 tabs 组件就包含了 loadsh,最终弃用了element plus。原创 2023-01-07 18:43:27 · 574 阅读 · 0 评论 -
typescript 封装 axios
封装 axios (在返回数据拦截器中, 无法达到省略 response.data 的步骤)学习还是需要慢慢来, 不能想着一口吃着成个胖子, 那样学习效率不高, 自己的心态也很难受。涓滴之水终可以磨损大石import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'// 声明接口数据返回类型type response = { message?: string code: string d原创 2022-02-25 17:20:14 · 714 阅读 · 0 评论 -
typescript 里面的 as const
尝试 as 断言// 定义一个类型type a = 'get'// 定义一个函数, 参数类型为 'get'function f(a: a) { console.log(a)}f('a') // 可以执行const obj = { a: 'get'}f(obj.a) // 类型“string”的参数不能赋给类型“"get"”的参数。 这里的 obj 属性的值类型为 string 不符合期望类型 'get'通常情况下, 一个对象的属性值都是基本类型和引用类型数据, 不太可能会出现原创 2022-02-28 12:25:58 · 1519 阅读 · 0 评论 -
关于 typescript 里面的 分布式条件类型
1. 什么是分布式条件类型非分布式: 操作作用于混合类型大家都有的成员, 也就是交集分布式: 操作应用于混合类型里所有的成员, 也就是并集代码演示// 非分布式(操作只作用于共同成员)type Fruit = | { species: 'banana', curvature: number } | { species: 'apple', color: string }type KeyOfFruit = keyof Fruit; // "species"// 分布式(原创 2022-05-03 11:32:17 · 563 阅读 · 4 评论 -
浏览器的最大并发数(http1.1)
每个资源请求通常需要单独的TCP连接,尽管支持Keep-Alive机制,允许在同一个TCP连接上连续发送多个请求。但通常浏览器限制并发TCP连接数(例如,每个域名最多6个并发连接)。:引入了多路复用机制,在一个TCP连接上可以并发发送多个请求和响应,这显著提高了传输效率。因此,在HTTP/2中,一个域名通常只需要一个TCP连接即可并发处理多个请求。原创 2024-07-24 11:55:34 · 1507 阅读 · 0 评论 -
ESLint 和 Prettier 怎么才能并存!
文件里面添加这几行配置,说几句想说,现在的人动不动就贴配置,感情你配置是万能的啊?咱们也不能上来就复制。要知道配置是干啥的。就是在自动格式化之后,再进行eslint格式化,想想看,'老子’配置不好你的规则,能力达不到就用暴力。保存的时候会执行里面的配置。保存的时候自动格式化。.........原创 2022-07-19 10:52:53 · 139 阅读 · 0 评论 -
vscode 根据不同语言项目自定义配置项(插件版本)
我们可以添加多个配置文件来解决根据项目来加载不同插件,我们可以根据自己需要来选择不同的配置项。如过电脑内存够强我感觉也不需要配置这些东西。先把当前的配置导出来一份然后再导入进去选择你刚才的文件然后就会看到这个页面,选择你需要的插件就好,选择完成之后点击下面的创建按钮就完成了。创建完成之后就可以根据需要切换你想要用的配置项了祝各位工作顺利,生活幸福。原创 2024-07-28 11:48:00 · 625 阅读 · 0 评论 -
koroFileHeader插件配置,关闭自动添加头部配置
1. 下面这些配置基本可以解决大家的问题// koroFileHeader 插件配置 "fileheader.configObj": { "autoAdd": false, // 自动添加头部注释开启才能自动添加 "autoAlready": false, // 默认开启, 只给支持的语言添加注释 "createHeader": false, // 新建文件不自动添加注释 "prohibitAutoAdd": ["py"] // 禁止.json .md文件,自动添加头部原创 2022-03-16 10:56:32 · 6279 阅读 · 3 评论 -
使用 typescript 开发 vue 组件来支持代码提示
使用 .d.ts 文件第一种在page.json文件里面定义字段 “types”{ "types": "./types/src/index.d.ts"}第二种配合 volar 来定以 一般适合大型组件库volar文档 这是摘抄的部分说明Local components, Built-in components, native HTML elements Type-Checking is available with no configuration.For Global com原创 2022-03-17 22:43:48 · 1301 阅读 · 0 评论 -
jsconfig.json 配置模板
关于compilerOptions属性文档的解释: 不要被compilerOptions所迷惑,因为JavaScript并不需要实际的编译。这个属性的存在是因为jsconfig。Json是tsconfig的后代。json,用于编译TypeScript。这个属性在 js 项目里面能用到的是 "baseUrl": ".", "paths": { "@/*": ["src/*"] },用来做 webpack 别名映射{ "compilerOptions": { "baseUrl": "."原创 2022-03-16 10:12:49 · 1565 阅读 · 0 评论 -
原生微信小程序中使用 Picker view 设置默认值不生效
但是不管怎么样都是不生效。后来就推测是因为选项数据在 attached 里面初始化完成的,所以设置的不生效。一下默认值就解决了;为什么能够更新呢,我推测是因为 duration 是响应式数据,设置之后会驱动页面更新,自然就会默认选中到对的设置项。我的代码中是在 attached 生成的选项数据,刚开始是在 data 里面直接设了默认选中值,今天在微信小程序中使用 Picker view 这个组件,遇到一个设置默认值选中不生效的问题。按照微信的官网文档,如果需要设置默认选中项可以这样设置。原创 2024-08-02 13:46:10 · 883 阅读 · 0 评论 -
如何在 Element Plus 中使用自定义 icon 组件 (非组件库内置icon)
先说原理就是将svg文件以vue组件文件的方式使用需求:我想要在 Element Plus 得评分组件中使用自定义得图标。组件本身是支持自定义图标的,但是教程中只说明了如何使用图标库内置图标。如何使用自己的图标呢。先看下el-rate如何使用内置的自定义图标,原创 2024-01-18 12:00:36 · 6064 阅读 · 2 评论 -
git 使用 submodule 如何指定分支
写在前面, 作为一个前端我是不喜欢使用 submodule的, 我更喜欢 npm 包的管理方式。原创 2024-01-10 16:42:30 · 4312 阅读 · 1 评论 -
关于使用 vxe-table 时设置了 show-overflow tooltip 不展示的问题(Dialog 组件和 table 同时使用)
众所周知,vxe-table 是可以支撑万级数据渲染的表格组件,本质上还是用了虚拟滚动的实现。之前一直知道vxe-table, 但是基本没有机会用的上这个组件,最近在开发埋点数据的统计,后端一次性返回了上千条数据,elementui 的 table 组件就明显有点卡顿,因为每一行都有很多列。当后端说如果卡顿就限制下返回数据量的时候,。vxe-table 就这样来到我的项目,下面是截图,看得出字段还是不少的。原创 2023-10-21 10:27:20 · 5099 阅读 · 2 评论 -
使用 puppeteer 加载 html 文件来运行 js 文件
遇到一个需求, 在浏览器环境下来运行 js sdk 文件, 这个 js 文件是不能运行在 nodejs 环境下的;所以通过 puppeteer 无头浏览器来运行代码获取对应的结果。首先是安装插件 puppeteer,然后创建一个项目, 我这里是express;这里是加载本地html文件, 在html文件里面导入你的js文件。这个函数来获取你testjs文件里面的函数了;原创 2023-10-10 09:48:15 · 1259 阅读 · 0 评论 -
npm 安装 git 仓库包
在项目根目录执行以下命令, 此时你的代码会被链接到npm的全局仓库, 类似执行了 npm install xxx -g。#v1.0.0 代表版本, 例如打了仓库一个tag叫v1.0.0;如果不指定版本则默认是最新的代码。原创 2023-08-22 17:07:03 · 1914 阅读 · 0 评论 -
tsup 解决 iiffe 打包没有变量导出
【代码】tsup 解决 iiffe 打包没有变量导出。原创 2023-08-14 16:57:58 · 247 阅读 · 0 评论 -
vuecli5.x 配置图片输出为base64
【代码】vuecli5.x 配置图片输出为base64。原创 2023-07-18 11:45:00 · 2324 阅读 · 0 评论 -
vue vben admin 使用, (个人感觉这项目封装的太深了!!!!)
开启了表单搜索功能, demo 代码是 formtable 组件, 个人还是比较喜欢 template 方式, 这样的方式使用不了 getForm 这种方法。在请求方法里面重新返回一个 promise 对象, 用满足规定的格式返回就可以了。需要注意的是, 如果使用了组件表单搜索功能, 就是说你需要提供一个获取数据的api, 这里着重去看怎么适配表格需要的响应数据结构。建议表格这种东西使用 vben自己封装的, ant design 自身的还需要你去动态调整表格高度。我们是不会被困难打败的, 只会越战越勇!原创 2023-03-30 11:24:21 · 8583 阅读 · 8 评论 -
import-html-entry]: error occurs while executing entry script, 乾坤加载子应用路由报错
在乾坤框架下, 子应用技术栈是 vue, 当路由是懒加载的情况, 大概率会遇到。runtime publicPath 主要解决的是微应用。, 因为是动态加载的资源所以相关路径需要配置一下。的 脚本、样式、图片 等地址不正确的问题。如果路由没有使用懒加载基本不会遇到这种情况。原创 2022-11-24 12:17:18 · 12094 阅读 · 0 评论 -
乾坤框架下, 使用 cdn, 百度地图sdk 报跨域
如果是直接用的百度地图 js,不能直接用 script 标签插入,需要改为异步插入,然后才能用 excludeAssetFilter 过滤。原创 2022-11-06 19:44:24 · 1046 阅读 · 0 评论 -
Element 表格单元格合并
【代码】Element 表格单元格合并。原创 2022-10-10 11:00:40 · 312 阅读 · 0 评论 -
js获取url参数的方法
【代码】js 获取 url 参数。原创 2022-09-21 16:27:37 · 326 阅读 · 0 评论 -
使用 husky 进行 git commit 校验
eslint 执行命令(需要携带路径), 如果需要指定文件后缀就要配合 --ext 命令。原创 2022-09-13 21:22:53 · 585 阅读 · 0 评论 -
在 ts 里面使用 eachrt的参数规定
代码】在 ts 里面使用 eachrt的参数规定。原创 2022-08-16 11:14:59 · 131 阅读 · 0 评论 -
vue3.0 使用 keep-alive 标签无效, 及其在 vue admin Layout 多级嵌套下出现问题
先说一下问题所在,虽然vue3.0 不需要 root div, 但是keep-alivetransition这两个标签都需要。原创 2022-08-12 10:23:30 · 5198 阅读 · 0 评论 -
css preserve-3d 使用
指定了观察者与z=0平面的距离,可以想象是我们和舞台的距离,如果我们离舞台更近是不是看到的东西越少,东西越大呢,如果我们离舞台越远看到的越多,演员也随之越小。可以把拥有这个属性的盒子想象成一个舞台,里面的子元素都是演员,他们可以随意表演,我们可以通过舞台观看。设置元素的子元素是位于3D空间中还是平面中。加不加无所谓的,它只是规定了我们和舞台的距离。是应该加在父盒子上面的。,舞台也就是3d的,...原创 2022-07-20 10:19:41 · 560 阅读 · 0 评论 -
记录一次使用 Popper.js 编写弹框遇到的问题
当前使用的 vue-popperjs 组件是基于 popper.js 开发的使用方法安装 npm i vue-popperjs导入使用<template> <popper trigger="clickToOpen" :options="{ placement: 'top', modifiers: { offset: { offset: '0,10px' } } }"> <div class="poppe.原创 2022-05-21 07:18:00 · 1671 阅读 · 0 评论 -
在模板字符串里面添加多个空格
模板字符串语法` 前面是一个空格`` 前面是三个空格` //无效`\u00A0\u00A0\u00A0\u00A0\u00A0前面是多个空格` // 有效关于转义字符 , 只有在下面图片中的字符组合才会有转义效果, 在其他字符前面都是无效的上面的使用的特殊符号就是符合最后一个 \u{n}...原创 2022-05-09 10:18:02 · 4330 阅读 · 2 评论 -
javascript 程序错误的捕获
1. 捕获非期约异常,在函数里面返回一个ture,浏览器就不会继续提示错误了, 代码里面没有使用 catchevent 内部参数信息:message:错误信息(字符串)。可用于HTML οnerrοr=""处理程序中的event。source:发生错误的脚本URL(字符串)lineno:发生错误的行号(数字)colno:发生错误的列号(数字)error:Error对象(对象)window.removeEventListener('error', event => { c原创 2022-03-31 16:13:14 · 3189 阅读 · 0 评论 -
前端写一个 shell 脚本来执行 npm 命令
目的从 url 获取前端请求基地址, 通过环境变量注入RESULT=$(curl -s https://www.example.com)echo $RESULT原创 2022-03-30 09:38:26 · 4088 阅读 · 0 评论 -
echarts setoption 不生效
第一次是两个图例(班级,个人), 但是后来我只传一个系列(个人), 结果还是展示两个图例, 需要设置 notMerge是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则,详见 组件合并模式。如果为 true,表示所有组件都会被删除,然后根据新 option 创建所有新组件chart.setOption(option, { notMerge: ..., lazyUpdate: ..., silent: ...});以上基本就可以更新了.原创 2022-03-25 10:25:57 · 4657 阅读 · 0 评论 -
利用 border 实现渐变线
border-bottom: 1px solid;border-image: linear-gradient(90deg, rgba(60, 93, 126, 0.8) 0%, #2696af 50%, rgba(60, 93, 126, 0.8) 99%) 2 2 2 2;效果:原创 2022-02-21 10:47:04 · 644 阅读 · 0 评论 -
vue3.0 + vite + typescript (遇到的问题)
遇到的问题1. 找不到模块“./App.vue”或其相应的类型声明。解决方法:开启托管模式安装插件(插件说明提示:此插件已经被托管模式代替了)官网内容摘要:为了让 Vue 单文件组件和 TypeScript 一起工作,Volar 创建了一个针对 Vue 的 TS 语言服务实例,将其用于 Vue 单文件组件。同时,普通的 TS 文件依然由 VSCode 内置的 TS 语言服务来处理。...原创 2022-02-19 20:47:31 · 769 阅读 · 0 评论