- 博客(119)
- 收藏
- 关注
原创 2024前端面试题-篇章二
是指把接收多个参数的函数变换成接收单一参数的函数,嵌套返回直到所有参数都被使用并返回最终结果,函数柯里化之后依旧还是一个函数,只是这个函数返回值依旧是一个函数柯里化的一个主要用处就是实现参数复用也可以叫事件代理,简单解释就是利用时间冒泡的机制将子元素的事件绑定到父元素身上减少事件处理程序的数量简化代码逻辑动态添加跟删除子元素。
2024-09-02 14:15:34 1035
原创 css之grid布局(网格布局)
网格布局每一列每一行都可以单独的设置 ,并且写法也很多,大部分笨拙的写法都有简写形式。可以解决flex布局元素最后一行左对齐的难点(会自动左对齐)网格布局顾名思义就是将元素呈现为网状的整齐布局。
2024-08-22 22:50:33 526
原创 2024前端面试题-篇章一(个人向)
一般是created或者mounted,这二者具体放哪个没有孰好孰坏,具体看业务需求,如果需要子组件先展示数据那父组件的的请求最好放在mounted,因为有子组件的情况下,父组件mounted是最后执行的,否则就没有具体规定。一般是 页面先创建,然后准备再准备挂载,挂载的时候发现有组件再执行组件的生命周期,组件创建跟挂载执行完之后最后才挂载页面dom(简单理解就是 页面挂载之前会先检查有无组件,有则先执行组件钩子,最后才挂载页面)3.生命周期的变更包括去掉了创建的钩子,销毁的钩子改名成卸载。
2024-08-18 00:14:07 815
原创 react创建项目
如果安装了node直接可以使用命令npx create-react-app my-app来创建项目( my-app是项目名称)如果没有安装脚手架会提示你先安装脚手架 输入y回车即可,出现下面截图即表示创建成功。建议node版本大于18,直接终端node -v查看node版本。然后进到项目里面执行npm start命令启动即可。使用脚手架创建借助脚手架工具。
2024-08-16 16:55:13 343
原创 vue3查漏补缺
在router的每个route里面加上一个配置props即可在页面直接通过defineProps()获取路由传的参数,props可以是布尔值也可以是函数或者对象,布尔值只适用于params传参,函数式写法可以适用于query传参。答:直接使用torefs方法会将store上所有东西(包括方法啥的)都变成ref式的数据,影响性能代价太大,使用storeToRefs只会将想要的数据变成ref式响应式数据。适用于将store中的数据解构出来方便使用。用于监听store中的数据变化。问:为什么不用torefs。
2024-07-22 15:10:43 337
原创 Vue3+vite项目中使用mock模拟接口
注意此处如果配置出错可能是vite-plugin-mock依赖的版本有问题,重新安装一下依赖指定版本即可,这里推荐使用2.9.6版本的。根路径(src平级的目录)新建文件夹mock,新建文件user.ts添加以下代码。分别安装vite-plugin-mock跟mockjs两个插件。vite.config.ts中添加配置,主要是红色标记的配置。测试结果,响应结果为200,模拟请求成功。安装axios进行测试。
2024-05-29 00:05:59 1165
原创 vue3中使用svg图标
xlink:href="#icon-vue"中的icon-vue表示图标的名称,如此处我使用的图标名称为vue就直接写#icon-vue即可,vue才是名称,前面一截#icon-是固定标识。在main.ts中引入插件(这一步如果引入报错说缺少依赖,那就npm安装一下那个依赖即可)在svg标签里面可以书写行内样式,如图标宽高等等。主要为指定svg图标存放路径以及命名方式。vite.config.ts中添加配置。fill:图标的颜色。
2024-05-27 23:17:36 415
原创 vue路由知识补充(updating···)
需要注意的是在beforeRouteEnter中的组件实例还没有被创建所以是没法使用this的。next()方法表示放行,如果不执行此方法路由不会跳转,此方法可以接收一个参数。页面路由守卫可以直接在路由组件中使用,尤其一些缓存的路由组件可以解决一些问题。:如果传递一个路由对象,那么路由会重定向到该路由对象描述的路径。:如果传递一个字符串路径,那么路由会重定向到该路径。:如果传递一个回调函数,在跳转完成时执行该回调函数。,则中断当前路由跳转,不会进行路由跳转。
2024-05-09 17:23:55 396
原创 vue使用pdfjs-dist在电脑上展示PDF文件
踩坑:删除依赖或者重新拉取项目的时候再运行项目会报语法错误,这个时候就不要去添加什么loader了,除了raw-loader有用,试了大部分的loader都不管用,而且添加了raw-loader方法功能就用不了,因为方法被编译成字符串了,再去使用eval什么的去转也没必要。安装的时候一定要带上版本号,这里采用的是2.0.943(因为这个版本对于我目前的项目比较合适可以正常使用,其他版本大概率会报错),当前项目使用的是vue2,vue的版本是2.5.10。库中用于处理PDF文件的工作线程脚本。
2024-04-29 18:19:02 2153
原创 前端JS商品规格组合
/此时循环的步骤为result.map第一遍循环result,此时y为["白色"],而z为arr第二项的specs里面的每一项,于是用["白色"]去拼接["14寸","15寸", "16寸"]的每一项。//此时x.specs.map的值为arr.map的第二次循环也就是循环["14寸","15寸", "16寸"],而result.map为[["白色"], ["黑色"]],//此时上一层的循环result.map的result还是[[]],所以执行完一遍之后跳出当前循环到上一层循环,
2024-04-02 12:01:59 787
原创 vue-ueditor-wrap上传图片报错:后端配置项没有正常加载,上传插件不能正常使用
原因:路由模式的变更导致渲染的时候路径发生错误,所以重定向到了跟路径然后就变成了当前项目解决方法:判断当前的路由模式,然后判断是否拼接“#”以上问题均出自开源项目yshop商城前端运行时的错误,虽然控制台还是会报错,但是基本不影响使用,有时间的可以尝试去解决,或者直接删掉报错的地方。
2024-03-30 17:38:55 1817
原创 npm市场发布包步骤(npm发布vue组件)
输入登录指令之后会出现一些的提示,需要输入npm的用户名,密码(输入密码的时候终端输入行是不会显示的),邮箱,邮箱收到的验证码。如果有报错,根据报错提示去百度一下,如我这里一开始发布报错是因为项目有个属性是私有的,所以没能发布成功,改成false即可。发布的时候需要注意的是,插件必须要有package.json文件,没有就执行npm init命令初始化。6.如果没有报错或者显示了自己的账号证明就是登录成功了,也可以通过指令查看当前登录的账号。如果出现淘宝的镜像源则需要切换成官方的镜像源。
2024-03-07 17:55:03 642
原创 vue之性能优化
所谓路由懒加载,其实就是路由通过import动态引入,而不是在文件最上面一个个全部引入,因为JS执行的时候会优先执行引入的文件,如果一次性引入过多,则会增加处理时长。有过开发经验的基本都知道二者的区别,由于v-show是通过控制样式去显示隐藏的,不像v-if一样需要控制dom,所以效率是比较高的,在非必要情况下尽量使用v-show。图片在网页加载过程中是非常耗费资源的,所以如果有大量图片需要加载,建议使用懒加载的方式,常用的懒加载依赖包有 vue-lazyload。
2024-03-07 17:34:16 420
原创 iview碰到的一些问题总结
tabs嵌套使用的时候不是直接套用行了,直接套用会出现内层tab都集成到一级tab去,需要设置该属性指向对应 Tabs 的 name 字段(需要版本大于3.3.1)
2024-02-21 11:49:41 665
原创 nuxtJS初使用碰到的一些问题总结
在根路径plugins新建routers.js文件贴入下面代码,然后再nuxt.config.js中的plugins引入插件即可。解决方法一:捕获错误,虽然不报错但是没有解决实际问题。解决方法二:重写vue的路由跳转push。
2024-02-21 11:22:32 336
原创 vue2项目打包到测试环境之后报错require is not defined
配置打包命令npm run build:test到测试环境之后报错,打包到生产环境没有问题,查找了项目中的require引入似乎也没啥有问题的地方,所以排除是require的原因。
2024-01-24 17:06:09 1093
原创 vue项目之.env文件.env.dev、test、pro
env文件是vue运行项目时的环境配置文件。env: 全局默认配置文件,所有环境(开发、测试、生产等)均会加载并合并该文件。
2024-01-12 15:53:18 2319
原创 前端开发之Vue项目中的配置文件、点开头的文件(更新中)
用处:配置需要忽略语法校验的文件,如node_modules、dist等文件。用处:git提交代码的忽略文件、用于配置哪些文件不需要上传git。常用配置:(详细可参考官网),一般都是写rules配置。用处:用于配置css格式化,以及检查css语法。用处:用于配置格式化的时候需要忽略的文件。用处:eslint语法校验配置项;用处:stylelint的忽略文件。用处:用于配置项目格式化工具。写法示例:跟其他忽略文件一致。写法示例:跟其他忽略文件一致。示例:直接写文件名即可。示例:直接写文件名即可。
2023-12-27 09:57:55 729
原创 elementUI CDN引入本地文件报错,刷新页面报错
由于element UI 官网中CDN引入的地址都需要挂梯子才能正常加载,这就导致我们项目老是打不开或者加载很慢 ,不得不去将资源下载放在本地,这时就出现上面的错误了,这时我们还可以用bootCDN的地址来引入。webpack 中的 externals 配置项用于指定在打包时需要排除掉的模块,这些模块会被视为外部依赖,即不会被打包进最终的输出文件中,而是通过其他方式引入。举个例子,假设我们需要在项目中引入 jquery 库,但我们并不想在打包的过程中将其打包进最终的输出文件中,而是从外部引入。
2023-12-22 12:21:00 1288
原创 前端换电脑配置环境碰到的问题
此时需要输入指令set-ExecutionPolicy RemoteSigned回车。输入指令 get-ExecutionPolicy回车,查看执行策略。然后在此位置以管理员身份运行Windows powershell。再输入get-ExecutionPolicy回车查看执行策略状态。Windows搜索栏搜索Windows powershell。输入指令 get-ExecutionPolicy。如回复Restricted则表示受限的。vscode右键打开文件所在位置。关掉vscode再次打开尝试。
2023-12-20 11:56:47 485
原创 【Vue3练习】Vue3使用v-model以及多个v-model
注意事项:Vue3里面v-model对应的事件名称不能随便取了,必选是update:后面接对象的绑定值(父组件传入的值)
2023-12-17 22:44:30 595
原创 Vue3 pinia的基本使用
使用的时候记得使用一下,因为向外暴露的是一个方法,所以需要调用一下才能获取到值,因为在store里面已经使用ref响应过了 所以无需用ref定义,直接在页面使用即是响应式数据,pinia的使用跟vuex很像,去除了很多没用的api,写法有两种,一种老式的选项式api还有一种组合式api,用哪种根据自己喜好来,以下示例为组合式api。:此处尽量不要解构,解构会丢失响应式,如果一定要解构请使用storeToRefs,参数三:持久化配置(将数据放缓存持久保存)参数二:数据存储区以及方法,使用示例:示例来自官网。
2023-12-05 18:10:51 188
原创 uniapp使用vue-i18n国际化多国语言
uniapp是自带有i18n这个插件的,如果没有npm安装即可此插件需要自己去给每一个需要国际化的字符去手动配置key,所以如果是已经完成的项目可能工作量就稍微有点大了。
2023-12-05 17:09:59 5215 3
原创 运行vue3项目报错:Error: The package “@esbuild/win32-x64“ could not be found, and is needed by esbuild.
然后大概意思是找不到esbuild这个包,但这个包又是必须的,自己明明又没有安装此包,不过估计应该是pinia所依赖的一个包。今天运行vue3项目的时候装了个pinia,然后再运行项目,突然报错。解决方法:执行命令npm i esbuild安装此包即可运行。
2023-11-22 23:11:00 2144
原创 vue3注意事项(更新中···)
之前在写vue2项目的时候习惯了less于是用/deep/ .className{}方式来选择类名,然后切换到vue+scss之后发现/deep/写法不管用了,一番查找才发现/deep/是less里面的写法,而在scss中一般采用 ::v-deep,结果编译的时候还是报警告,再次查找原来vue3中有特定的写法:deep()
2023-11-13 23:15:55 203
原创 nvm安装及使用,nodejs版本切换使用
这一步是存放当前nodejs版本的,它会默认给你创建一个nodejs文件夹,或者你自己新建一个也可以,当你安装完成后你会神奇的发现你选择的这个nodejs文件夹不见了,所以选择文件的时候要注意下,尽量选择空白文件夹。:安装的时候尽量把自己电脑上原本的版本给卸载防止出意外,如果没卸载安装的时候nvm会提示是否允许对当前电脑的nodejs进行控制,选择是就可以了 (为防止出问题最好还是卸载)安装nvm完成后之后记得安装对应的nodejs版本,并且要use使用,不然是无法使用nodejs的。
2023-11-10 10:41:34 162
原创 js堆栈函数及断点调试(简单使用,仅供自己参考)
第一步打开调试面板点击源代码tab再点击webpack找到自己写的代码(以vue项目为例,构建完后的项目是不能调试的)第三步,点击调试操作箭头,可以通过单步调试来观察代码执行的顺序。第二步在你需要调试的地方点击一下卡个点,如上图所示,然后。调试完之后记得关闭断点。
2023-11-09 17:23:07 195
原创 js树形数组遍历练习,扁平化、格式化、获取节点父级
数组扁平化的方式很多,这里主要是用递归处理,除此之外还有正则、扩展运算符等等。这个方式需要熟悉函数在堆栈中的调用顺序才好理解否则理解起来有点绕。使用for改变原数组的方式。
2023-11-08 17:57:21 427
原创 使用<a>标签进行文件下载出现文件名称乱码、文件名变下划线
在使用a标签下载文件时出现了如图所示文件名称显示错误,原因是因为文件中包含中文导致乱码。使用axios(记得引入axios)Ajax原理也是一样的转blob后下载。
2023-11-07 17:34:58 2246
原创 vue2知识补充
query参数有多层对象时,刷新丢失可以使用JSON.stringify解决。二者是用来传递参数的,适用于父组件给后代组件传递参数。一般用于动态结构中如elementUI中的表格等等。params参数丢失:还没试过怎么解决。
2023-11-03 18:04:02 310
原创 运行项目报错error in ./node_modules/marked/lib/marked.umd.js
先运行指令:npm view marked versions 查看包的所有版本,然后再查看当前的版本,发现当前是最新的9.1.4版本,然后往回找个合适的大版本(7.0、8.0左右的)安装一下就OK啦。今天跑项目时发现一个报错,问题出在marked这个包,然后翻看package.json里面也没有这个包,全局搜索项目也没有这个包相关的信息,可它就是报错,索性直接把它给卸载发现还是报错。解决方法:安装更低的版本。报错原因:包的版本太高。
2023-10-31 17:39:31 4916 7
原创 在vue使用wangEditor(简单使用)
由于我自定义了Toolbar的菜单配置所以覆盖了原本的默认菜单,如果不自定义将使用默认的菜单配置。不同的版本使用方法都不一样,这里以目前最新的参考官网方法使用2023-09-28。然后就是参考官网示例操作就好了,官网有现成的代码示例,这里再加点注意事项注释。,注意editor跟editor-for-vue两个都要装。
2023-09-28 23:51:25 938
原创 vue点击容器外隐藏元素(点击非本身以外的部分隐藏元素)
2.记得在添加事件的时候传第三个参数阻止冒泡,不然点击本身的时候也会触发事件导致其无法显示,也可以在显示事件添加.stop来阻止冒泡。也可以通过vue的this.$refs.showBoxRef.$el.contains()1.如果不是在非必要的情况下可以使用v-show,这样就不会有dom渲染先后顺序的问题。4.不要直接使用this.$refs['refName']否则就会报下面的错,如图点击蓝色边框以外任意地方隐藏蓝色边框容器(不使用输入框的失焦事件)3.添加完事件记得要移除事件。
2023-09-19 23:43:15 1023
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人