- 博客(55)
- 收藏
- 关注
原创 uniapp中axios封装和环境配置
最好锁定版本,避免bug这个依赖主要是适配小程序网络请求的适配器,为了解决uniapp 适配,避免报adapter is not a function错误。
2023-07-19 11:28:59
2389
2
原创 14-Vue插槽(slot),制作可复用组件
Vue 将<slot>元素作为承载分发内容的出口。插槽内可以包含任何模板代码,包括 HTML或其它组件。在某些组件的模板中,
2023-07-11 21:48:45
506
原创 eslint 命名规范Component name “index“ should always be multi-word.
在.eslintrc.js文件中的rules中添加组件命名忽略规则。这里使用index.vue作为页面入口文件,因此忽略index。2、vue.config.js 文件中,关闭检验。使用驼峰命名或者 - 连接单词。4、官方建议的设置,
2023-07-11 00:53:34
735
原创 13-Vue长列表优化 vue-virtual-scroller
回答:在大型的企业级项目中经常要渲染大量的数据,这种长列表是一个很普遍的场景,当列表内容越来越多就会导致页面滑动卡顿白屏数据渲染较慢的问题;这种情况主要发生在小程序、移动端或者后台管理的页面当中;通常我们会采用分页的方式进行内容的逐渐获取,但是当内容越来越多时;比如移动端的下拉刷新,不停的往上翻,到底部会加载更多内容,这样一来列表中会新增很多的元素,元素多了以后会触发浏览器的重排重绘,无论是内存的占用还是GPU的渲染都会带来很大的性能损耗,导致页面滑动卡顿数据渲染较慢。
2023-07-10 23:01:53
6352
2
原创 11-Vue常见优化手段
使用key对于通过循环生成的列表,应给每个列表项一个稳定且唯一的key,这有利于在列表变动时,尽量少的删除,新增,改动元素index作为key值是唯一的,但不够稳定,比如插入某元素,会导致后面的所有元素重新渲染,而我们想要的是只渲染新加的元素比如有一个列表,我们需要在中间插入一个元素,在不使用 key 或者使用 index 作为 key 会发生什么变化呢?先看个图如图的 li1 和 li2 不会重新渲染,这个没有争议的。而 li3、li4、li5 都会重新渲染。
2023-07-01 04:20:43
442
1
原创 10-Vue从入门到手撕
学习路线:H5 + CSS3 ---> ES6 ---> 网络 ---> 第三方库 ---> 工程化 --->Vue不经过前面的铺垫是无法学习vue的,就算学了还得倒回去补知识点展现VueVue源码分析,走进作者的内心世界创建Vue实例配置对象,数据Vue告诉我们界面和数据是分开的,在开发中只需要关注两件事,一个是界面数据长什么样子,一个是界面是如何根据数据生成出来的,数据决定了界面长什么样子。
2023-06-27 23:56:24
222
原创 07-歌词滚动效果
现在学习的代码工作中不一定会需要,如果有,也已经做成了产品和库,前端重点是创造,面试官考验你的能力是会提出最刁钻的问题给你的。
2023-06-24 22:49:27
515
原创 异步组件的使用
webpack打包后的dist目录中,没有异步组件的情况下,在首次加载页面时app.js会把所有页面的js全部加载出来,浪费性能。使用异步组件,会把每页的js文件单独分出来,点击那个页面就加载哪个页面的js,提升性能。当然,只有当app.js打包后很大至少超过1MB的时候,才适合使用。否则http请求的代价损耗高于文件大小带来的代价损耗就得不偿失了。如下,首页是1.js。
2023-06-17 18:08:00
106
原创 webpack打包上线
将dist目录里的文件复制到服务器目录下,与后端的接口文件同级,本地访问localhost就可以看到项目能够正常运行了。如果想要打包的文件放在后端服务器目录的一个文件中,通过localhost/project 这样的形式去访问。可以到config的index.js中修改 build的assetsPublicPath就可以访问了。项目中会多出一个dist目录,就是我们要上线的内容。1、在终端运行npm run build。这样就是一个简单的项目打包上线的过程。在本地开启一个服务器。
2023-06-17 17:48:38
164
原创 项目真机测试
有些机型浏览器不支持promise,下载babel-polyfill可以解决。把项目地址复制下使用草料二维码生成器 生成二维码用手机扫码即可查看。此时运行项目,可以通过ip地址访问项目了。重新启动项目npm run dev。在main.js中引入即可。
2023-06-17 17:29:54
92
原创 03-this指向
构造函数和普通函数一样,可以直接调用的,没有new之前指向Window。new会创建对象,将构造函数的this指向创建出来的对象。原理:全局函数其实是window(全局对象)的方法。普通函数,谁调用指向谁;箭头函数,在哪里定义指向谁;在构造函数调用前加new关键字,代表创建实例对象。计时器包裹普通函数,this指向Window。计时器包裹箭头函数,this指向其外层函数。此时this指向f,f是一个空对象。构造函数:是用来创建对象的。箭头函数外指向谁就指向谁;箭头函数没有this。
2023-06-16 11:03:19
78
原创 手写浅拷贝和深拷贝
浅拷贝:只发生了值本身拷贝,指针指向的还是同一个地址,没有产生资源拷贝。深拷贝:不仅发生指针本身拷贝,还产生了新的资源分配,指针指向不同地址。
2023-05-31 21:23:29
518
原创 addRoute动态添加路由导致浏览器警告
在动态添加路由的时候会在控制栏出现各种各样的路由警告,刚开始以为是路由name重名问题引起,后查询相关资料是添加引起的,在router/index.js文件下创建一个方法resetRouter()
2023-05-23 12:50:27
381
原创 element ui 按需引入及.babelrc配置
现在废弃了es2015,改为babel-preset-env 这个写法,注意引用位置,不然会报错。
2023-05-21 06:20:01
435
原创 点击子组件隐藏自身bug
在子组件最外侧div标签中添加@click.stop即可防止冒泡。$emit和父组件接收事件都没问题,点击子组件自身无法隐藏自己。是因为子组件的冒泡原理影响到事件的传递,
2023-05-20 05:52:42
44
原创 scrollBehavior使页面滚回顶部
console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。console.log(to) // to:要进入的目标路由对象,到哪里去。console.log(from) // from:离开的路由对象,哪里来。切换路由或者切换导航时触发。
2023-05-19 12:18:47
198
原创 FastMock及axios二次封装及$api全局变量挂载
三、config是对环境的配置,配置baseApi和mockApi。二、api负责mock数据的管理和ajax请求的二次封装。一、在src目录下配置两个文件夹api和config。
2023-05-18 05:53:54
255
原创 Swiper在Vue2中的使用
1. 下载swiper32. 在main.js中引入Vue-Awesome-Swiper3. 在swiper.vue中。
2023-05-18 05:28:39
5304
1
原创 2023高薪前端面试题(三、前端进阶——Vue)
Vue所有的界面事件,都是只去操作数据的,Jquery操作DOMVue所有界面的变动,都是根据数据自动绑定出来的,Jquery操作DOMMVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。
2023-05-16 00:04:12
1617
原创 2023高薪前端面试题(三、前端进阶——前端工程化)
WebPack可以看做是模块打包机:它做的事情是,分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。webpack 是一个现代 JavaScript 应用程序的静态模块打包器当webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。主要承担功能打包。
2023-05-12 17:37:03
141
原创 Git 在团队中的最佳实践--如何正确使用Git Flow
当你需要一个发布一个新Release的时候,我们基于Develop分支创建一个Release分支,完成Release后,我们合并到Master和Develop分支。也就是我们经常使用的Master分支,这个分支最近发布到生产环境的代码,最近发布的Release, 这个分支只能从其他分支合并,不能在这个分支直接修改。这个分支是我们是我们的主开发分支,包含所有要发布到下一个Release的代码,这个主要合并与其他分支,比如Feature分支。就像代码需要代码规范一样,代码管理同样需要一个清晰的流程和规范。
2023-05-12 17:10:29
175
原创 2023高薪前端面试题(二、前端核心——移动 web 开发)
cdn的原理主要答出负载均衡和缓存再就是dns解析这三部分就行了吧,通过dns解析到全局负载均衡服务器,然后再到区域的负载均衡,之后根据一些条件来找合适的缓存服务器,如果第一次访问就从源站拿过来缓存。需要注意的是一切都是根据请求的ip来的,如果ip不合理,那么可能起不到加速效果。缓存和负载均衡的思想在减轻服务器压力方面其实是很常见的。1)CDN为了改善互联网的服务质量。(提高访问速度)2)构建了全国、全球级别的专网,让用户就近访问专网里的边缘节点,降低了传输延迟,实现了网站加速。
2023-05-12 03:05:06
1339
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人