朝阳39-CSDN博客

原创 vscode【实用插件】Material Icon Theme 美化文件图标

在 vscode 插件市场的搜索点安装。

2025-01-16 17:34:29 415

原创 vscode【实用插件】CodeSnap 生成漂亮的代码快照

在 vscode 插件市场的搜索CodeSnap点安装若自动安装失败，则按引导进行手动安装（下载 vsix 文件）选择下载好的 vsix 文件即可完成安装。

2025-01-16 17:25:10 176

原创 windows 极速安装 Linux （Ubuntu）-- 无需虚拟机

打开命令行，执行若报错，则先执行。

2025-01-15 17:23:50 755

原创 micro-app【微前端系列教程】2025最新版

通过自定义fetch替换框架自带的fetch，可以修改fetch配置(添加cookie或header信息等等)，或拦截HTML、JS、CSS等静态资源。自定义的fetch必须是一个返回string类型的Promise。如果跨域请求带cookie，那么Access-Control-Allow-Origin不能设置为*，必须指定域名，同时设置Access-Control-Allow-Credentials: true/*** 自定义fetch* @param {string} url 静态资源地址。

2025-01-10 16:07:17 944

原创 micro-app【微前端系列教程】通信

datachange 绑定函数的返回值不会作为子应用dispatch回调函数的入参，它的返回值没有任何作用。

2025-01-10 11:53:51 1004

原创 micro-app【微前端系列教程】禁用样式隔离

所有应用的样式隔离都会停止指定子应用取消禁用样式隔离</

2025-01-10 10:09:45 262

原创 micro-app【微前端系列教程】生命周期

子应用渲染过程中会触发相应的生命周期事件。

2025-01-09 17:31:28 510

原创 micro-app【微前端系列教程】路由

在一些特殊情况下，主应用的跳转会导致浏览器地址上子应用信息丢失，此时可以主动调用方法，将子应用的路由信息同步到浏览器地址上。子应用同步到浏览器的路由信息是经过特殊编码的(encodeURIComponent + 特殊字符转译)和window.history.go(n)一致，表示在历史堆栈中前进或后退多少步。在子应用卸载后重新渲染时将恢复卸载前的页面（页面中的状态不保留）监听所有或某个子应用的路由变化，在子应用页面渲染前执行。监听所有或某个子应用的路由变化，在子应用页面渲染后执行。

2025-01-09 16:49:13 1013

原创 Typescript 【详解】类型运算符

将多个类型（通常是对象类型）合并为⼀个类型，最终类型将拥有多个类型的全部属性。

2024-12-31 16:43:51 496

原创 Typescript 【详解】类型声明

TS 官方推荐使用 string , 不推荐用 String , 因为 String 是包装对象，Number，Boolean 等同理。String 既能赋值基础字符串，也能赋值包装对象。

2024-12-31 15:44:26 970

原创 vscode【实用教程】（2025最新版）

用于在不同设备上都能立马获得设置（如安装的插件等）。登录 vscode 的账号（推荐通过 Microsoft 账号登录），开启同步。

2024-12-31 10:29:10 685

原创 Electron【实用教程】（2025版）

应用启动后，先执行主进程，再执行预加载脚本，最后执行渲染进程。

2024-12-25 16:27:51 950

原创 Electron【详解】菜单 Menu

label: '自定义菜单',label: '自定义菜单',submenu: [label: 'electron 官网',// 会用默认浏览器打开electron 官网},accelerator: 'CmdOrCtrl+1' // 快捷键。

2024-12-25 16:26:37 424

原创 electron-vite【实战】自定义标题栏【组件封装】（含异形标题栏，指定区域拖拽，窗口置顶，窗口最小化，窗口最大化，取消最大化，隐藏窗口到托盘等）

src/main/index.ts 的 new BrowserWindow 中添加。

2024-12-21 17:44:26 1057

原创 electron-vite【实战】登录/注册页

src/main/index.ts 主进程响应信息。仅前端页面渲染，省略了表单校验和后端交互。src/main/index.ts 中。渲染进程向主进程发送信息。

2024-12-21 11:42:54 1233

原创 electron-vite【实战系列教程】

src/renderer/src/assets 中只留 main.css，内容为html,body {margin: 0;.drag {src/renderer/src/main.ts 中添加将 resources/icon.png 替换为自定义图标将 src/renderer/src/main.ts 中的改为src/renderer/src/main.ts 中，在窗口的事件中执行 setTitle// 自定义标题mainWindow.setTitle('EC编程俱乐部')})

2024-12-20 17:50:21 1293

原创 vue3【实战】定义全局方法（两种方案）

以全局方法 calculate 为例。

2024-12-19 18:12:13 386

原创 vscode【实用技巧】自定义代码片段（编程速度飞起，含AI 助力！）

以豆包为例，向 AI 提问转为vscode的js代码片段得到答案。

2024-12-17 20:39:36 470

原创 vscode【实用插件】Element Plus Helper 极速生成 Element 组件代码

在 vscode 插件市场的搜索点安装。

2024-12-17 19:16:43 275

原创 Electron【创建、启动、打包项目】使用 electron-vite

以项目 electron-vue3 为例。

2024-12-13 09:44:01 619

原创 vue3【实战】图表【组件封装】Chart （原生 ECharts ，支持自适配屏幕缩放，动态响应图表配置修改）

/ 基于准备好的dom，初始化echarts实例。'ECharts 入门示例2''ECharts 修改标题'

2024-12-06 17:45:52 930

原创 vue3【实战】多页签【组件封装】PageTabs (含右键快捷菜单组件封装 Contextmenu -- 关闭其他页签，关闭所有页签)

效果预览技术方案vue3 ( vite | TS | vueUse | AutoImport | pinia) + Element Plus + UnoCSS技术要点需开启 pinia 持久化右键菜单组件借助了 Element Plus 的样式代码实现src/components/PageTabs.vue<script setup lang="ts">import { usePageTabsStore } from '@/stores/pageTabs'

2024-12-04 18:04:40 1199

原创 vue3【实战】面包屑【组件封装】Breadcrumb (根据菜单自动生成，实时响应路由变化，添加顺滑的过渡动画)

@returns 如果找到目标节点，返回包含所有父节点的数组；* @param treeList 树状列表，包含多个节点。* @param parents 存储父节点的数组。* @param value 目标节点的路径值。* 从树状列表中获取指定节点的所有父节点。// 如果遍历完整棵树未找到，返回null。// 如果递归未找到，则移除当前节点。注意：动画元素需添加 key。// 导入自定义的数据类型。// 遍历树中的每个节点。// 如果找到目标节点。// 返回所有父节点。

2024-11-29 06:44:15 792 1

原创 vue3【实战】自定义全局指令（含批量自动注册全局自定义指令，复制，防抖，节流，长按，水印，拖拽，打字机特效等）

【代码】vue3【实战】自定义全局指令（含批量自动注册全局自定义指令，复制，防抖，节流，长按，水印，拖拽，打字机特效等）

2024-11-28 11:02:21 623

原创 vue3【实战】响应式的登录界面

需在 vue 中使用 JSX，详见importfromconstgetIconiconstring=></

2024-11-24 07:36:25 916

原创 vue3【实战】菜单【组件封装】Menu 支持无限嵌套（含组件递归的使用），切换展开层级，搜索等

效果预览技术方案vue3 + vite + Element Plus + VueRouter + UnoCSS + TS + vueUse + AutoImport技术要点自行生成菜单索引 index/** * 初始化菜单列表（组装index,删除空children） * * @param menu_list 菜单列表 * @param parent_index 父级菜单的索引，默认为空字符串 * @returns 初始化后的菜单列表 */function init_

