- 博客(146)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue3 低代码平台项目实战（下）
本文介绍了低代码平台编辑器的搭建过程。首先完成编辑器基本结构的绘制，采用左中右布局设计，其中左右区域固定定位，中间为画布区域。通过Vue组件实现头部、左侧（包含题型和大纲切换功能）、右侧和中心画布的结构划分，并设置相应的样式布局。接着完成了题型和大纲面板的切换功能，配置了子路由实现不同面板的显示。文章提供了完整的代码示例，展示了编辑器界面的初步实现效果。
2025-12-28 21:33:47
682
原创 Vue3 低代码平台项目实战（上）
本文介绍了低代码平台项目实战的前期准备工作。项目采用Vue3技术栈，结合Element Plus、Pinia等框架，实现用户通过拖拉拽组件进行可视化编辑的功能。文章详细讲解了项目搭建过程，包括创建Vue3项目、安装依赖（Sass、Element Plus等）、CSS样式配置（重置样式、通用样式、主题变量等），以及首页的基本实现。特别说明了如何禁用不必要的SCSS编译插件，并展示了项目的基本架构和页面布局。该低代码平台将为用户提供便捷的问卷设计功能，通过可视化操作降低开发门槛。
2025-12-28 21:29:02
616
原创 Vue3 VueUse（组合式 API 工具库）
VueUse是一个基于Vue3组合式API的实用工具库，提供了丰富的函数来简化开发。它包含状态管理、元素操作、浏览器API等12大类功能。安装简单，通过npm即可引入。示例展示了如何使用useMouse追踪鼠标位置，以及结合useToggle和useLocalStorage实现待办事项功能。该库能有效减少代码量，提升开发效率。初学者可逐步学习API文档，按需使用相关函数。VueUse是Vue3生态中值得关注的实用工具库，能帮助开发者更快构建应用。
2025-11-12 16:33:43
618
原创 Vue3 高级性能优化
本文介绍了Vue3高级性能优化方法：1)使用Lighthouse分析页面加载性能指标；2)通过rollup-plugin-visualizer分析代码体积，建议按需引入组件库；3)配置Vite优化打包策略；4)使用PWA插件实现离线缓存；5)Vue自身优化包括按需引入、tree-shaking、代码分割、异步组件等页面加载优化，以及Prop稳定性和v-once指令等更新优化。这些方法可有效提升Vue应用的加载速度和运行性能。
2025-11-11 23:57:16
1308
原创 webpack 从零构建 Vue3
本文介绍了如何从零开始使用webpack构建Vue3项目。主要内容包括： 项目初始化步骤，包括创建项目目录、安装TypeScript、配置基本文件结构 Webpack基本配置，安装webpack相关依赖，配置开发服务器和打包命令 Vue3整合过程，安装vue-loader和相关插件，配置webpack处理.vue文件 解决打包产物清理问题，推荐在output中配置clean选项自动清除旧文件 测试验证，包括App.vue组件挂载和打包功能验证 通过该教程可以快速搭建一个基于webpack的Vue3开发环境，
2025-11-11 14:19:30
859
原创 10 分钟速通 TypeScript 核心
本文快速介绍TypeScript核心知识，包括安装方式、基础使用和核心概念。主要内容涵盖类型推断与类型注解、类型断言、基础数据类型、联合类型、数组与元组类型、枚举类型、函数相关类型（void和可选参数）、接口定义对象类型、类型别名以及泛型的使用。文章强调类型注解优于类型推断，并展示了常见类型的定义方式。通过示例代码演示了TypeScript的类型检查功能，帮助开发者快速理解TypeScript的核心特性。适合TypeScript初学者作为入门指南，建议后续通过官方文档深入学习。
2025-11-09 21:20:00
571
原创 Vue3 组件库 Element Plus
本文介绍了Vue3中常用的UI组件库，重点讲解Element Plus的安装和使用方法。首先列举了8个主流Vue组件库（如Element Plus、Vuetify等），并说明Element Plus是国内最受欢迎的Vue3企业级组件库。详细介绍了两种引入方式：完整引入（简单但体积大）和推荐使用的自动按需引入（通过unplugin插件实现）。最后提供了一个表单验证的完整示例代码，展示Element Plus的表单组件实际应用。文章帮助开发者快速掌握Element Plus的基本使用，特别适合需要构建企业级应用
2025-11-08 20:56:07
888
原创 Vue3 任务管理器（Pinia 练习）
本文介绍了使用Vue3和Pinia构建任务管理器的实践过程。主要包含三部分：1）创建带Pinia配置的Vue3项目；2）模拟API请求处理异步操作；3）实现任务管理核心功能。通过定义Store管理任务状态，实现了任务增删改查及状态切换功能，组件间通过Pinia共享状态。代码展示了任务API模拟、状态管理仓库定义及任务项组件实现，包括异步操作处理和UI状态更新。该练习重点演示了Pinia在Vue3中的实际应用场景。(149字)
2025-11-07 23:01:15
667
原创 Vue3 状态管理 + Pinia
Vue3 状态管理与 Pinia 摘要 本文介绍了 Vue3 状态管理的核心概念和解决方案。当多个组件需要共享状态时，简单的组件内状态管理会导致代码冗余和复杂度增加。文章提出了两种解决方案： 使用 reactive 创建全局单例状态存储，通过共享响应式对象实现跨组件状态管理 使用组合式函数返回全局状态，但需要注意在模板中直接调用组合式函数会导致每次渲染创建新的响应式对象 文章通过代码示例展示了两种方式的实现，并指出了直接修改全局状态与使用预定义方法的区别。最后提到了 Vue 官方推荐的状态管理库 Pinia
2025-11-07 20:10:34
1613
原创 Vue3 KeepAlive（缓存组件实例）
Vue3的KeepAlive组件用于缓存被移除的组件实例，提升性能。摘要如下： KeepAlive是Vue3内置组件，配合动态组件component使用可缓存组件状态 基本用法：将动态组件包裹在KeepAlive标签内，切换时组件不会销毁而是休眠 配置选项： include/exclude：指定要缓存/排除的组件（通过name匹配） max：限制最大缓存实例数（LRU算法） 生命周期钩子： onActivated：组件激活时调用 onDeactivated：组件休眠时调用 这些钩子对缓存树中的子组件同样有效
2025-11-05 21:48:42
1180
3
原创 Vue 用户管理系统（路由相关练习二）
本文介绍了Vue用户管理系统中路由相关知识的补充内容。主要包括：1)通过json-server实现用户数据的增删改查操作，详细展示了查询列表、查询单个用户、新增、编辑和删除的API封装；2)系统增删改查的设计思路；3)useRouter和useRoute的用法与区别。文章提供了完整的代码示例，包括路由配置、提示组件和主程序结构。通过改造api/userApi.js文件，实现了对用户数据的CRUD操作，为构建用户管理系统提供了实用的技术参考。
2025-11-05 14:52:42
657
原创 Vue 用户管理系统（路由相关练习一）
本文介绍了基于Vue Router的用户管理系统练习项目，主要包含以下内容： 使用json-server搭建模拟后端服务，配置users和companies数据接口 前端项目中封装axios请求，包括请求/响应拦截处理 Vue Router的使用实践，包括参数传递和嵌套路由 项目采用Bootstrap进行样式设计，通过CDN方式引入 详细说明了json-server的安装配置、端口修改方法 提供了axios二次封装示例代码和用户接口封装示例 项目通过模拟真实前后端分离开发场景，重点练习Vue路由相关技术。
2025-11-04 23:44:49
849
原创 Vue3 路由介绍
本文介绍了Vue3中的前端路由概念及其实现方式Vue Router。内容包含：1)前端路由的演进历程，从多页面时代的后端路由到单页面时代的前端路由；2)Vue Router的两种安装方式，推荐在项目创建时直接安装；3)基本使用方法，包括配置路由文件、挂载路由实例和使用RouterLink/RouterView组件；4)简单使用与完整使用场景的区别。文章还指出后续将深入讲解Vue Router的更多功能，并建议读者参考官方文档获取详细信息。
2025-11-04 16:01:20
788
原创 Vue3 插件（可选独立模块复用）
本文介绍了Vue3插件的基本概念和使用方法。插件是一种能为Vue添加全局功能的可选项独立模块，可通过use方法安装。文章详细说明了插件的两种形式（带install方法的对象或安装函数本身）和四种常见使用场景。通过两个实例演示了插件开发：一个是将翻译函数添加到globalProperties实现国际化功能，另一个利用provide/inject机制实现同样功能。这些示例展示了如何在项目中编写和使用自定义插件来扩展Vue的功能，同时保持代码的模块化和可复用性。
2025-11-03 18:00:11
868
原创 Vue3 自定义指令（DOM 行为复用）
Vue3 自定义指令提供了一种底层 DOM 访问逻辑的复用方式，适用于需要通过直接 DOM 操作实现的场景。本文介绍了三种注册方式：组件内注册、directives 选项注册和应用级全局注册。重点讲解了指令的生命周期钩子函数（created、mounted等）及其参数（el、binding等），并通过获取焦点指令v-focus等示例演示了指令的实际应用。文中强调自定义指令应以v开头驼峰命名，并指出指令执行顺序与DOM创建顺序一致。相比类绑定等其他方案，自定义指令更适合需要直接操作DOM元素的特殊功能实现。
2025-11-03 15:25:35
904
原创 Vue3 组合式函数（逻辑复用）
Vue3组合式函数(Composables)是通过组合式API封装可复用状态逻辑的函数。文章通过鼠标追踪和异步获取数据两个示例，展示了从组件逻辑到组合式函数的封装过程，包括：1)基本组合式函数的创建和使用；2)通过函数嵌套实现逻辑的进一步拆分复用；3)支持响应式参数的组合式函数实现，利用watchEffect和toValue实现参数监听。组合式函数使得状态逻辑可以像组件一样被复用，同时保持组件间的状态独立性。这种模式提高了代码的可维护性和复用性，是Vue3组合式API的重要应用方式。
2025-11-03 01:15:56
954
原创 Vue3 异步组件（懒加载组件）
Vue3异步组件摘要 Vue3通过defineAsyncComponent函数实现组件懒加载，减少初始加载时间。异步组件仅在需要时加载，支持全局或局部注册，适用于大型应用优化。 核心特性： 基本用法：配合动态import()语法实现按需加载 注册方式：支持全局(app.component)和局部注册 状态处理：可配置加载中(loadingComponent)和错误(errorComponent)状态组件 优化效果：减少初始包体积，提升首屏加载速度 典型应用场景：路由组件、弹窗等非首屏必要组件。通过延迟加载提
2025-10-31 15:50:01
1200
原创 Vue3 重构待办事项（主要练习组件化）
本文介绍了一个基于Vue3的待办事项应用重构过程，重点练习组件化开发。通过将原应用拆分为Header、List和Footer三个组件，实现了代码结构的优化。文章详细说明了父子组件间的数据通信（使用defineModel实现双向绑定）和事件通信（使用defineEmits发射事件）的实现方法，并展示了如何共享公共样式。最后提供了完整的项目结构图和核心代码片段，包括App.vue的主框架以及Header组件的实现，体现了Vue3组件化开发的基本思路和实践要点。
2025-10-30 22:10:50
732
1
原创 Vue3 依赖注入（provide 和 inject）
Vue3依赖注入（provide和inject）解决了组件嵌套过深时的数据传递问题。通过provide在父组件定义可传递的数据和方法，inject在任意子组件注入使用，避免了props逐级透传的冗余。provide接收两个参数：注入名(字符串/Symbol)和注入值(任意类型)。inject会获取最近父组件提供的同名依赖，应用层provide可实现全局数据共享。注入函数时建议判空处理，避免潜在错误。该机制特别适用于组件层级复杂和插件开发场景，简化了跨组件通信流程。
2025-10-30 15:14:14
1081
原创 Vue3 插槽
本文介绍了Vue3插槽的使用方法，主要包括以下几个要点： 基本插槽使用 - 通过<slot>元素定义插槽出口，父组件可插入任意内容（文字、元素或组件）； 渲染作用域 - 插槽内容可访问父组件的数据； 默认内容 - 当父组件未提供内容时显示默认内容； 具名插槽 - 通过name属性定义多个插槽，使用v-slot:name或简写#name指定内容； 条件插槽 - 结合$slots和v-if判断是否渲染插槽内容。插槽功能强大灵活，可有效实现组件内容分发和定制化显示。
2025-10-29 10:33:04
927
原创 Vue3 透传 Attributes
本文介绍了Vue3中Attributes透传的相关知识，主要包括：1.单个根文件继承时，外部class和事件会与子组件合并，内部事件先执行；2.深层组件会代代相传Attributes；3.通过defineOptions可禁用继承，或使用v-bind="$attrs"指定非根节点继承；4.多根节点时需手动指定继承节点。文章通过代码示例演示了不同场景下的透传效果，并总结了相关规则。
2025-10-28 16:39:05
818
原创 Vue3 组件 v-model
Vue3 组件 v-model 摘要（149字）： Vue3.4+推荐使用defineModel宏实现组件双向绑定，简化了props+自定义事件的传统方式。defineModel支持参数命名(v-model:title)、类型校验(type)、必填校验(required)等特性。文章通过输入框组件示例展示了父子组件数据同步、原生DOM包装、底层实现机制等核心用法。需注意默认值可能导致父子数据不同步问题，建议用required替代。v-model参数化功能允许自定义绑定属性名，增强组件灵活性，适用于复杂表单场
2025-10-27 16:28:45
1439
原创 Vue3 自定义事件
本文介绍了Vue3中自定义事件的使用方法。通过电子木鱼组件示例，展示了子组件如何通过$emit触发自定义事件，父组件如何监听处理。文章详细说明了事件声明、参数传递规则，并演示了事件校验的实现方式。自定义事件解决了子组件无法直接修改父组件数据的问题，实现了组件间的通信。文中还特别强调了事件命名的规范建议和参数校验的重要性，为开发者提供了完整的自定义事件使用指南。
2025-10-26 22:48:18
815
原创 Vue3 Props
Vue3 Props 使用指南 本文介绍了 Vue3 中 props 的使用方法。主要内容包括： 使用 defineProps 宏接收 props，可通过数组或对象形式定义 支持简洁写法直接使用 props 变量名 响应式解构需使用 getter 函数监听变化 命名规范：内部使用 camelCase，外部传递使用 kebab-case 提供完整示例演示父子组件间的 props 传递和监听 文中详细讲解了各种使用场景，并附有代码示例和效果截图，帮助理解 Vue3 中 props 的实际应用。
2025-10-26 16:58:00
954
原创 Vue3 组件注册
文章摘要：本文介绍了Vue3组件的注册方式和使用规范。主要内容包括：1.组件结构，重点说明了setup语法糖的优势和scoped样式的作用；2.组件注册的两种方式：全局注册（通过app.component）和局部注册（在组件内import），并对比了二者的优缺点，建议优先使用局部注册；3.组件命名规范，推荐使用PascalCase大驼峰命名法。文章还提供了组件代码示例，帮助开发者理解Vue3组件的编写和注册方式。
2025-10-25 16:42:21
675
原创 Vue3 模板引用——ref
Vue3模板引用(ref)使用指南：本文介绍了Vue3中模板引用的使用方法。1.访问DOM元素：通过ref属性获取元素引用，建议在onMounted生命周期中使用，避免未挂载时访问报错。2.组件引用：父组件可通过ref访问子组件暴露的方法和属性（需子组件使用defineExpose显式暴露）。3.父子通信：提供了props/emit和provide/inject两种方式实现组件间通信，前者适用于直接父子组件，后者适用于跨层级组件。文章通过代码示例展示了各种场景下的具体实现方式。
2025-10-24 13:08:38
1093
原创 Vue3 基础实战练习
本文介绍了一个基于Vue3的待办事项应用实现，包含添加、编辑、删除和状态管理功能。主要技术点包括：使用v-model绑定输入框、响应式数组存储待办列表、计算属性过滤不同状态事项、watchEffect实现本地存储持久化。功能包括：Ctrl+Enter添加事项、双击编辑、状态切换（全部/未完成/已完成）、剩余数量统计、二次确认删除等。通过这个实战练习，综合应用了Vue3的模板语法、响应式数据、计算属性、事件处理等核心概念。
2025-10-23 13:24:30
1078
原创 Vue3 侦听器（watch 和 watchEffect）
本文介绍了Vue3中侦听器watch的基本使用和细节。watch用于在响应式数据变化时执行副作用操作，支持侦听ref、计算属性、reactive对象、getter函数和数组等多种数据源。文章通过示例展示了不同数据源的侦听方式，特别指出侦听reactive对象属性时需使用getter函数，并解释了reactive对象的深层侦听特性。同时对比了watch与计算属性的区别，强调了watch适合执行异步操作等副作用场景。
2025-10-21 01:02:59
1128
原创 Vue3 表单输入绑定
Vue3表单输入绑定指南：使用v-model简化表单处理 本文介绍了Vue3中通过v-model实现表单输入绑定的方法。v-model语法糖简化了手动连接值绑定和事件监听器的过程，可应用于多种表单元素： 文本输入框（input/textarea）：绑定value属性，监听input事件 复选框（checkbox）：单一复选框绑定布尔值，多复选框绑定数组 单选框（radio）：绑定选中项的value值 选择器（select）：单选绑定字符串，多选绑定数组（需按住Ctrl/Command键） 文中通过示例代码展
2025-10-18 21:20:52
1027
原创 Vue3 事件处理
本文介绍了Vue3中的事件处理机制，主要包括： 事件监听方法：使用v-on或@指令，支持内联事件处理器（简单场景）和方法事件处理器（复杂场景） 参数传递：可传递自定义参数和原生DOM事件参数 事件修饰符：如.stop、.prevent等，可连用控制不同行为 按键修饰符：支持键盘事件处理，包含常用按键别名和系统按键修饰符，可通过.exact精确控制组合键触发 鼠标按键修饰符：区分左、中、右键操作 文章通过代码示例展示了各种事件处理场景的应用方式。
2025-10-17 21:51:13
1072
原创 Vue3 列表渲染
Vue3 列表渲染主要使用 v-for 指令，支持数组和对象遍历。数组遍历时可获取元素(item)和索引(index)，支持解构操作；对象遍历时可获取值(value)、键(key)和索引(index)。嵌套 v-for 可访问父级作用域变量，建议使用唯一 key 优化渲染性能。template 标签上使用 v-for 不会渲染自身，组件上使用需通过 props 传递数据。
2025-10-17 14:44:04
1169
原创 Vue3 条件渲染
本文介绍了Vue3中的条件渲染功能，主要包括v-if、v-else、v-else-if和v-show指令的使用方法及区别。v-if系列指令用于条件性渲染元素，而v-show通过控制CSS的display属性来切换元素显示。文章还对比了v-if和v-show的性能特点，建议根据状态切换频率选择合适的指令。最后，针对v-if和v-for同时使用的情况，推荐使用template标签包裹v-for以避免报错。
2025-10-17 01:17:07
693
原创 Vue3 Class 与 Style 绑定
本文介绍了Vue3中Class与Style绑定的多种方式。主要包含：1）绑定HTML class的三种对象方式（直接用法、对象变量、计算属性）；2）绑定数组的三种形式（直接修改、三目运算、嵌套对象）；3）组件上使用class的两种情况（单根自动合并/多根需指定）。每种方式都通过代码示例演示了具体用法和效果，并给出了不同场景下的使用建议。文章特别强调了在复杂判断时推荐使用计算属性，避免代码冗余。
2025-10-16 23:51:33
983
原创 Vue3 计算属性
本文介绍了Vue3中计算属性的核心概念和使用方法。首先分析了普通模板表达式的缺陷：只能写简单表达式、不够直观、重复使用时代码臃肿。通过计算属性可以完美解决这些问题，支持复杂运算、命名清晰、响应式更新。文章还介绍了可写计算属性的使用（但不推荐）以及最佳实践：避免在getter中产生副作用、不直接修改计算属性值。最后对比了计算属性和方法的区别：计算属性基于响应式数据变化重新计算并缓存结果，而方法在每次视图更新时都会重新执行。计算属性在性能上更优，适合处理复杂逻辑的场景。
2025-10-15 15:32:58
1076
原创 Vue3 响应式常用API
本文介绍了Vue3中常用的响应式API，主要包括： ref相关API：toRef用于将响应式对象属性转为ref；toRefs将整个响应式对象转为ref对象；unref返回ref内部值或参数本身。 readonly创建只读代理对象，防止数据被修改。 判断类API：isRef/isReactive检测响应式类型；isProxy检测代理对象。 toValue作为unref升级版，更灵活支持函数返回值。 这些API为Vue3的响应式编程提供了丰富工具，能有效处理各种数据响应需求。
2025-10-15 13:20:06
264
原创 Vue3 响应式基础
Vue3响应式基础：本文介绍了Vue3中声明响应式状态的几种方式。直接修改变量不会触发模板更新，必须使用ref()函数来创建响应式引用。ref()可以包装任何类型数据，通过.value访问值，在模板中自动解包。文章详细展示了ref处理基础类型、对象和数组的示例，并说明ref具有深层响应性。同时介绍了shallowRef()用于放弃深层响应式以优化性能的情况，以及DOM更新的异步特性（"next tick"机制）。还对比了ref与shallowRef在视图更新上的差异，指出其他响应式更新可
2025-10-14 23:01:50
777
原创 Vue3 模板语法
本文介绍了Vue3模板语法的基础知识，包括创建项目、文本插值、HTML渲染、属性绑定和表达式使用。主要内容有：1）使用双大括号{{}}进行文本插值；2）通过v-html指令渲染原始HTML；3）使用v-bind指令绑定元素属性，支持简写和动态多值绑定；4）在模板中使用JavaScript表达式和调用函数；5）模板沙盒化特性限制全局对象访问，需通过app.config.globalProperties添加全局对象。文章通过代码示例展示了各种语法用法，并强调了动态渲染HTML的安全风险。
2025-10-13 22:28:11
1361
原创 创建一个 Vue3项目
本文介绍了如何创建一个Vue3应用的环境配置和基本步骤。首先需检查Node版本（推荐18.3+），建议使用nvm管理多版本。接着详细说明了创建Vue3项目的完整流程：在VSCode中运行npm create vue@latest命令，选择配置项并完成项目初始化。文章特别指出Vite构建工具需要Node 20.19+或22.12+版本，建议使用最新LTS版本。还解析了项目目录结构，并推荐了VSCode开发插件，包括Vue官方插件Vue-Official。整个过程涵盖了从环境准备到项目运行的完整指导。
2025-10-13 15:57:53
2075
原创 软件设计师笔记
在第一个科目中，考6-7分，第二个科目中，没有大题。python 题目考的比较多，但是只有1分左右，刷下题，闭坑就行，如果没时间的话。有时间就去学学基础。C语言写出的程序是exe文件，只能在Windows系统运行，无法在Linux系统运行，可移植性差；Java语言的代码在所有系统都可以使用，可移植性强。例题：编译语言（C语言）的效率更高例题：选DC语言和C++语言，属于编译型语言，运行效率很高，适合开发系统型程序；Java、C#、Python、PHP语言，属于解释型语言；
2025-05-24 05:32:53
976
伸缩盒模型网页（HTML+CSS）.zip
2020-06-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人