Stylelint该如何配置？Stylelint使用以及相关配置说明
官方网站：https://stylelint.io/ stylelin本体：https://www.npmjs.com/package/stylelint stylelint-config-standard 拓展配置：https://www.npmjs.com/package/stylelint-config-standard npm install --save-dev stylelint st
Eslint该如何配置？Eslint使用以及相关配置说明
Eslint在过往接触过的很多开源项目内都有它的身影，习惯一个人写代码了，总觉得它可有可无，但是归根结底，好处还是很多的。 可强制规范团队编码规范，让新旧组员编码习惯得到一致提升 可灵活定制团队编码风格，让预设规则符合新旧组员心理预期 增加项目代码的可维护性和可接入性，让新组员能快速适应项目的架构与需求 保障项目整体质量，可减少无用代码、重复代码、错误代码和漏洞代码的产生几率 中文官网：https
网页元素相交监测：Intersection Observer API
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。 过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发
重新理解：什么是页面生命周期API？
简而言之，在此之前，Web网页在浏览器内可以无限期地保持运行状态。随着大量网页的运行，内存、CPU、电池和网络等关键系统资源可能会被超额使用，然后就会出问题。 虽然 Web一直有和生命周期相关的事件（例如load、unload和visibilitychange），但这些事件只允许开发人员响应用户发起的生命周期状态变化。为了让Web页面能够更加稳定的运行，浏览器需要一种主动回收和重新分配系统资源的方
Vue 2.7 “Naruto”发布，新特性介绍
2.7 是 Vue 2.x 的最终版本。在这个版本之后，Vue 2 进入了 LTS（长期支持），从现在开始持续 18 个月，并且将不再接收新功能。这意味着Vue 2 将在 2023 年底结束生命周期。 官方博客：https://blog.vuejs.org/posts/vue-2-7-naruto.html?continueFlag=24b18743108fc3e584f79dec07a79f02
Vite4新特性介绍，相较于Vite3有哪些新功能？
官方介绍更新日志：https://vitejs.dev/blog/announcing-vite3.html#dev-improvements Github更新日志：https://github.com/vitejs/vite/blob/v4.4.1/packages/vite/CHANGELOG.md Vite 不再支持 Node v12，因为它已经进入了 EOL 阶段。现在你必须使用 Node
Vue后台管理系统开发，相关代码的笔记。
从零开始开发后台管理系统，还是有很多值得记录的地方。构建工具Vite、使用Vue3。 /* * @author 友人a丶 * @date 2022-07-11 * @app Vue应用对象 * */ export default function (app) { /* * 指定要导入的文件目录 * 直接加载用{eager:true},懒加载用glob * */ const modules = im
Ant Design Vue自定义主题失效解决办法
antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，可以根据需求进行相应调整 。 @primary-color: #1890ff; // 全局主色 @link-color: #1890ff; // 链接色 @success-color: #52c41a; // 成功色 @warning-color: #faad14; // 警告色 @error-color: #f5
Pinia状态管理器学习笔记，持续记录
足够轻量，Pinia 重约 1kb，甚至会忘记它的存在！ 去除 Mutation ，Actions 支持同步和异步（Actions一个顶俩，写起来简洁）； 无需手动注册 Store，Store 仅需要时才自动注册。如果从不使用，则永远不会“注册”（省心）； 没有模块嵌套，只有 Store 的概念，Store 之间可以自由使用，更好的代码分割； Vue2 和 Vue3 都能支持； 支持大型项目迁移期
Vue2.x中使用composition API，平滑过渡Vue3
Vuejs官方出品：https://github.com/vuejs/composition-api/blob/HEAD/README.zh-CN.md 基于组合式API的一组实用函数：https://vueuse.org/guide/ npm install @vue/composition-api -D import Vue from 'vue' import VueCompositionAP
PostCss学习笔记，持续记录
CSS 的隔离主要有两类方案，一类是运行时的通过命名区分，一类是编译时的自动转换 CSS，添加上模块唯一标识。 运行时的方案最典型的就是 BEM，它是通过 .block__element–modifier 这种命名规范来实现的样式隔离，不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的。 但是这种方案毕竟不是强制的，还是有样式冲突的隐患。 编译时的方案有两种
Vite该如何使用？Vite学习笔记，持续记录
配置文档：https://cn.vitejs.dev/config/，基于ESM； 插件大全：https://github.com/vitejs/awesome-vite 通过插件支持低版本浏览器：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy Vite使用scss预处理器：npm install sass -D，安装
Vue组件设计学习笔记，持续记录
组件化思想并不是前端独有的，但却是前端技术的延伸 任何软件开发过程，或多或少都有那么一些组件化的需求。 每个组件对应一个目录，组件所需的各种资源都在这个目录下就近维护；（最具软件工程价值） 页面上的每个独立的可视/可交互区域视为一个组件； 由于组件具有独立性，可以自由组合； 页面是组件的容器，负责组合组件形成功能完整的界面； 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换 分子是由原
Xpath学习笔记，持续记录
很早之前就想研究研究，一直没有合适的时间，今天刚好没啥事，乘机瞧一瞧xpath的“庐山真面目”。 XPath全称XML路径语言（XML Path Language），它是一种用来确定XML文档中某部分位置的语言。XPath基于XML的树状结构，提供在数据结构树中找寻节点的能力。起初XPath的提出的初衷是将其作为一个通用的、介于XPointer与XSL间的语法模型。但是XPath很快地被开发者采用
Vue-Cli该如何使用？Vue-Cli学习笔记，持续记录
修改.Env环境变量文件之后，需要重新运行server才会生效。环境变量通过process.ENV访问。可以在项目根目录中放置下列文件来指定环境变量： .env # 在所有的环境中被载入 .local # 在所有的环境中被载入，但会被 git 忽略 .env. # 只在指定的模式中被载入 .env..local # 只在指定的模式中被载入，但会被 git 忽略 以 VUE_
SVG学习笔记，持续记录。
SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape，例如：由直线和曲线组成的路径）、图像()、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（）、剪切路径（）、alpha蒙板（）、滤镜效果（）、模板对象（）和其它扩展（）。 SVG 是使用 XML 来描述二维图形和绘
JS实用函数收集，持续记录
function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = e
Node.js 初入门？持续记录
教程：https://www.runoob.com/nodejs/nodejs-tutorial.html 事件循环：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop 版本列表：https://nodejs.org/dist/，下载并解压： xz -d node-v17.2.0-linux-x64.tar.xz ta
HTML DOM的各种宽高、偏移位置的属性总结
兼容性：All； 指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高，包含内边距，但不包括水平滚动条、边框和外边距。 测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽
Ant Design Vue使用记录，持续记录
好些问题，每次解决了，下次遇到了又要重新翻文档，干脆就自己记录一下。 Form.create(options) | this.$form.createForm(this, options) ，通过JFX方式去定义一个Form组件的各种属性。经 Form.create() 包装过的组件会自带 this.form 属性，如果使用 template 语法，可以使用 this.$form.createFo
SortableJS / vue.draggable.next 使用笔记，持续记录
东西确实是好东西，奈何一开始文档没捋清，费了一番时间好好琢磨了一下。 Github：https://github.com/SortableJS/vue.draggable.next，完整代码如下： <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" :move="move" hand
JS定时器清除之后，已经开始但是没有运行完的函数还会继续运行吗？
最近使用定时器的时候遇到这样一种情况，定时器清除了，功能仍然在跑（遍历数组，同步定时网络请求）。 排查了一下代码，发现逻辑确实没问题。后来一想，是不是函数没运行完，仍然在跑，于是上代码测试了一下： let timer = setInterval(async () => { console.log("开始") await new Promise((resolve) => { setTim
Vue-Router多级路由时，父组件重复加载的问题。
代码中使用了两层路由，并且每层路由都使用了keep-alive，App.vue内初始代码如下： <router-view v-slot="{Component}"> <keep-alive> <component :is="Component" :key="$route.name"/> </keep-alive> </router-view&g
前端Mockjs学习笔记，持续记录
相比于自己写一个模拟数据返回的后端接口，好像还是这个来的更加方便。 让前端攻城师独立于后端进行开发。不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 基于对window的xhr对象的二次封装，增加了用于拦截的逻辑。 npm install mockjs Mock.setup({ timeout: 400 }) M
前端自适应方案总结，前端最佳自适应方案
我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。 是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。一个CSS像素对应多少个设备像素是根据当前的缩放比例 12px对应36px，缩放0.5，12px对应18px。扩大2.0,12px对应72px。 它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小： DPR
Uniapp、Html5plus、Native.js开发记录
获取应用主Activity实例对象，什么是Activity (活动)？ Android的四大组件之一的Activity(活动)：Activity是一个应用程序的组件，他在屏幕上提供了一个区域，允许用户在上面做一些交互性的操作， 比如打电话，照相，发送邮件，或者显示一个地图！Activity可以理解成一个绘制用户界面的窗口， 而这个窗口可以填满整个屏幕，也可能比屏幕小或者浮动在其他窗口的上方！ 作用
WebRTC开发经验总结，持续记录
volume 音量约束 sampleRate: 采样率 sampleSize: 采样大小，采样的位数 echoCancellation: 回音消除 autoGaincontrol： 增加音量 noiseSuppression: 降噪 latency ： 延迟大小 channelCount: 切换声道 deviceID: 多个音频输入输出设备的进行切换 groupId: 同一个物理设备，是一个分组，
Vuex3.x、Vuex4.x状态管理器学习笔记
Vuex：https://v3.vuex.vuejs.org/zh 什么是状态管理器？方便调试，方便维护数据。https://vuex.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E2%80%9C%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F%E2%80%9D%EF%BC%9F import Vu
Vue Ant Admin学习笔记，持续记录
Vue Ant Admin基于Vue2.x的中后台管理系统：https://iczer.gitee.io/vue-antd-admin-docs/ 比较漂亮的，可以借鉴的：https://vue-admin-beautiful.com/admin-pro Ant Design of Vue： https://antdv.com/docs/vue/introduce-cn/（V2及以上版本为Vue
前端节流（throttle）和防抖动（debounce）
节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例：我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应；当你首次点击后，函数会无视之后三秒的所有响应；三秒结束后，button 又恢复正常 click 响应功能，以此类推。 有什么用呢？通常，这类提交 button 的@click响应会给后端发送 api 请求，频繁的点击意味着频繁的请求（流量）