Binglianxiaojiao的博客

时间格式化，我这边推荐的是dayjs工具函数，因为Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。在前端项目开发中，不可避免的会和时间打上交道，我为什么这么笃定呢，因为避免的人不会来看我这篇文章-_-嘿嘿~~公式大致是：dayjs(结束时间).diff(开始时间，单位)减：subtract(数量，单位)加：add(数量，单位)简单的举例一下使用方法。

在vue项目中，经常会使用到axios来与后台进行数据交互，axios丰富的api满足我们基本的需求。但是对于项目而言，每次都需要对异常进行捕获或者处理的话，代码会很繁重冗余。我们需要将其公共部分封装起来，比如异常处理，请求拦截等。本文讲述，如何在vue中封装axios。创建utils>request.js文件。创建api>index.js文件。

父组件：组件直接使用 v-model绑定变量即可。

封装插件的流程大致为：明确需求、定义 Props 和 Events、使用插槽slot、保持组件独立性、样式隔离、可复用性可扩展性；设计原则遵循单一职责原则、可复用性原则、可配置性原则、单向数据流原则进行对组件进行设计封装。props接收传入数据、emit完成组件事件触发和数据传递、slot使得组件灵活性变强，增加可复用性。如果不考虑好与坏，那全部踢掉，遵循三行原则：（好用就行、好看就行、好写就行）如何封装Vue组件？2、可复用性原则（使组件成为通用的解决方案）3、可配置性原则（增加组件的灵活性）

once 阻止事件重复触发（once与stop不能一起使用，否则再次触发事件，依然会冒泡）(*).lazy 不立刻更新，输入后光标失焦或者回车才更新内容。.prevent.stop 阻止默认事件的同时阻止冒泡。@keyup.enter="enterFn" 回车事件。.stop 阻止事件冒泡(*)(用于子级)语法：表单修饰符 v-model.xxxx。.self 点击自身才触发(用于父级).prevent 阻止默认事件(*).trim 去除前后空格。.number 数值。

特点：可以在引用组件里面使用到子组件的数据。匿名槽口统一叫做：default。特点：可以按需对组件的渲染。

本文介绍了Vue的生命周期概念和8个钩子函数的作用和用法，以及在不同阶段可以获取的数据和DOM元素。通过代码示例和注释，帮助读者理解Vue的初始化，更新，销毁等过程。

概念：监听数据变化，当数据更新是自动执行函数应用场景：搜索数据、当一个数据发生了变化需要进行二外的操作时需要用到watch。

本文讲解在vue项目（vue2&vue3）中使用vue-qr组件快速实现链接生成二维码的功能，废话不多说，下面直接上代码：

不再使用es2015，改成@babel/preset-env，两者都是用来编译es6语法；好处：分离main.js文件代码，简化代码结构，让代码更加具可读性。版本为4.x，babel配置文件为babel.config.js。3、安装 babel-plugin-component。，我们可以只引入需要的组件，以达到减小项目体积的目的。推荐用代码分离法，也可在main.js中直接书写。在main.js中进行调用js文件。4、 .babelrc 文件配置。2、安装element ui。1、创建vue脚手架。

但是观察下来，你会发现配置路由这一块会有些许眼熟，正是与我们文件路径重合啦有一个大胆的想法，就是直接使用我们的文件路径当做路由，便可以免去路由配置这一动作本文将介绍如何使用 Vue2+ webpack 实现路由自动配置。

el-select下拉框在项目中是常用到的一个下拉框组件，通过v-model绑定对应的值即可简单完成使用。但是往往会在一些业务需求上，我们得记录多个值时，单独绑定一个值往往已经满足不了我们的开发需求。

三个文件内容大致相同，不同的为VUE_APP_BASE_API的值。其余同理，即在运行命令的后面增加上--mode xxx。package.json文件。在根目录创建三个文件。

对于脚手架的不同，对应的引入方式也会有所不同一、webpack脚手架。

功能可用于前端vue项目vue-router自动生成、utils工具包统一汇总、store仓库统一汇总等方面。1、webpack require.context(参数一,参数二,参数三)2、vite import.meta.globEager('参数一')例如：（'@/utils',false,/.js$/）参数二（boolaen）：是否获取子目录文件。参数一（string）：指定文件夹路径。例如：（'@/utils/*.js'）参数一（正则）：文件路径及匹配文件。

基于element-ui的el-cascader级联选择器组件封装一个区域地址选择组件，废话不多说，下面直接上代码：

1、基于vue-cil（webpack）框架项目。字段，模拟请求来自目标服务器。2、基于vite框架项目。