- 博客(103)
- 收藏
- 关注
RSS订阅原创 vue中 TS配置，vite配置，eslint配置的技术沉淀
在现代 Vue 项目开发中，TypeScript、Vite 和 ESLint 已成为提升开发效率与代码质量的三大利器。本文将系统总结这三者的配置实践，包括基础设置、协同工作方式及最佳实践，帮助团队构建规范、高效的开发环境。
2025-09-08 00:54:39
308
原创 vue项目中 tsconfig.json 有哪些配置项
在 Vue 项目中，是 TypeScript 编译器的核心配置文件，用于指定编译选项、类型检查规则、文件范围等。合理配置能确保 TypeScript 与 Vue 单文件组件（.vue）、工具链（如 Vite）正确协作，提升类型安全性和开发体验。
2025-09-08 00:39:57
559
原创 ES Module（ESM）和 CommonJS区别
CommonJS是 Node.js 传统模块系统，运行时动态加载，适合服务端场景。ESM是语言原生标准，编译时静态分析，支持 Tree-Shaking 和动态绑定，适合浏览器和现代前端工程化项目。新项目（尤其前端）推荐优先使用 ESM，符合 JavaScript 语言发展趋势。
2025-09-08 00:32:39
791
原创 vue中配置 ts
在 Vue 项目中配置 TypeScript（TS）可以提升代码的类型安全性和开发体验。以下是在 Vue 项目（基于 Vite）中配置 TypeScript 的详细步骤和关键配置：如果是新建项目，推荐直接使用官方模板创建：bash进入项目并安装依赖：bash二、现有 Vue 项目添加 TypeScript如果需要在现有 Vue 项目中添加 TypeScript，按以下步骤操作：bash2. 创建 TypeScript 配置文件在项目根目录创建 ：创建时间：00:26修改 （注
2025-09-08 00:29:08
387
原创 预处理器Sass/Scss、Less 的区别，项目中写法
语法兼容性：Scss 和 Less 均兼容 CSS，新手可快速上手；若习惯缩进语法，可尝试原生 Sass（但不推荐，生态已边缘化）。功能丰富度：Sass > Less，尤其在「自定义函数、循环、条件判断」上，Sass 更适合复杂项目（如组件库开发）。生态与性能：Sass 生态更成熟（如 Vue 官方组件库用 Scss），dart-sass编译性能稳定；Less 更轻量，适合简单场景。选择建议大型项目、需复杂样式逻辑 → 优先Sass/Scss；中小型项目、追求轻量快速 → 可选Less；
2025-09-08 00:25:48
574
原创 vue中 vite.config.js 中配置说明
的配置项覆盖了开发、构建、解析、CSS 处理等多个方面，可根据项目需求灵活调整。核心是通过plugins扩展功能，通过server优化开发体验，通过build控制生产打包，通过resolve简化路径导入。更多配置细节可参考Vite 官方文档。
2025-09-08 00:20:11
429
原创 vue如何配置 vite
在 Vue 项目中配置 Vite 是一个常见的开发场景，Vite 作为新一代构建工具，能显著提升 Vue 项目的开发体验。
2025-09-08 00:17:39
316
原创 eslint 和 prettier 的相同点和区别
ESLint 和 Prettier 都是前端开发中用于代码质量和风格管理的工具，但它们的定位和功能有明显区别，同时也存在一定关联。禁用 ESLint 中与 Prettier 冲突的风格规则，避免二者互相干扰。两者结合使用，可同时保证代码的。，是现代前端项目的最佳实践。配置 ESLint（
2025-09-08 00:04:34
307
原创 css-常用函数详解
8. translate() 方法函数在水平和/或垂直方向上重新定位元素。单个值边上在水平方向上的唯一，两个值表示第一个值在水平方向上的位移、第二个值表示在竖直方向上的位移。9. translate3d()，translateX()，translateY()，translateZ() 同表示在不同方向上的位移。因此，较大的值会产生更多模糊。在 CSS 中，有一些内置的函数可以帮助我们实现更复杂和灵活的样式效果。函数用于引入外部资源，常见的是图片。函数用于创建具有透明度的颜色值。来使用该变量定义的颜色。
2024-08-02 14:19:18
595
原创 Markdown-it 如何解析超链接的格式，新页签打开
Markdown-it 是一个用于解析 Markdown 文本为 HTML 的库。要使用 Markdown-it 解析超链接并确保它们在新页签中打开，你需要使用 Markdown-it 的插件系统或者自定义规则。规则，在每个链接打开时添加了。属性，以确保新页签的安全性。
2024-07-11 17:25:54
1537
2
原创 EventSource 在项目中常用的两种方式
使用post的方式请求eventSource，常用的就是通过fetchEventSource这个库来实现，借助第三方库的fetchEventSource方法连接服务，通过AbortController 对象可以关闭服务。只能由服务器向客户端发送消息，项目中常用的请求方式又get和post方式，对于没有请求要求的情况，短文本的情况使用浏览器提供的api即可。不需要安装插件，直接创建EventSource对象，通过EventSource对象连接服务，连接服务以后就可以接受服务推送的消息。
2024-05-23 17:17:41
9915
6
原创 钉钉登录前端处理
在vue项目中，可通过动态创建script标签，加载js库。渲染二维码的区域的样式，可以自定义去除背景颜色和边框。加载钉钉API接口以后，获取用户扫描之后将获取的。，并且要将goto参数urlencode编码。表示显示二维码的区域的宽。表示显示二维码的区域的高。
2024-03-07 18:09:44
1098
原创 Windows无法访问github解决方案
将修改好的文件替换到 C:\Windows\System32\drivers\etc 路径下。进入 C:\Windows\System32\drivers\etc 路径下。执行 ipconfig/flushdns。win+R 输入cmd 回车进入。复制 hosts文件到桌面。在复制好的文件最后加上。
2024-01-26 17:04:09
1158
5
原创 Vite+Electron快速构建一个VUE3桌面应用(三)——打包
上一篇文章Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载完成了开发时的动态模块热重载功能，现在是时候来看看怎么完成最后一步——打包了。
2024-01-26 14:17:41
1485
1
原创 Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载
在上一篇文章Vite+Electron快速构建一个VUE3桌面应用中，我们了解了如何使用Vite和Electron来快速构建一个Vue3桌面应用。但是，之前构建的应用仅仅是一个简单的版本。在开发过程中，为了更好的开发体验，在开发electron的时候，肯定也希望能有动态模块热重载（HMR），更别说vite那迅雷不及掩耳盗铃儿响叮当之势的加载速度。因此，接着上一篇文章所完成的项目代码，我们来完成Vite和Electron开发时的动态模块热重载功能。Vite+Electron快速构建一个VUE3桌面应用。
2024-01-26 14:15:53
1266
1
原创 Vite+Electron快速构建一个VUE3桌面应用（一）
首先，介绍下vite和Electron。Vite是一种新型前端构建工具，能够显著提升前端开发体验。Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。： 该项目集成度较好，封装较为完整，中文搜索下来文章较多也是该方案，可以直接上手去使用。
2024-01-26 14:14:34
5575
7
原创 nrm-npm包版本管理和详细安装和使用教程
安装 npm 包的时候，可能会感觉下载比较慢，那是因为默认情况下，npm 包的安装都是从国外的 npm 官网地址进行下载的，可以通过更改 npm 源地址来实现更快速度的下载。目前存在使用electron的时候，使用国内的镜像是不可以的，所以在安装electron的时候，就要切换到npm官方的镜像地址。，它允许用户快速地在不同的npm源之间切换。项目中使用nrm，可以加快npm包的下载速度，切换不同的npm源。此时能看到上面 6 个可用的源地址，前面的字符串是每个地址的标识，比如我们切换到。
2024-01-25 15:37:07
1608
原创 nvm--node版本管理详细安装和使用教程
nodejs是项目开发时所需要的代码库，nvm是nodejs版本管理工具，npm是nodejs包管理工具；nodejs能够使得javascript能够脱离浏览器运行，nvm能够管理nodejs和npm的版本，npm能够管理nodejs的第三方插件。默认是C:\Program Files\nodejs，也可能在其他盘，主要取决于安装时的选择。查看该路径下是否有node文件，我这里已经没有了，在控制面板。后一般会自动删除node文件，如果文件还在的话就手动删除。
2023-12-14 17:11:45
1142
原创 如何把一个数组json数据,加到已有的树形数据中
要将一个数组的 JSON 数据添加到已有的树形数据中，可以使用递归方法遍历树形数据，并将数组中的每个元素插入到合适的位置。函数会遍历树形数据，找到与数组数据第一个元素的父节点，并将数组中的每个元素插入到父节点的。函数接受两个参数：一个是已有的树形数据。，另一个是要插入的数组数据。
2023-11-27 18:31:16
634
原创 js 如何把一个json数据,组装成树形数据
在 JavaScript 中，可以使用递归的方式将一个 JSON 数据组装成树形数据。这样，你就可以将一个 JSON 数据组装成树形数据了。
2023-11-27 16:58:14
1318
原创 electron项目开发环境搭建
app.whenReady()是app启动后的Promise，使用then可以监听对应的状态，在这个回调里面增加createWindow函数，createWindow新建了一个浏览器窗口，设置宽高，并且使用浏览器窗口加载index.html文件。1. 新建目录命名为electronDemo，使用npm init -y 新建一个前端工程，在package.json中增加一行"main": “main.js”，这行代表应用程序的入口是main.js文件。4. 测试electron项目。
2023-08-09 18:36:18
1485
原创 ECharts 折线图使用相关
第3条数据值 = 第2条数据值 + 第3条数据值。即：第2条数据值 = 第1条数据值 + 第2条数据值。只需要修改stack的属性值即可，保持不一致就行。
2023-08-07 10:43:10
766
原创 对象数组嵌套多层childList，如何每层每个childList都遍历改变值
加1，可以使用递归的方法来实现。以下是一个示例代码，演示如何遍历并修改每层的。如果你有一个嵌套多层的对象数组，其中包含。属性，并且想要遍历每一层的每个。
2023-08-03 14:06:08
707
原创 vue中取消http请求
请注意，取消令牌实例只能用于取消单个请求。如果需要取消多个请求，可以创建多个取消令牌实例，并分别传递给对应的请求。要取消HTTP请求，你可以使用axios库提供的取消请求功能。另外，需要确保服务器端支持取消请求的机制，否则即使在客户端取消了请求，服务器端可能仍然会继续处理请求。这样就会触发请求的取消，并在catch块中捕获到一个包含取消原因的错误。
2023-07-07 15:36:26
1150
原创 vue 中常用 时间格式转化方式
在Vue中，你可以使用第三方库如moment.js或day.js来进行时间的格式化。这些库提供了丰富的日期和时间处理功能，包括格式化、解析、计算等。无论你选择使用moment.js还是day.js，都需要在Vue组件中引入相应的库，并根据需要使用其提供的方法来格式化时间。在上面的示例中，我们使用moment函数将日期对象转换为moment对象，并使用format方法指定所需的时间格式。在上面的示例中，我们使用dayjs函数将日期对象转换为dayjs对象，并使用format方法指定所需的时间格式。
2023-07-07 15:35:33
7272
原创 vue中使用锚点连接 的几种方式
在Vue中，你可以使用锚点连接（Anchor Link）来实现页面内的跳转。通过使用锚点链接，用户可以点击链接并平滑地滚动到页面中的指定位置。在上面的示例中，我们创建了一个导航栏，并为每个导航项添加了一个带有对应锚点的href属性。然后，在页面中的各个部分（如<div>）上设置了相应的id，作为锚点的目标位置。在上面的示例中，我们通过调用方法来实现平滑滚动效果。你可以将该方法绑定到锚点链接的点击事件上。注意：如果你不需要平滑滚动效果，只需普通的跳转到指定位置，可以直接使用原生的锚点链接，无需使用第三方库。
2023-07-07 15:27:56
5312
原创 React 和 Vue 的理解，异同
相似之处：都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库； 都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板； 都使用了 Virtual DOM（虚拟 DOM）提高重绘性能； 都有 props 的概念，允许组件间的数据传递； 都鼓励组件化应用，将应用分拆成一个个功能明确的模块，提高复用性。不同之处数据流 Vue 默认支持数据双向绑定， React 一直提倡单向数据流 虚拟 DOM Vue2.x 开始引入"Virtual DOM"，消
2023-06-08 12:44:06
998
原创 typescript中type、interface的区别
interface：接口在TS 中主要用于定义【对象类型】，可以对【对象】的形状进行描述。type ：类型别名为类型创建一个新名称，它并不是一个类型，只是一个别名。
2023-06-04 22:05:16
796
原创 typescript 相关概念
属性后面加任意：eg： let b : {name: string， [propName: string]: any }，表示属性是可选的 eg：let b : {name: string， age?注意：接口中的所有属性都不能有实际的值，接口值定义对象的结构，而不考虑实际的值。编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。语法：{属性：属性值} eg： let b : {name: string}写法：h: [string, string];
2023-06-04 20:45:42
642
原创 Vue3 相关Composition Api 2
如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换===>shallowRef。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。我们可以更加优雅的组织我们的代码，函数。shallowReactive:只处理对象最外层属性的响应式（浅响应式）。shallowRef:只处理基本数据类型的响应式，不进行对象的响应式处理。作用：将一个由 reactive 生成的响应式对象转为普通对象。readonly:让一个响应式数据变为只读的（深只读）。
2023-06-03 01:31:41
429
原创 Vue3 常用的Composition API
备注：接收的数据可以是:基本类型、也可以是对象类型。setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。语法: const代理对象= reactive(被代理对象)接收一个对象（或数组) ,返回一个代理器对象(proxy对象)对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
2023-05-29 00:06:57
706
原创 JS 原型-原型链
函数的prototype属性默认是一个”普通对象“，就相当于是通过new Object()创建的，所以函数的 prototype._proto_ 则指向Object函数的prototype，且prototype也是对象，在读取不到属性时会去自己的__proto__中读取。prototype : 所有的函数创建时，都会创建一个普通对象，作为他的prototype属性，当此函数被当做构造函数用来构造一个对象后，构造出的对象的[[Prototype]]会默认指向这个函数的prototype属性。
2023-05-28 23:47:52
638
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人