前端
别说小李
这个作者很懒,什么都没留下…
展开
-
chrome插件
严格来讲,我们正在说的东西应该叫Chrome扩展(ChromeExtension),真正意义上的Chrome插件是更底层的浏览器功能扩展,可能需要对浏览器源码有一定掌握才有能力去开发。Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。...原创 2022-07-18 15:08:57 · 152 阅读 · 0 评论 -
关于web前端也想做App 这件事(浅谈)
Gitkraken目前的新版本需要money大概是一年400块钱,不过我这里有不需要付费的版本,MacOs需要锁定应用版本,不允许更新,windows需要下载一个类似(电脑管家)限制gitkraken的update进程的流量使用,避免更新。在自定义基座上运行的app就是最接近正式版app的感觉,最直观的感受是这个app的名称,LOGO是由开发这自己设置的。的同学可能要问,这这这也不是我的app阿还是HBuilder,其实这里有两个概念一个是。......原创 2022-07-18 15:03:36 · 147 阅读 · 0 评论 -
ESLint 报错
遇到一个问题,vscode自动保存后,报错:1.Expected " " character, but found "\t" characte (应为“”字符,但找到“\t”字符)2.warning Expected indentation of 14 spaces but found 12 spaces解决方法:两种都可以1. 2.在settings.json配置:配置之后,重启跑项目就解决了...原创 2022-06-17 18:10:11 · 2906 阅读 · 0 评论 -
职业规划和发展
目前毕业一年,计算机本专业。目前从事旅游行业前端工作,从学生到职场你会遇到形形色色的人,只要他们不是心怀恶意,请不要恶语相向。帮你是情分,不帮是本分,如果碰见一个愿意帮助你的同事你更应该心怀感激。新人选择工作要是迷茫的话,建议来前端做一个过渡,剩下的你关注公司内使用的知识或者业界内的热点,然后就是凭借你的兴趣去学习并应用于工作。其实现在开源项目你去github上去搜索都是的,你拥有良好的学习环境,只要你愿意沉下心去学习。当你在公司碰见新技术时,你第一反应就应该是感觉到兴奋,并了解和应用新技术。计算机专业的学原创 2022-06-17 11:46:51 · 1905 阅读 · 0 评论 -
高考那些事
我已参加工作:1、你有哪些印象深刻的高考记忆?在高考之前,心情难免有一些紧张。高考中不要考虑其他的放平心态放手一搏,给自己留一个无悔的青春记忆。高考走出考场就放松吧2、你现在在做什么工作?你选择的专业对你的工作帮助大吗?程序员 计算机专业 专业对口 你感觉选择专业对自己以后有帮助吗或者选择你自己喜欢的专业做为兴趣发展3、如何利用好高考后的假期时间?合理安排时间 切合实际 4、高考之后建议去打工吗?看你自身安排,打工同样是一种历练,打工时不要抱怨,知道打工不易应更体贴父母,更应该好好学习,前段时间不是还有原创 2022-06-10 12:09:20 · 111 阅读 · 0 评论 -
vue-cli-service报错
1、在项目的根目录下直接运行npm cache clean --force && npm install命令 或者直接运行npm cache clean --force。2、删除node_modules文件夹,然后再执行npm install命令。3、看下是不是你没有在packjson里面设置vue-cli的这个依赖。原因说下,主要这个是因为你手动删了一些东西,导致文件和modules里面对应不了。这个情况比较常见。还有就是缓存的问题导致的。第三个那个一般不存在的。原创 2022-06-02 14:23:31 · 2808 阅读 · 0 评论 -
在el-dialog中进行Vue的路由跳转,跳转后出现遮罩层?
el-dialog中进行Vue的路由跳转,跳转后出现遮罩层转载 2022-06-02 14:23:55 · 780 阅读 · 0 评论 -
渗透测试的介绍和防范
跨站脚本攻击跨站脚本攻击是指攻击者将具有恶意目的的数据潜入到远程用户信任的WEB页面的HTML 代码中,当该页面被浏览器下载运行时嵌入的脚本将被执行,用户页面被跳转到攻击者精心编织的其他页面,用户毫无顾及的填写各种敏感信息,殊不知已被攻击者盗取或被站点挂马控制。XSS攻击是什么XSS是跨站脚本攻击的缩写,是一种网站应用程序的安全漏洞攻击,是代码注入的一种。 通常是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。 这些恶意网页程..原创 2022-05-27 16:40:40 · 1323 阅读 · 0 评论 -
Vue系列——在vue项目中使用echarts
该示例使用vue-cli脚手架搭建安装echarts依赖npm install echarts -S 或者使用国内的淘宝镜像:安装npm install -g cnpm --registry=https://registry.npm.taobao.org 1使用cnpm install echarts -S 创建图表全局引入main.js // 引入echarts import echarts from 'echarts' ..原创 2022-05-27 10:12:00 · 280 阅读 · 0 评论 -
Vue项目搭建常用的配置文件,request.js和vue.config.js
1. 前端跨域解决方案request.js用来请求数据,封装的代码如下:import axios from 'axios'const request = axios.create({ baseURL: '/api', // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!! timeout: 5000......原创 2022-05-26 16:05:44 · 778 阅读 · 0 评论 -
module.exports用法
module.exports对象是由模块系统创建的。在我们自己写模块的时候,需要在模块最后写好模块接口,声明这个模块对外暴露什么内容,module.exports 提供了暴露接口的方法。1、返回一个JSON Objectvar app = { name: 'app', version: '1.0.0', sayName: function(name){ console.log(this.name); }}module.exports = app;这种方法可以返回全局共享的变.原创 2022-05-26 16:03:25 · 747 阅读 · 0 评论 -
深入理解webpack打包bundle.js的机制
本文通过实际打包查看bundle.js的源码的方式来理解webpack的打包输出。项目目录如下:+ index.js+ package.json+ webpack.config.js其中webpack.config.js的配置如下const path = require('path');module.exports = { entry: './index.js', mode: 'development', output: { path: path.resol...原创 2022-05-26 15:47:21 · 506 阅读 · 0 评论 -
antd 与 element-ui如何按需引入,以及二者的不同
antd与element-ui作为两个用途广泛的ui框架,均提供了按需引入,毕竟全量引入会导致包体积太大。尤其是当我们只想使用其中几个组件的时候,按需引入就变得更有必要了。我特意数了一下,二者均提供了共计63个组件,这是不是有什么特殊意义…当然这么多组件更进一步证明了按需引入的必要性。其实官方均已经提供了按需引入的方式:antd# 安装 babel-plugin-import$ npm install babel-plugin-import -D# 在babel.config.j原创 2022-05-26 14:36:18 · 1072 阅读 · 0 评论 -
iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow
iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations.for..in loops iterate over the entire prototype chain, which is virtually never wha.原创 2022-05-26 10:42:34 · 3579 阅读 · 0 评论 -
A plugin must either be a function or an object with an “install“ function.
问题: vue3 的插件需要install方法解决:检查main.ts 文件中 app.use()具体问题:我遇到的问题是有几个插件没有install方法,应该是我插件引入方式错了,每个三方插件使用的时候看下官网。app.use()拿不到;我改成app.config.globalProperties就可以了...原创 2022-05-26 10:02:40 · 3694 阅读 · 1 评论 -
调试微信分享:require subscribe
如果是调试测试号,这个错误的原因是需要你去关注公众号。在测试号的后台会有一个二维码,用你需要调用微信接口的那个微信号扫码,成功之后会有显示已经关注的用户列表。然后再次调用接口就可以了。以上,扫码关注即可。...原创 2022-05-26 09:44:37 · 533 阅读 · 0 评论 -
config:fail,Error: 系统错误,错误码:40048,invalid url domain
调用微信接口报出的错误。这个错误原因是因为安全域名配置错误。分两种情况:1.若是公众号的测试号,你完全可以写一个内网ip,比如192.168.1.100:8080,不必内网穿透,当然如果是需要微信回调的话还要外网可访问2.若是公众号的正式号,可以配置一级域名,比如mydomain.com即可,之后的二级域名都是生效的。总之,需要保证公众号配置的安全域名与调用接口所在页面的域名一致。不一致就会有上面的错误。...原创 2022-05-25 11:13:56 · 2357 阅读 · 0 评论 -
如何在vue项目中引入svg图标
概述svg,即Scalable Vector Graphics,可缩放矢量图形。相对于jpg,png图标,svg可以在任意分辨率下保证不会模糊,即便是网页缩放了。上图是知乎的截图,可以看到铃铛图标是svg的,消息数量是CSS写的,二者缩放到任意体积都可以保持一个同等的清晰度。而且现在很多ui标注的软件都已经支持直接生成svg,比如sketch,那为何不尝试一下呢。配置svg是一种用xml描述的语言,也就是说,html中引入svg,是以嵌入xml的方式进行的。(也有其他的多种方式原创 2022-05-25 11:12:05 · 9153 阅读 · 0 评论 -
await is only valid in async function
这个错误的意思是await只能放到async函数内部,言下之意:await必须放到函数里函数必须有async修饰符错误1: 没有放到函数里const myFun = async () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(1) },1000) })}// 错误: 没有放在函数里res1 = await myFun();con...原创 2022-05-25 10:54:52 · 345 阅读 · 0 评论 -
vue组件报错超出最大堆栈Maximum stack exceeded
情况1:组件内容的递归函数没有结束条件 情况2:路由拦截出错 情况3:vue组件的name属性如果没有显示指定则为组件的名称,也会造成递归死循环,例如(组件名称为form,name属性没有指定,引入的子组件为Form,这样也会造成栈溢出)...原创 2022-05-25 10:42:52 · 1890 阅读 · 0 评论 -
element-ui的表格实现无限滚动效果
自定义指令 directives: { tableInfiniteScroll: { bind(el, binding) { let tbody = el.querySelector(".el-table__body-wrapper"); el.tableInfiniteScrollFn = function () { if (this.scrollHeight - this.scrollTop - this.client ==原创 2022-05-25 10:40:44 · 765 阅读 · 0 评论 -
Vue received a Component which was made a reactive object.this can lead to unnecessary performance o
当使用内置组件compoent时is传入组件需要把引入的组件对象使用markRaw函数修改为不响应的原始值原创 2022-05-25 10:38:04 · 3401 阅读 · 0 评论 -
TypeError:Cannot read properties of undefined(reading XXX)
问题描述我们在GetNav方法中使用map遍历数组为每一个元素动态生成一列数据,并为每一列数据加上onClick事件,运行报错updateRoute为undefined问题分析map里面的function声明,这种声明方式因为是独立执行,在严格模式下this指向undefined经过验证,打印出来的this确实为undefined因此修改map里面的name方法为箭头函数即可解决问题return arr.map((item)=>{……})问题总结本文归根结底为.原创 2022-05-25 10:36:33 · 6196 阅读 · 0 评论 -
Vue3 报错解决 Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. P
Unhandled error during execution ofschedulerflush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vue3 很多报错都是不提示的,就是抛出这句异常 , 本篇文章可能会对你寻找问题有一点帮助出错原因Vue2 转 Vue3 时异常报错报错原因使用 全局变量的方式嵌套使用函数 , 函数执行时报错 , vue3 直接报错 bug...原创 2022-05-25 10:25:24 · 22541 阅读 · 0 评论 -
dependencies devDependencies peerDependencies三者的区别
1.Dependencies首先dependencies是大家最常用的,比如项目依赖了vue,那么vue就是dependencies,这里的依赖是会被最终构建到部署环境的// 将会保存到dependencies中npm install vue --save// 或者不写--save也可以,默认就会到dependencies中npm install vue// 再简单一些npm i2.DevDependencies与之相对的是devDependencies,他是开发过程中的依赖,比原创 2022-05-25 10:12:30 · 813 阅读 · 0 评论 -
一文帮你搞懂typescript中的unknown与any
在typescript中,当我们不确定一个类型是什么类型的,可以选择给其声明为any或者unkown。但实际上,typescript推荐使用unknown,因为unknown是类型安全的。什么是类型安全的?如下,如果是any,你可以任意的取值赋值,不会进行任何的类型检查。但unkown就不一样了,必须先进行断言 就是使用typeof 或 instanceof 来判断类型。其实二者是有本质的区别的,说起来要引入一个多态的概念。举个简单的例子,人类的祖先是猿人,他们也会生火,也会穿一些简单的原创 2022-05-25 09:41:39 · 512 阅读 · 0 评论 -
git rebase -i 交互式变基的使用,以及squash压缩多次提交的方法
交互式变基这个词是sourceTree的翻译。交互式变基可以将多个提交合并为一个,当然他的功能不止于此。但一般用于以下情况:在某个分支(比如dev)下做功能开发,当测试完毕,将要合并dev到master,但由于开发过程中有太多的提交,合并到master之后会让master的整个提交记录看起来不优雅,所以这时候可以用交互式变基去合并,这样做有两个好处:rebase 可以让合并过程中不产生合并的那次提交,也就是说合并完成后master分支图谱仍旧是一根线。squash多个提交保证开发分支的多次提交原创 2022-05-24 11:39:39 · 1558 阅读 · 0 评论 -
vue-cli hot-module-replacement不生效,不自动更新
解决办法是将当前NODE_ENV需要设置为’development’默认npm run serve 就是’development’,之所以可能不是,有可能你修改了项目根目录下.env.development文件。并将NODE_ENV设置为了其他的值。可以通过一下命令看一下当前的值console.log(precess.env)强烈建议读一下vue-cli env相关的文档...原创 2022-05-24 11:25:36 · 319 阅读 · 0 评论 -
使用Promise.all实现限制并发请求函数
Promise.all 的简单解释:// 当以下数组中promise1, promise2, promise3都resolve之后,触发promise.all的then函数。Promise.all([promise1, promise2, promise3]).then((values) => { console.log(values);});需求解释所谓并发请求,即有待请求接口100个,限制每次只能发出10个。即同一时刻最多有10个正在发送的请求。每当10个之中有一个请求完..原创 2022-05-24 11:21:48 · 1789 阅读 · 0 评论 -
npm package.json private
该属性主要是防止你手残执行了npm publish,发布了你不想发布的包,或者发布到不想发布的npm私服…当配置了{ "private": true}后执行npm publish,当然前提你登录了,然后就会报出如下的错误:可以看到提示the package has been marked as private 即 只有移除掉该属性才能发布。此外,如果不想每次新建项目都手动设置,可以进行全局配置$ npm config set init-private true...原创 2022-05-24 11:17:44 · 461 阅读 · 0 评论 -
git 合并分支,解决冲突时候使用远程分支覆盖本地分支
如果你还没pull$ git pull -X theirs如果已经pull过了。$ git checkout --theirs path/to/file你可以先放弃本次merge。$ git merge --abort值得注意的地方:如果是rebase, theirs反而是指你当前工作的分支仅仅是针对冲突的覆盖方式,没有冲突的文件不会被覆盖。...原创 2022-05-24 11:15:13 · 940 阅读 · 0 评论 -
uncaught error during route navigation
vue路由在加载组件之前会执行一些逻辑,尤其是生命周期的钩子函数如果你在以上的钩子函数中,写了自己的逻辑,并报错了。就会触发[vue-router] uncaught error during route navigation这个错误。原因是vue进行了try catch,会捕获到代码执行过程中的错误。所以检查一下你的控制台有没有报错。先解决报红的错误,然后这个警告就自己消失了。...原创 2022-05-24 10:48:05 · 3314 阅读 · 0 评论 -
this.getOptions is not a function
该错误是css预编译的loader与webpack 4 不兼容导致的。尝试升级到webpack 5 或者降级sass-loader / less-loader / postcss-loader 的版本号到上一个主版本号。比如:# 移除sass-loader@11yarn remove sass-loader -D# 安装上一个主版本的sass-loaderyarn add sass-loader@10.1.1 -D...原创 2022-05-24 10:45:53 · 423 阅读 · 0 评论 -
node-sass gyp ERR find Python
node-sass这个包不同于普通的npm包,他的源码是C++实现的,因为编译Sass需要使用LibSass,后者是C语言实现的。node-sass实际是调用LibSass进而实现编译sass文件的。node-sass代码主要是通过C++实现的固Node-sass 是需要编译的。考虑到平台兼容问题,node-sass可能需要到你的电脑上进行现场编译(区别于直接下载预编译好的文件)。这时候就需要跨平台编译工具的node-gyp的支持,而node-gyp在windows下是依赖于python的。原创 2022-05-24 10:44:54 · 955 阅读 · 0 评论 -
regeneratorRuntime is not defined
regeneratorRuntime是webpack打包生成的全局辅助函数,由babel生成,用于兼容async/await的语法。regeneratorRuntime is not defined这个错误显然是未能正确配置babel。正确的做法需要添加以下的插件和配置:# 这个包中包含了regeneratorRuntime,运行时需要npm install --save @babel/runtime# 这个插件会在需要regeneratorRuntime的地方自动require导包,编原创 2022-05-24 10:40:21 · 870 阅读 · 0 评论 -
优雅解决: assignment to property of function parameter ‘state‘
在airbnb的eslint规则中,有这样一条规则no-param-reassign目的是提醒你不要直接修改函数的入参。因为假如入参是一个对象,修改入参可能会导致对象的属性被覆盖。// 不好的做法function f1(obj) { obj.key = 1; // 可能对象本身就用key的属性,这样会覆盖原有的属性。无法确定这样做是否是对的。}// 好的做法function f2(obj) { // 若原来有这样的属性,那么直接返回这个值,否则返回需要的值 const key...原创 2022-05-24 09:42:55 · 2547 阅读 · 0 评论 -
Eslint Unable to resolve path to module ‘@‘
在webapck + eslint的项目中,若给webpack配置了alias,但eslint未能正确配置路径别名,则会报错。// webpack.config.js resolve: { // 配置别名,在项目中可缩减引用路径 alias: { '@': path.resolve('app/web') } },如上,在vue-cli初始化的项目中,已经为你配置好了,但若是自己搭建的项目,则可能出现标题中的错误,因为eslint并不会自动读取webp...原创 2022-05-23 12:00:55 · 3119 阅读 · 0 评论 -
Vue中的Provide/Inject 实现响应式数据
Vue中, Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的(设计如此)。提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的以上引用自官网可能之所以这样设计,是为了避免数据的混乱。就如同props不能被子组件直接修改一样。从代码角度讲 data() { return { foo: 'foo', bar: 'bar...原创 2022-05-23 11:57:47 · 4742 阅读 · 0 评论 -
Module ‘“fs“‘ has no default export.
出现这个错误的原因是:fs模块没有默认导出。事实上,fs模块的确没有默认导出。因为fs是遵循cjs规范写的。即类似于这种导出:module.exports = fs = { readFile, readFileSync, ...}而如果直接使用import fs from 'fs'1就会导致出现标题中的错误(TS编译情况下)。固导包的时候需要使用如下的方法:import * as fs from 'fs'1看起来有些麻烦,事实上,如果尝试使用b...原创 2022-05-23 11:55:35 · 6696 阅读 · 0 评论 -
JS中获取cookie的最简单方式
const getCookie = (name) => document.cookie.match(`[;\s+]?${name}=([^;]*)`)?.pop();// 比如cookie如下: a=b; c=d// 使用getCookie('c') // d其中match是字符串的原型方法。str.match(regexp)如果传入一个非正则表达式对象,则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp以上,所以完全不必写一个正则,因为正则拼字符串.原创 2022-05-23 11:53:26 · 13926 阅读 · 0 评论