自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(106)
  • 收藏
  • 关注

原创 ✨✨使用vue3打造一个el-form表单及高德地图的关联组件实例✨

💖示例图1:💖💖💖示例图2:💖💖💖💖示例图3:💖

2024-05-11 09:44:19 749 3

原创 原生微信小程序中案例--仿boss区域树选择列多选功能

区域三级列表, 有添加,编辑,删除功能。

2024-04-25 08:52:25 660

原创 ✨✨使用jq+layui的layer+laytpl实现横屏查看功能✨✨

【代码】✨✨使用jq+layui的layer+laytpl实现横屏查看功能✨✨。

2024-05-21 15:43:31 336

原创 git使用介绍

了解分支分支可以给使用者提供多个环境的可以,意味着你可以把你的工作从主干分支分离出来,然后进行开发,当开发完成之后,再将代码合并到主干分支中。以免在开发过程中影响主干。紧急修复bug方案命令总结查看分支git branch创建分支git branch 分支名切换分支git checkout 分支名分支合并(可能产生冲突)git merge 分支名注意:切换分支再合并删除分支git branch -d 分支名。

2024-05-20 09:02:25 229

原创 ✨✨使用jq+layui-tab+echarts+swiper实现选项卡轮播联动图表展示功能✨✨

【代码】✨✨使用jq+layui-tab+echarts+swiper实现选项卡轮播联动图表展示功能✨✨。

2024-05-20 08:24:41 978

原创 从零构建vue3+ts+prettier+stylelint+husky+Lint-staged+Commitlint项目

https://www.npmjs.com/package/eslint-import-resolver-typescript 解决@别名识别问题。eslint https://eslint.nodejs.cn/docs/latest/use/getting-started 代码质量检查工具。prettier https://www.prettier.cn/docs/index.html 代码风格格式化工具。: 一款工程性更强,轻量级,高度自定义,标准输出格式的。整合实现生成规范化且高度自定义的。

2024-05-11 10:23:54 651

原创 js原生写一个小小轮播案例

【代码】js原生写一个小小轮播案例。

2024-05-08 09:09:16 322

原创 js原生手写一个拖拽小功能

【代码】js原生手写一个拖拽小功能。

2024-05-08 09:00:19 531

原创 重温javascript --(五)可能你不知道的DOM和BOM对象简述

document。

2024-05-06 14:28:33 1015 2

原创 重温javascript --(四)数组以及方法案例介绍

二、方法1. 改变原数组push() 数组末尾添加pop() 删除unshift() 数组从 0 位开始添加shift() 从 0 位开始删除reverse() 数组翻转splice() 切片 sort() 排序练习

2024-05-06 13:52:08 269

原创 重温javascript --(三)对象

var a = {}

2024-04-26 08:21:57 864

原创 简述下低代码平台、webGIS、AIGC

低代码开发平台(LCDP)是一种无需编码或仅需少量代码就可以快速生成应用程序的开发平台。它允许开发人员通过图形化的用户界面,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。这种开发方式大大降低了编写代码的需求,提高了开发效率,缩短了开发周期。快速开发:通过可视化的开发工具和组件库,开发人员可以迅速构建应用程序。无需编写代码:平台核心理念是“少写代码”,开发人员可以通过拖拽组件、配置属性等方式完成应用程序的开发。可扩展性:平台提供了丰富的组件库和插件机制,开发人员可以根据需求扩展平台的功能。

2024-04-25 09:25:34 1053

原创 vue项目的Husky、env、editorconfig、eslintrc、tsconfig.json配置文件小聊

在这个文件中,你可以定义提交信息的规则,例如规定提交信息必须包含特定的前缀,或者规定提交信息的长度不能超过一定的限制等。这样做的好处是,我们可以在不同的环境中定义不同的变量,而不需要修改代码。会默认跟踪它们,但是有些文件并不需要跟踪,例如编译后的文件,日志文件,配置文件等等,这些文件可以通过。这个文件中定义的变量将会在所有的环境中被加载,包括开发环境、测试环境和生产环境。变量指向我们的生产服务器,而在测试环境中,我们可以将其指向我们的测试服务器,而不需要修改代码。文件,并且不同的环境会有不同的配置。

2024-04-24 08:53:34 1081 2

原创 web前端代码指南(vue3)

1. 命名规范2. 代码规范3. 代码注释4. 编写习惯5. git提交

2024-04-23 18:08:57 1130

原创 重温javascript --(二)函数

声明式表达式(函数表达式一般指 匿名函数)

2024-04-22 11:03:01 525 1

原创 重温javascript --(一)值的介绍

原始值stack栈: 遵循后进先出原则,中主要存放一些基本类型的变量和对象的引用。栈内不可修改值,内存满才会实现二次值覆盖引用值heap堆:用于复杂数据类型(引用类型)分配空间。引用值在堆内存中,栈内存中存储的是堆内存的引用图示:var a = {},var b = {},为什么 a===b 为 false解:声明a和b的时候,值{}依次在堆里创建了空间,并分别给a和b暴露了一个指针路径===比较的是a和b的指针路径,虽然a和b都为{},但是路径不一样,所以a===b为false。

2024-04-19 12:52:10 521

原创 webpack5高级--04_ 优化代码运行性能

Code Split。

2024-03-13 08:20:58 732

原创 webpack5高级--03_减少代码体积

如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功能。开发如果项目中引用了较多图片,那么图片体积会比较大,将来请求速度比较慢。开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。你可以将这些辅助代码作为一个独立模块,来避免重复引入。为编译的每个文件都插入了辅助代码,使代码体积过大!对一些公共方法使用了非常小的辅助代码,比如。默认情况下会被添加到每一个需要它的文件中。我们可以对图片进行压缩,减少图片体积。并且使所有辅助代码从这里引用。中的没有使用上的代码。

