朝阳39的博客

/ 导入自定义的语言包 -- 英文和中文// 默认语言: 'zh', 即中文// 语言包// 英文en,// 中文zh})

官网 https://www.electronforge.io/技术栈：Vue3.5+Electron配置国内下载源在目标目录（如 ）下创建项目 为自定义的项目名称打开空值校验，在 tsconfig.json 中添加用 vscode 打开，并运行项目得到vite.renderer.config.ts新建 src\App.vuesrc\renderer.tsindex.html重启项目，效果如下将 改名为 ，内容修改为forge.config.ts 中 ，

官网。

以全局方法 calculate 为例。

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

效果预览技术方案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'

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

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

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

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

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

dark。

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

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

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

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

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

md 文件渲染后，会按 md 语法，渲染成 h1,p,blockquote 等 html 标签，可根据个人喜欢，自定义样式新建文件 src/assets/css/md.cssh1 {h2 {

页面中的图片高度根据随窗口变化动态更新 rate 计算得到。

'2024年-零基础学前端系列课程''一学就会，前端速成'

/ 获取滚动条y轴坐标。

原创日历组件

官网。

@param fillChar 用于脱敏的填充字符，默认为 "*"* @param content 待脱敏的字符串。* @returns 脱敏后的字符串。// 若不想对外展示脱敏信息，则清空。* 脱敏处理字符串中的名字。

vue3 编码规范

Vue Router 是 Vue 官方的客户端路由解决方案，在单页应用 (SPA) 中，用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。核心思想：通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。官网https://router.vuejs.org/zh/guide/安装通常创建 vue3 项目时，选择安装 Pinia 就会自动集成。但若目前项目里没有，则按如下流程操作npm install vue-router@4新建文件 s

用于将组件内的部分模板，挂载到组件外的 DOM 上渲染在 Vue Devtools 中，改变挂载位置的模板，仍然嵌套在父级组件下同一节点被挂载多个 Teleport 时，后挂载的将排在目标元素下更后面的位置上。</</</</渲染结果</</</

用于在多个组件间动态切换时缓存被移除的组件（ 默认情况下，一个组件实例在被替换掉后会被销毁。

添加属性 name，可自定义过渡动画名称，代替默认的 v

以 v 开头的驼峰式命名自定义一个变量，该变量的值是一个对象，包含至少一个类似生命周期钩子函数的属性// 在绑定元素的 attribute 前// 或事件监听器应用前调用// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用// 绑定元素的父组件更新前调用// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用// 绑定元素的父组件卸载前调用// 绑定元素的父组件卸载后调用。

利用 Vue 的组合式 API 来封装和复用的函数，用于实现逻辑复用，类似 react18 中的 hookuse。

/ 注入一个全局可用的 $translate() 方法// 获取 `options` 对象的深层属性// 使用 `key` 作为索引。

用于解决跨组件（父组件与所有后代）数据通信。

Vue 2 已于 2023 年 12 月 31 日停止维护，请用 Vue 3

指令

/ 注意：我们这里使用的是解构赋值语法。用于描述依赖响应式状态的复杂逻辑。

自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称 ）// 在元素上做些操作 } } < template > < h1 v-my-directive > This is a Heading const。

连续点击查询按钮的优化

Vue 3 中的数据基于实现响应式( vue2 中的数据通过方法和对数组变异方法的重写，实现响应式)

vue 文件中无法直接写 JSX，可先在 tsx 文件中写 JSX，再导入 vue 文件，并用共用的 render 函数渲染。