![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 83
Vue.js
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
面试题-Vue(构建->打包)
从构建到打包,Vue 项目经历了初始化、开发、编译、打包和优化等多个步骤。这些步骤通过 Vue CLI、webpack、Babel 等工具协同工作,最终生成可以在生产环境中部署的高性能、优化的静态资源文件。入口配置:定义应用程序的入口文件(通常是模块解析:通过解析入口文件及其依赖,构建模块依赖图。加载器和插件:使用各种加载器和插件处理不同类型的文件。代码打包:将所有模块打包成一个或多个 bundle 文件。优化:对生成的代码进行各种优化,如代码分割、压缩和缓存优化。输出。转载 2024-06-05 09:09:57 · 37 阅读 · 0 评论 -
Vue项目Nginx子目录部署
生产环境中Vue项目我们一般会部署在域名的子目录下,在了解如何部署时我们先了解下Vue构建相关的基础知识。Vue CLI目前已经处于维护状态,一般老项目可能还在用它来开发,Vue CLI打包时基于。,如果想在Nginx中指定前缀访问静态资源和文件,需要在打包构建时配置。中进行修改,指定base配置即可,这里我们指定了。目录下找名为hwc的目录,以及该目录下的文件.目前是Vu3主流构建工具,打包配置我们可以在。,也就是说所有的静态资源都会带上该前缀。在Nginx配置中,我们加了一项。转载 2024-06-04 08:45:19 · 47 阅读 · 0 评论 -
Vue3 + Vite + TypeScript 项目搭建总结
最后就可以在页面使用 element 组件啦~至此一个完整的 vue3+vite+ts 项目就搭建完成了,还有待完善,包括 vite 配置还有很多优化的地方,易用性组件等,等下期一起整理哦。node 版本>=12.0.0,这边建议直接更新到 16+(我本地的是最新的 v20.11.1)文件,复制以下代码,测试一下路由跳转。,版本错误的话无法使用路由进行跳转。此时可以在 src 目录下新建一个。路由配置成功,页面跳转成功。:在.vue 文件增加。:vue3 最好安装。转载 2024-06-04 08:42:13 · 30 阅读 · 0 评论 -
总结 Vue 中常用的4种高级特性!
props: {转载 2024-06-03 08:57:58 · 9 阅读 · 0 评论 -
谈谈前端路由的实现原理【hash&history】
本期文章主要介绍了路由这个概念,以及重点讲前端实现路由的两种模式,哈希刚好就是浏览器承认他,接了哈希值改变url不会引起页面的刷新,然后通过得知哈希值;history就是有个方法,可以改变url不引起页面刷新的pushState,通过得知url,这个模式下前进回退需要通过popState事件来触发。❝本次学习代码已上传至GitHub学习仓库:(https://github.com/DolphinFeng/CodeSpace)转载 2024-06-03 08:41:37 · 5 阅读 · 0 评论 -
前端开发者必须知道的日常小技巧!
对于一些请求,接口返回的数据总有相同的字段,比如下面这种请求分页返回的data总会有current、page、records、searchCount、size、total等几个字段,但是records里面的字段可能就要具体情况具体定义。转载 2024-06-03 08:40:05 · 59 阅读 · 0 评论 -
vue3将一个全局脚本添加在index.html中,在vue3页面中直接使用
在大型应用中,建议使用模块系统(ES6 modules,CommonJS)管理你的代码。举个例子: 下面是一段随机生成二级域名的代码,先随机取出一个主域名,然后再根据主域名随机生成4个二级域名,存储在浏览器缓存中,并且设置过期时间。但是问题是,每次我们修改这个配置的时候,都要重新编译一遍项目。中的全局脚本和 Vue 组件文件的模块作用域是隔离的。文件中,并在 Vue 页面中使用,你需要将该脚本写入。标签内,同时,将结果放在全局对象上,例如。然后,在 Vue 组件中,你可以通过。转载 2024-05-31 09:17:46 · 99 阅读 · 0 评论 -
「Vue2+Vue3」 的 62 个知识点,看看你掌握了几个?
这里只说Vue2的bind:指令绑定到指定元素时调用,只调用一次inserted:指定元素插入父节点时调用update:所在组件的 VNode 更新时调用:所在组件以及其子组件 VNode 全部更新后调用unbind:只调用一次,指令与元素解绑时调用props: {num: {// 返回值为false则验证不通过,报错return [== -1model: {转载 2024-05-31 09:02:51 · 10 阅读 · 0 评论 -
Vue 项目构建优化汇总
在开发大型前端项目时,往往是一个需求对应一个分支,当完成需求后,就需要将代码打包、部署。代码通常需要部署到多个环境中,这些环境包括:日常环境、测试环境、回归环境和生产环境。回归环境用于在发布前进行测试,生产环境是用户访问的版本。随着时间的推移,项目中会不断引入许多新的依赖(如第三方库、插件等)和图片资源,代码数量也会逐渐增多,从而导致构建项目更加耗时,这也意味着部署项目需要消耗更长的时间。我负责的项目构建需要 66 秒,有时将代码部署到日常环境后,还需要临时修改重新部署;转载 2024-05-31 08:46:28 · 27 阅读 · 0 评论 -
bpmn-js中实现shape的内置属性、节点的默认配置
若是深度定制可以通过在shape创建的时候配置shape属性实现,在开始添加内置属性之前,我们先来了解下shape在bpmn-js中直接创建的场景,以及内置属性创建的具体格式。两种方式均可实现内置属性节点的配置插入,第一种方式通过适配式的方式实现,尽可能少的影响建模其的独立性和完整性,后一种方式比较直接,一次性完成创建配置,减少shape的绘制次数,但代码侵入性较高,不利于不同场景的适配共用。具体可根据需求选择使用何种方式进行实现。转载 2024-05-31 08:42:24 · 159 阅读 · 0 评论 -
分享当下较新的30道Vue面试题!
答案v-model可以看成是方法的语法糖(组件)。原生的v-model,会根据标签的不同生成不同的事件与属性。解析一个指令来。自定义:自己写model属性,里面放上prop和event答案避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例,如果data是一个对象的话,这些实例用的是同一个构造函数。为了保证组件的数据独立,要求每个组件都必须通过data函数返回一个对象作为组件的状态。转载 2024-05-30 08:50:54 · 7 阅读 · 0 评论 -
vue router3 和 vue router4 的区别
而在Vue Router 3中,则是直接在组件实例中使用this.$router来获取路由实例,并使用this.$route来获取路由对象。而在Vue Router 3中,则是在组件的实例方法中使用this.$router来获取路由实例,并使用this.$route来获取路由对象。:在Vue Router 4中,使用createWebHistory或createWebHashHistory来定义路由模式,而在Vue Router 3中,则是通过在路由实例中设置mode属性来定义。转载 2024-05-29 08:56:07 · 62 阅读 · 0 评论 -
Vite4.3+Typescript+Vue3+Pinia 最新搭建企业级前端项目
注意:按需引入时element-plus不需要在main.ts中引入,插件会自动挂载处理,可以在全局直接使用。源码地址:https://github.com/cwjbjy/vite-vue-ts-seed。rules更多配置:https://eslint.org/docs/latest/rules/vite:使用 new URL(url, import.meta.url).href 处理。node版本不足16的,使用 yarn test 启动命令,读取.env 与 .env.test的内容。转载 2024-05-27 09:05:14 · 72 阅读 · 0 评论 -
Async 是如何被 JavaScript 实现的
无论是面试过程还是日常业务开发,相信大多数前端开发者可以熟练使用 Async/Await 作为异步任务的终极处理方案。但是对于 Async 函数的具体实现过程只是知其然不知所以然,仅仅了解它是基于 Promise 和 Generator 生成器函数的语法糖。提及 JavaScript 中 Async 函数的内部实现原理,大多数开发者并不清楚这一过程。甚至从来没有思考过 Async 所谓语法糖是如何被 JavaScript 组合而来的。转载 2024-05-24 11:47:51 · 16 阅读 · 0 评论 -
Vue 3 异步组件与同步组件
在大型应用中,可以将不同模块的组件定义为异步组件,根据用户访问的模块来按需加载相应的组件。通过将路由组件定义为异步组件,可以根据路由的动态变化来按需加载组件,提高路由切换的响应速度。:对于一些较大的组件,例如包含大量代码或资源的组件,可以将其定义为异步组件,以避免在应用初始化时一次性加载过多的代码。:在应用中同时使用异步组件和同步组件时,由于异步组件的动态加载特性,可能会导致组件加载的顺序问题。:对于异步组件,可以使用 webpack 的代码分割功能来拆分和按需加载组件,以进一步优化应用的性能。转载 2024-05-24 11:45:49 · 99 阅读 · 0 评论 -
Vue页面生成pdf
6、注册完之后就可以直接使用了,回到想要生成pdf的页面,如点击提交按钮需要生成pdf,我们就可以在提交方法中调用getpdf这个方法。2、在你想要生成pdf的元素上添加一个id,如下所示我添加了一个 id = pdfDom。3、在项目公共方法中创建i个生成pdf的方法,如在目录utils下创建一个pdf.js。问题:最近项目有个需求,将前端页面生成PDF。reportName:生成pdf的标题。1、首先生成报告页面,也就是常规页面。4、然后就是写一个生成pdf的方法。dom:想要生成pdf的元素。转载 2024-05-24 11:44:45 · 34 阅读 · 0 评论 -
【无标题】
以上的案例是mustache最简单的使用,下面来额外介绍一些常用的使用场景。首先来熟悉一下mustache的语法,下面来介绍一些场景来使用这些语法{{key}}{{.}}{{&key}}上面只教大家实现一个最最简单的脚手架。其功能就只有一个模板文件生成。虽然简单,但是这些都是脚手架的入门功,代码已经上传到 GitHub ( https://github.com/532pyh/mortal-cli ),大家可以下载下来,自己实践一下,光看不练永远学不会。转载 2024-05-24 11:20:11 · 6 阅读 · 0 评论 -
提升Vue技能:分享8个超实用的自定义指令
在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过方式注册全局指令。然后在入口文件中进行Vue.use()调用。转载 2024-05-24 11:09:36 · 9 阅读 · 0 评论 -
十分钟,带你了解 Vue3 的新写法
首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法,正如你看到的那样,无论是代码行数,还是代码的精简度, 的方式是最简单的形式。如果你对 Vue 很熟悉,那么,我推荐你使用 的方式。这种写法,让 Vue3 成了我最喜欢的前端框架。如果你还是前端新人,那么,我推荐你先学习第一种写法。转载 2024-05-24 11:03:55 · 109 阅读 · 0 评论 -
60 个 Vue 常见问题汇总及解决方案
具体配置在webpack.base.conf.js里面的rules里面的 url-loader,这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。所以keep-alive一般缓存都是一些列表页,不会有太多的操作,更多的只是结果集的更换..给路由的组件meta增加一个标志位,结合v-if就可以按需加上缓存了!可以的,SSR(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html,现在 vue 的服务端开发框架有这么个比较流行,如下Nuxt.js。转载 2024-05-23 08:59:12 · 18 阅读 · 0 评论 -
Vue3 避免直接引用对象/数组 props
这些规范允许子组件影响父组件的状态...... 下面的官方文档还指出,最好的做法是避免此类更改,除非设计在父子之间紧密耦合,因为这使得以后很难确定数据流。传递,则子组件无法直接修改父组件传递的对象或数组的属性。但是,如果对象或数组属性发生更改,Vue3 将检测到更改并更新父组件的数据。作为子组件传递时,无法更改对象或数组本身,但可以更改对象或数组的嵌套属性。是单值的,因此子组件中的更改将被视为与局部变量的更改相同。定义为计算为新数组和新对象的值。值将不会反映父组件中的更改。也将始终引用新的数组和新的对象。转载 2024-05-23 08:55:52 · 52 阅读 · 0 评论 -
10个Vue开发技巧
Vue开发技巧转载 2024-05-22 09:41:31 · 14 阅读 · 0 评论 -
vue3项目rem自适应大小如何实现
像手机淘宝网,就是在根标签设置font-size,然后使用rem去设置尺寸大小,它们可能有更精细化的优化处理,这里就只讲普通的实现方法。所以,很多人寻求各种解决方案,我们现在的很多移动端框架都是支持了的,包括小程序,很多都采用了rpx的方式,这里不去深究它们的实现方案。导致我们的布局在某些小屏或者大屏上与UI的表现并不一致。随着现在互联网设备的日益更新,各大尺寸的屏幕参差不穷。转载 2024-05-22 08:41:40 · 218 阅读 · 0 评论 -
2024前端面试之Vue3基础
通过Suspense组件,我们可以在异步组件加载时显示一个占位符,提供更好的用户体验,并且在异步组件加载失败时进行错误处理,避免影响其他部分的页面渲染。总结:teleport是Vue 3中的一个特性,它允许我们在组件中创建传送门,将组件内容渲染到DOM中的任意位置,这在处理弹出式窗口、模态框等场景时非常有用。teleport的作用是在组件中创建一个包含内容的"传送门",将这个内容渲染到DOM中的另一个位置,通常是在组件的外部。这样可以在应用的任何位置使用这个组件,并通过teleport指定要渲染的位置。转载 2024-05-21 08:54:41 · 14 阅读 · 0 评论 -
2023前端面试之Vue进阶(三)
在Vue 3.0中,Composition API是一种新的API风格,它与之前的Options API相比提供了更灵活和强大的方式来组织组件的逻辑代码。Composition API旨在解决Options API在大型复杂组件中逻辑难以维护的问题,同时也提高了代码的可复用性。在Vue 2.x中,使用Options API是定义组件的主要方式。转载 2024-05-20 10:04:26 · 9 阅读 · 0 评论 -
2023前端面试之Vue进阶(一)
在Vue中,异步组件是一种特殊类型的组件,其加载和渲染是异步完成的。它的原理是通过动态导入组件,只有在组件需要使用时才进行加载,而不是在应用初始化时立即加载所有组件。这样可以减少初始加载时间,优化应用的性能。异步组件的原理和使用方法如下:原理:在Vue中,当解析到组件标签时,会触发组件的加载。对于异步组件,Vue使用动态导入(Dynamic Import)的方式,通过import()函数来异步加载组件的定义。转载 2024-05-20 10:04:09 · 8 阅读 · 0 评论 -
2024前端面试之Vue3进阶
TypeScript支持: Vue 3的源码是使用TypeScript编写的,这意味着你可以直接在TypeScript项目中使用Vue 3,并获得静态类型检查的好处。声明Props和Ref类型: 在Vue 3中,你可以使用 defineProps 和 defineEmits 函数来声明组件的Props和事件类型,这可以让TypeScript检查这些属性和事件的类型是否与定义一致。v-model的参数: 在Vue 3中,你可以为 v-model 提供一个参数,用于将数据绑定到组件的指定属性。转载 2024-05-20 10:03:53 · 16 阅读 · 0 评论 -
2023前端面试之Vue进阶(二)
在Vue中,混入(mixins)是一种将一组选项合并到Vue组件中的方式。它允许开发者将一些通用的功能、逻辑或代码片段抽取出来,然后通过混入将它们注入到多个组件中,实现代码的复用和共享。混入的作用是在不改变组件继承关系的前提下,让多个组件共享同一份代码。通过混入,可以在组件中加入共享的生命周期钩子、方法、计算属性、以及其他组件选项。// 定义一个混入对象data() {return {},methods: {// 在组件中使用混入// 组件选项...转载 2024-05-20 10:03:34 · 9 阅读 · 0 评论 -
2024前端面试之Vue基础
响应式数据绑定」: Vue.js采用了数据劫持和观察机制,能够实时监听数据的变化,并自动更新相应的DOM,使得数据和界面保持同步,大大简化了前端开发流程。「组件化」: Vue.js鼓励开发者将用户界面拆分成独立的、可复用的组件,每个组件包含了自己的模板、逻辑和样式,使得代码结构更加清晰、易于维护。「指令系统」: Vue.js提供了丰富的指令,用于扩展HTML元素的功能,例如v-if、v-for、v-bind、v-on等,使得开发者可以在模板中声明式地处理逻辑和操作DOM。「模板引擎」转载 2024-05-20 09:59:35 · 9 阅读 · 0 评论 -
前端面试之HTTP协议(下)
Keep-Alive 是一种HTTP协议的机制,用于在单个TCP连接上保持持续的连接状态,而不是为每个HTTP请求和响应都建立和关闭一个新的TCP连接。这个机制的目的是减少网络通信的延迟,提高性能,并降低服务器的负担。减少连接建立和关闭的开销:在传统的HTTP/1.0中,每次发送HTTP请求时都需要建立一个新的TCP连接,并在请求完成后立即关闭它。这样的连接开销包括三次握手和四次挥手等步骤,这些操作都需要时间和资源。转载 2024-05-20 09:58:20 · 10 阅读 · 0 评论 -
vue源码中值得学习的函数方法
内置标签的时候,如果用数组类遍历那么将要循环很多次获取结果,如果把数组转为对象,把标签名设置为对象的。这边主要学习用es5原生方法实现继承的,当然了,es6中 class类直接用。收集依赖,从而触发更新视图,但是数组却无法监测到数据的变化,但是为什么数组在使用。浅拷贝写的也很有意思,先类型判断再递归调用,总体也不难,学一下思路。,那么不用依次遍历查找,只需要查找一次就能获取结果,提高了查找效率。类型,然后用slice截取第8位到倒一位,得到结果为。函数,原来是为了拍平数组,使二维数组扁平化,类似。转载 2024-05-13 08:48:06 · 9 阅读 · 0 评论 -
vue2的动态路由
在这个例子中,我们使用字符串拼接的方式来生成带有动态参数的链接,并通过。这样,您就可以在 Vue 2 中实现动态路由。若要生成带有动态参数的链接并进行页面跳转,可以使用。是一个占位符,表示一个动态的参数。来获取动态路由中传递的参数,并在组件中进行展示。在这个例子中,我们定义了一个动态路由。在要接收动态参数的组件中,可以通过。或者编程式导航进行页面跳转。在这个例子中,我们使用了。获取到动态传递的参数值。都会匹配到同一个组件。或者编程式导航(通过。组件,并且您可以通过。转载 2024-05-13 08:45:05 · 24 阅读 · 0 评论 -
Vue3事件冒泡
事件冒泡是指当一个元素上的事件被触发时,它会向父元素传播,直到到达文档的根节点。在JS中,事件冒泡是默认行为。这意味着,如果你在一个子组件上绑定了一个事件,当该事件被触发时,它会沿着组件树向上冒泡,直到到达根组件。转载 2024-05-13 08:44:21 · 61 阅读 · 0 评论 -
vue3动态路由实现
在这个例子中,我们使用字符串拼接的方式来生成带有动态参数的链接,并通过。这样,您就可以在 Vue 3 中实现动态路由。若要生成带有动态参数的链接并进行页面跳转,可以使用。是一个占位符,表示一个动态的参数。来获取动态路由中传递的参数,并在组件中进行展示。在这个例子中,我们定义了一个动态路由。在要接收动态参数的组件中,可以通过。或者编程式导航进行页面跳转。在这个例子中,我们使用了。获取到动态传递的参数值。都会匹配到同一个组件。或者编程式导航(通过。组件,并且您可以通过。转载 2024-05-10 08:44:54 · 35 阅读 · 0 评论 -
Vue刨根问底虚拟DOM
虚拟DOM是一个有力的工具,但并不是适用于所有情况的解决方案。总结,DIFF算法的原理是通过递归比较两个树的节点,并标记需要更新、替换、插入、移动或删除的差异,以减少对真实DOM的操作,提高性能。总结,虚拟DOM的真正意义在于它作为一种性能优化技术,通过在JavaScript中构建和操作虚拟DOM树,减少不必要的DOM操作,提高前端应用的性能和用户体验。总结,虚拟DOM是前端框架中的一种性能优化技术,通过在JavaScript中构建和操作虚拟DOM树,减少不必要的DOM操作,从而提高页面的性能和用户体验。转载 2024-05-09 16:53:02 · 11 阅读 · 0 评论 -
Vue中的keep-alive
当一个被缓存的组件需要显示时,它会被从缓存中取出,并插入到实际的 DOM 中。是 Vue.js 中的一个抽象组件,用于缓存组件的状态,以便在切换组件时保留其状态和避免重新渲染。简单的结果如下,动态组件在child1,child2之间来回切换,当第二次切到child1时,child1保留着原来的数据状态,num = 5。这意味着当一个被缓存的组件被激活时,它会触发。标识组件:每个被缓存的组件都需要有一个唯一的标识符,这通常是组件的名称。中的组件被销毁时,它的实例不会被销毁,而是被缓存起来。转载 2024-05-09 16:52:12 · 12 阅读 · 0 评论 -
Vue中的nextTick
熟悉Vue的前端,想必对Vue里的nexTick也很熟悉了,用的时候都知道他是延迟回调,有时候用起来甚至和setTimeout看起来是同样的效果。但他和setTimeout到底有什么区别呢?它是如何实现的?本文就nextTick的实现引入,来讨论一下js中的异步和同步,微任务和宏任务。转载 2024-05-09 16:51:27 · 14 阅读 · 0 评论 -
彻底弄清Vue3 中ref、toRef、toRefs、isRef、unref等
ref(): 接收一个值并返回一个响应式的对象,可以使用.value 属性来访问和修改这个值。toRef(obj, key): 根据一个响应式对象中的一个属性,创建一个响应式的 ref,并且该 ref 和原对象中的属性保持同步。-toRefs(obj): 将一个响应式对象转换成一个普通对象,其中普通对象的每个属性都是响应式的 ref。isRef(value): 判断某个值是否是 ref 对象。unref(value): 用于解除响应式引用。转载 2024-05-09 11:54:54 · 1283 阅读 · 0 评论 -
Vue中的插槽(Slot)
具名作用域插槽的工作方式也是类似的,插槽props可以作为v-slot指令的值被访问到:v-slot:header="props",也可以直接缩写成#header="props",这是缩写形式。其实从打印结果可以看出,slot本质就是Proxy代理的对象,属性名就是各个插槽的名字,属性值就是对应的函数,调用函数得到的结果就是虚拟结点。作用域插槽是一种特殊的插槽,它允许我们在插槽内部访问组件实例的数据,允许父组件将数据传递到子组件中,并在子组件中使用。定义作用域插槽,并在使用组件时,使用。转载 2024-05-08 08:36:23 · 59 阅读 · 0 评论 -
Vue3 封装 ECharts 通用组件
其次,由于 flex、grid 这种布局可以不需要显示地指定 width、height,这就导致 echarts 在自适应的过程中无法明确地获取到容器的宽高,所以即便触发了 resize 事件,但是重绘的图表还是之前默认的宽高。请注意:在使用时,我们必须指定容器的宽高,否则无法显示,因为图表在绘制时会自动获取父容器的宽高。:当前 DOM 节点挂载的 ECharts 实例,可用于调用实例上的方法,注册事件,自适应等;:初始化,在此获取 DOM 节点,挂载实例,注册事件,并调用。转载 2024-05-08 08:36:06 · 264 阅读 · 0 评论