2024-03-12 08:21:36 417

原创 webpack5高级--02_提升打包构建速度

所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。我们目前打包的内容都很少,所以因为启动进程开销原因,使用多进程打包实际上会显著的让我们打包时间变得很长。当项目越来越庞大时,打包速度越来越慢,甚至于需要一个下午才能打包出来代码。多进程打包:开启电脑的多个进程同时干一件事,速度更快。默认会将所有模块全部重新打包编译,速度很慢。编译结果,这样第二次打包时速度就会更快了。文件,这样速度就比之前的单进程打包更快了。的打包速度,因为其他文件都比较少。

2024-03-12 08:20:56 1057

原创 webpack5高级--01_提升开发体验

开发时我们运行的代码是经过webpack所有css和js合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多,那么很难去发现错误出现在哪里。所以我们需要更加准确的错误提示,来帮助我们更好的开发代码。

2024-03-11 08:36:42 578

原创 webpack5基础--14_优化css

Css文件目前被打包到js文件中,当js文件加载时,会创建一个style标签来生成样式这样对于网站来说,会出现闪屏现象,用户体验不好我们应该是单独的Css文件,通过link标签加载性能才好。

2024-03-11 08:35:36 354

原创 webpack5基础--13_生产模式介绍

生产模式是开发完成代码后,我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化,让其运行性能更好。

2024-03-09 14:58:22 369

原创 webpack5基础--12_开发服务器&自动化

每次写完代码都需要手动输入指令才能编译代码,太麻烦了,我们希望一切自动化。

2024-03-09 14:57:21 314

原创 webpack5基础--11_处理 Html 资源

【代码】webpack5基础--11_处理 Html 资源。

2024-03-08 08:19:40 365

原创 webpack5基础--10_处理 js 资源

有人可能会问,js资源Webpack不能已经处理了吗,为什么我们还要处理呢?原因是Webpack对js处理是有限的,只能编译js中ES模块化语法,不能编译其他语法,导致js不能在IE等浏览器运行,所以我们希望做一些兼容性处理。其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测。jsBabelEslint我们先完成Eslint,检测代码格式无误后,在由Babel做代码兼容性处理Eslint可组装的JavaScript和JSX检查工具。

2024-03-08 08:19:06 1025

原创 webpack5基础--09_处理其他资源

开发中可能还存在一些其他资源,如音视频等,我们也一起处理了。

2024-03-07 08:48:57 207

原创 js实现本地上传图片后实现预览与删除功能

【代码】记一次本地上传图片显示与删除逻辑处理。

2024-03-07 08:37:15 952

原创 webpack5基础--08_处理字体图标资源

打开选择想要的图标添加到购物车,统一下载到本地。

2024-03-06 09:14:01 668

原创 webpack5基础--07_自动清空上次打包资源

观察 dist 目录资源情况。

2024-03-06 09:12:56 343

原创 webpack5基础--06_修改输出资源的名称和路径

(注意:需要将上次打包生成的文件清空,再重新打包才有效果)

2024-03-05 08:25:28 425

原创 webpack5基础--05_处理图片资源

过去在Webpack4时,我们处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了,我们只需要简单配置即可处理图片资源。

2024-03-05 08:24:35 675

原创 webpack5基础--04_处理样式资源

Webpack本身是不能识别样式资源的,所以我们需要借助Loader来帮助Webpack解析样式资源我们找Loader都应该去官方文档中找到对应的Loader,然后使用官方文档找不到的话,可以从社区Github中搜索查询Webpack 官方 Loader 文档css-loader:负责将 Css 文件编译成 Webpack 能识别的模块:会动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容此时样式就会以 Style 标签的形式在页面上生效。

2024-03-04 08:25:23 864

原创 webpack5基础--03_开发模式介绍

开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源。提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。提前检查代码的一些隐患,让代码运行时能更加健壮。开发模式顾名思义就是我们开发代码时使用的模式。

2024-03-04 08:24:26 298

原创 vscode中eslint插件不生效问题

最近使用webpack打包js资源中使用到了VS Code中的eslint插件辅助对代码进行校验,却在文件中以及配置好后,在控制台运行可以读取到的检测结果;

2024-03-03 22:20:19 1570

原创 webpack5基础--02_基本配置( 5 大核心概念)

在开始使用Webpack之前,我们需要对Webpack的配置有一定的认识。

2024-02-29 08:10:09 420

原创 webpack5基础--01_基本使用

Webpack开发模式:仅能编译JS中的ES Module语法生产模式:能编译JS中的ES Module语法,还能压缩 JS 代码。

2024-02-28 08:18:14 503

原创 React学习计划-react-hooks补充

hooks当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。必须以use开头吗?必须如此。这个约定非常重要。不遵循的话,由于无法判断某个函数是否包含其内部Hook的调用,React将无法自动检查你的Hook是否违反了Hook的规则。

2024-02-24 22:39:29 717 2

原创 nodejs学习计划--(十)会话控制及https补充

所谓会话控制就是HTTP是一种无状态的协议,它没有办法区分多次的请求是否来自于同一个客户端,而产品中又大量存在的这样的需求,所以我们需要通过来解决该问题。

2024-02-12 21:54:12 1616

原创 nodejs学习计划--(九)Api接口

接口是简单理解:一个接口就是,根据请求响应结果接口的英文单词是,所以有时也称之为API接口这里的接口指的是『数据接口』, 与编程语言(JavaGo等)中的接口语法不同。

2024-02-06 15:31:44 423

原创 nodejs学习计划--(八)MongoDB数据库

MongodbMongoose是一个对象文档模型库,官网。

2024-02-04 19:22:04 1114

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除