- 博客(113)
- 资源 (7)
- 收藏
- 关注
原创 怎么增加全局变量
其中 Vue.prototype.$pageType 就是定义的全局变量。2、可在项目中直接使用this.$pageType去做判断。1、在路由的全局钩子函数中加入。
2024-07-16 20:54:43
226
原创 TerserPlugin配置之后报错
配置之后发布环境之后报上图错,cannot read property ‘source’ of undefined。webpack 配置 TerserPlugin,
2024-07-15 15:04:35
189
原创 根据配置的mode环境显示不同的index模板
二、创建一个index_dev.html。三、package.json 的命令配置。这时候就可以根据环境不同实现模板不同。
2024-05-22 17:39:39
264
原创 获取文件夹下的vue文件形成组件,require.context
项目中现有一个文件里面包含所有需要用到的组件,如果一个个的去import,则会非常麻烦,现有require.context去实现,
2024-05-10 14:26:35
218
原创 node遍历文件夹及子目录 并修改替换内容
前言:项目中需要替换文本关键字,但是一个一个的去替换,文件太多了,这时候就想到使用node去批量替换,遍历文件夹及子目录。
2024-05-07 18:21:37
380
原创 函数编辑器调研及设计开发
功能点ACECodeMirrorMonaco代码着色/高亮√√√主题√ (内置20+/可扩展)√ (内置40+)2种,即vs/vs dark语言支持√ (110+/可扩展)√ (130+)√ (30+)代码提示/自动补全√ (引入tool文件+配置)√ 引入hint相关文件+配置快捷键命令√ 默认开启代码完成/循环结构√√√代码段√√√搜索和替换√√√多光标操作√√√自动缩进√√√代码折行√√√undo/redo√。
2024-05-07 11:26:54
490
原创 windows 提示 NODE_ENV 不是内部或外部命令,也不是可运行的程序
配置如下:build:”npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js“会报以下错误 ‘NODE_ENV’ 不是内部或外部命令,也不是可运行的程序。之后运行npm run build 不再报错。安装 cross-env ,配置如下。项目中使用rollup打包。
2024-04-12 14:09:44
363
原创 vue与react的对比
Object.defineProperty或Object.proxy 数据劫持,监听数据变化,通过渲染函数编译模板,形成虚拟dom,setter,getter更新dom。react 类组件或函数式组件,react-router,redux/zustand/mobx。react:虚拟dom的差异比较,来最小化实际的dom更新次数,从而提高应用的性能和效率。受控组件和非受控组件最大的区别在于组件的值是由React状态控制还是Dom节点控制。vue 复合式Api,vue-router,vuex/pinia。
2024-03-29 15:20:32
696
2
原创 前端埋点全解及埋点SDK实现方式
所谓“埋点”,是数据采集领域(尤其是用户行为数据采集领域)的术语,指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。埋点的技术实质,是先监听软件应用运行过程中的事件,当需要关注的事件发生时进行判断和捕获。埋点需要在特定的时机来收集数据,然后上报给服务端进行分析。
2024-03-27 16:37:22
2265
原创 v-bind=“$attrs“ v-on=“$listeners“的理解及用法
1、这可以理解成穿透,多层组件监听2、用于多层级组件之间的通信3、高层级向底层级传值 v-bind=‘$attrs’4、低层级向高层级传值 v-on=“$listeners”
2024-03-27 11:21:12
1863
原创 如何让vscode 不检测js
js/ts.implicitProjectConfig.checkJs”: false, 改成false即可。找到setting.json,里面的配置。vscode 打开设置。
2024-03-21 15:50:20
403
原创 insertAdjacentHTML() 作用
insertAdjacentHTML() 方法是将文本解析为 element 元素,并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接使用innerHTML操作更快。insertAdjacentHTML() 是Element的API中的一个方法,可以将字符串文本转化为你想要的节点(Node),并且插入到你想要插入的位置中。而且它并不会向innerHTML一样会替换掉已有的节点,而是会插入到指定位置。
2024-03-13 11:22:06
376
原创 luckysheet 新增自定义工具栏
找到toolbarIdMap ,追加 importExcel: ‘#luckysheet-icon-importExcel’1、找到路径为src/local/zh.js的文件,找到打印,后面新增importExcel: “导入”4、找到路径为src/controllers/menuButton.js的文件,追加事件。2、找到路径为src/controllers/toobar.js的文件。找到defaultToolbar,追加importExcel。找到createToolbarHtml,追加html。
2024-03-06 12:03:10
661
原创 react学习
钩子函数只能在函数组件或者自定义钩子函数中自定义钩子:当我们需要将react中钩子函数提取到一个公共区域时,就可以使用钩子函数自定义钩子是一个普通函数,它的名字需要使用use开头 useFun。
2024-02-28 10:55:34
797
原创 node环境打包js,webpack和rollup两个打包工具打包,能支持vue
引言项目中经常用到共用的js,这里就需要用到共用js打包,这篇文章讲解两种打包方式,webpack打包和rollup打包两种方式。
2024-02-02 11:12:29
1708
原创 this.$store undefined
3、如果上边均没问题,打开package.json,查看vue与vuex的版本,vue2对应vuex3,vue3对应vuex4。报错:vuex报错 this.$store显示undefined,可能存在的问题,从以下几个方向排查。1、查看store文件中的vuex实例对象是否暴漏。2、main.js中是否注入store。安装指定版本,重启就好了。
2024-01-30 10:42:34
661
原创 this指向问题以及修改函数的this指向方法
this表示对象取决于函数调用(this表示对象=>当前对象=>当前环境对象=>函数运行时环境对象)this就是函数运行时所在的环境对象(取决于函数调用=>不同场合,this有不同的值)函数的不同使用场合,this有不同的值。1、this永远指向对象(JS中一切皆对象,window也是对象)2、this指向取决于函数调用的位置(this指向是不定的,无法在事先声明时就得知它的具体指向,因此只有在调用时才能得知它的指向)3、this只能在函数体内部使用。
2024-01-25 11:03:14
454
原创 require.context的作用
一个 webpack 的 api ,通过该函数可以获取一个上下文,从而实现工程自动化(遍历文件夹的文件,从中获取指定文件,自动导入模块)。在前端工程中,如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入。
2024-01-09 11:09:31
787
原创 使用nvm安装了node版本管理,npm版本更新之后还是旧版本
组件库使用的node版本是比现在用的版本要低的版本,在这里使用了nvm去管理本地的node版本,这时遇到了一个问题是安装完node版本之后,相对应的npm版本还是原来的版本,原来一直以为是本地安装的全局的node版本导致的,卸载之后还是一样的现象,查看环境变量之后把所有相关的node的都删掉,这时还会出现同样问题。npm config set cache “D:\nodejs\node_cache” //设置缓存目录。这时再运行where npm,会是正常的安装目录。
2024-01-08 13:44:12
1696
原创 qiankun 公共依赖
把 CDN 链接,注入到 htmlWebpackPlugin 里(htmlWebpackPlugin 主要是生成 html 的,在 html 中可以拿到它的值)在主应用的 public 下新建 global > config 文件夹,用于存放 全部应用公共接口地址配置、微应用配置、公共依赖 CDN 地址 等内容。在 config 文件夹下 新建 config-webpack.js,用于存放公共依赖 CDN 地址。微应用中的依赖,就是读取主应用中的 config-webpack.js 这个配置文件。
2024-01-04 17:48:18
1610
原创 gitlab注册无中国区电话验证问题
gitlab对中国不太友好,无法直接注册,因为电话经常收不到短信,所以放弃了中国市场,无法选择+86手机号进行验证码发送。修改dom,对于现在的VUE、React框架来说是没有用的,所以不用尝试。Google上众多的方案是修改dom,而且时间大约是21年以前。放开断点,选择数据,后续操作正常进行。找到代码打断点,刷新页面,改一下数据。直接看请求,用魔法打败魔法。
2023-12-25 14:53:32
1393
原创 docusaurus简介及使用心得
Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具,使用 Markdown 即可更新网站。构建一个带有主页、文档、API、帮助以及博客页面的静态网站,只需5分钟。同类竞品还有vuepress,docusaurus是基于react,而vuepress是基于vue的。
2023-12-22 16:38:29
346
原创 在线文档生成工具Docusaurus目录说明
Docusaurus是一个静态网站生成器,它是用 React 写的源代码,然后编译成静态的 HTML + CSS + JS。支持 Markdown语法,并且Markdown 是用的mdx,也就是支持 jsx 语法的Markdown,无缝结合 React, 还可以引入自定义组件,支持插件,还有主题也可以写自定义的组件,把默认的主题的某一个组件给覆盖掉,特别方便,尤其适合用于写在线的手册,文档之类的场景,还可以写博客。中文官网:https://www.docusaurus.cn/
2023-12-21 17:59:58
261
原创 解决前端安装sharp出错问题sharp: Command failed
2、更改版本,这个就看node版本和module版本的适配性了,有什么问题搜什么问题。node无法下载相应的module,比如electron或者sharp。在项目目录下配置.yarnrc(或者.npmrc文件)——最稳定最靠谱。一方面和版本有关系,另一方面和网络有关系。所以针对这两方面的问题,有如下的解决方案。3、手动下载对应的module。
2023-12-20 17:44:38
922
原创 前端沙箱 bind(window.proxy)()
单实例模式:全局只存在一个实例,直接代理原生的window对象,记录每个沙箱内window对象上的增删改等操作,激活某个沙箱时恢复上一次失活时的状态,失活时恢复原来window的状态。为了解决with存在的问题,我们来了解下proxy方法。proxy用于创建一个对象的代理,从而实现对基本操作的拦截以及自定义。多实例模式:代理一个全新的window对象,所有的更改基于这个全新的对象,多个实例之间互不影响。沙箱是一种安全机制,为运行中的程序提供独立运行的环境,内部程序的执行不会影响外部程序的运行。
2023-12-20 17:38:52
161
原创 安装 eslint 配置指南 及 遇到的一些问题记录
1.当前前端项目风格混乱,每个人有自己的开发习惯,有自己的格式化习惯,不便于项目的风格统一,不利于代码维护。备注:以上的所有配置,各项目根据自己的实际情况做微调,有则改之无则加勉,eslint规则切忌随意off。2.有的项目eslint没有用起来,没有起到规范代码的作用,导致出现一些基础代码问题,如:重复命名。2.我们期望只校验我们本次修改的代码,而不是全项目校验(对历史项目友好,加快校验效率)1.我们期望在代码commit的时候自动eslint校验我们的代码。2.新增.prettierrc.js文件。
2023-12-13 16:40:59
114
原创 CSS import 规则
import 规则必须在 CSS 文档的头部,但可以在 @charset 规则后面。@import 规则还支持媒体查询,因此你可以根据不同屏幕尺寸导入不同的样式文件。@import 规则不是一个嵌套语句,@import不能在条件组的规则中使用。CSS @import 用于从其他样式表导入样式规则。使用 url 地址 */
2023-12-08 16:07:40
217
原创 安装 eslint 配置指南 及 遇到的一些问题记录
当前前端项目风格混乱,每个人有自己的开发习惯,有自己的格式化习惯,不便于项目的风格统一,不利于代码维护。备注:以上的所有配置,各项目根据自己的实际情况做微调,有则改之无则加勉,eslint规则切忌随意off。有的项目eslint没有用起来,没有起到规范代码的作用,导致出现一些基础代码问题,如:重复命名。我们期望只校验我们本次修改的代码,而不是全项目校验(对历史项目友好,加快校验效率)我们期望在代码commit的时候自动eslint校验我们的代码。配置完成后,当我们commit的时候就会自动校验我们的代码。
2023-11-17 10:45:44
417
原创 element UI中flex布局下el-table宽度自适应在IE下出现一直加载宽度的bug解决
element-ui 表格列会动态持续增加
2023-03-01 10:04:40
590
1
原创 数据处理:一维数组转成树状结构(递归和非递归),树状结构转成扁平化数组(递归和非递归)
数据处理:一维数组转成树状结构(递归和非递归),树状结构转成扁平化数组(递归和非递归)
2022-11-11 11:39:18
324
遮罩弹出层
2015-08-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人