2024-11-22 10:49:36 1135

原创 vue3【实战】切换全屏【组件封装】FullScreen.vue

【代码】vue3【实战】切换全屏【组件封装】FullScreen.vue。

2024-11-15 11:35:02 535

原创 vue3【实战】切换白天黑夜（暗黑模式）【组件封装】DarkMode.vue

dark。

2024-11-15 10:57:32 724

原创 vue3 中直接使用 JSX （ lang=“tsx“ 的用法）

vite.config.ts 中。// 此处使用了 JSX。plugins 中添加。

2024-11-15 10:10:42 619

原创谷歌插件 iconfont.cn 辅助工具集合 -- 批量下载 iconfont 中的 svg 图标

下载后解压，得到 .crx 文件更多插件下载，可访问。

2024-11-14 16:37:20 393

原创 vue3【组件封装】S-icon 图标（集成 iconify ）

点击目标图标，复制图标名称即可。icon 属性的值的格式为。输入英文关键字进行搜索。

2024-11-14 16:04:18 381

原创 vue3【实战】按需导入 element-plus

vite.config.ts 中添加。plugins 中添加。

2024-11-14 15:24:49 254

原创 vue3【组件封装】消息提示 Toast

src/components/Toast.vue<template> <transition name="fade"> <div class="fixed w-full h-full left-0 top-0 flex z-100 transition-all" v-if="show"> <div :style="{ background: bgColor, color: textColor }" :c

2024-11-02 22:24:36 501

原创 vue3【组件封装】确认对话框 Modal

src/components/Modal.vue<template> <transition name="fade"> <div class="fixed w-full h-full z-100 top-0 left-0 bg-black bg-opacity-30 flex transition-all" v-if="show" > <div class="w-80 m-auto bg-white b

2024-11-02 20:20:16 533