- 博客(314)
- 资源 (39)
- 收藏
- 关注
RSS订阅原创 5.6 element ui
ElementUI是饿了么前端团队于2016年推出的Vue 2.x UI框架，作为最早成熟的Vue桌面端组件库，它推动了Vue在企业级项目中的应用。该框架专为中后台系统设计，提供60+高质量组件，包括表格、表单、导航等，具有国际化、主题定制、响应式布局等特性。以简洁优雅的设计风格和完善的中文文档著称，其强大的el-table组件尤为突出。ElementUI通过全局或按需引入方式使用，广泛应用于管理系统等场景，显著提升开发效率。
2025-08-21 14:46:42
611
2
原创 5.5 Corepack 详解
Corepack是从开始内置的一个工具，它的核心目标是：✅让你无需全局安装yarnpnpm等包管理器，也能在项目中使用它们的正确版本。它是一个包管理器的“调度层”或“版本代理”，通过拦截yarnpnpm零全局安装团队版本统一开箱即用的开发体验特性说明定位包管理器的“版本调度器”内置Node.js 16.13+ 默认包含目标实现“零全局安装、版本统一”核心命令enableprepareuse项目配置字段推荐组合（现代前端最佳实践）✅一句话总结Corepack 让yarn和pnpm像npm。
2025-08-21 10:30:00
1152
1
原创 5.4 4pnpm 使用介绍
pnpm）是一个高性能、节省磁盘空间的 Node.js 包管理工具，兼容 npm 生态。它由于 2016 年创建，目标是解决 npm 和早期 yarn 在依赖管理中的性能与磁盘占用问题。pnpm 的核心优势在于其独特的硬链接 + 内容可寻址存储（Content-Addressable Storage, CAS）机制，使其在安装速度、磁盘使用和依赖一致性方面表现卓越。pnpm 是当前最高效、最节省资源的 Node.js 包管理工具大型项目或 Monorepo团队协作（依赖一致性高）
2025-08-20 14:26:43
650
1
原创 5.3 包管理工具 npm yarn pnpm 对比
工具发布时间开发者定位npm2010 年Node.js 官方包管理器Yarn2016 年Facebook（现 Meta）更快、更可靠的替代方案pnpm2016 年高性能、节省磁盘空间npm：生态最成熟，适合简单项目和新手，但在效率和资源管理上落后于后两者。Yarn：平衡了速度、安全性和兼容性，适合团队协作和需要缓存优化的场景。pnpm：性能和资源管理最优，依赖隔离严格，是现代化项目（尤其是 monorepo）的首选，但需注意工具兼容性。
2025-08-20 14:18:41
769
原创 5.2 Pinia 详解
定义 state使用函数返回初始状态，确保每个实例独立。})访问与修改 state或批量更新// 批量更新count: 10,})// 使用函数形式（适用于复杂逻辑）})替换整个 state可用于日志、持久化、事件追踪等。// 添加自定义属性// 响应状态变化})})Pinia 是 Vue 3 状态管理的未来。它通过简洁的 API、强大的 TypeScript 支持和灵活的架构，极大提升了开发效率和代码可维护性。掌握其核心概念、高级用法和避坑指南，能让你在项目中游刃有余。
2025-08-19 19:37:56
420
1
原创 5.1Pina介绍
Pinia（发音为 /piːnjʌ/，意为“松果”）是由 Vue 团队核心成员开发并维护的轻量级状态管理库。它于 2020 年正式发布，目标是替代 Vuex，提供更现代化、更易用的状态管理方案。模块化：每个 store 都是独立的模块，无需嵌套模块。TypeScript 友好：开箱即用的类型推断，无需额外配置。Composition API 风格：支持setup()函数和的灵活组合。轻量且高效：体积小，性能高，与 Vue 3 深度集成。
2025-08-19 19:31:43
386
原创 5.0 vueRouter4.x
Vue Router 4.x 相比 3.x 进行了全面升级，核心变化包括：1) 采用 Composition API 开发范式，支持 useRoute/useRouter 显式引入路由状态；2) 路由守卫改为返回值机制，推荐替代 next 调用；3) 动态路由管理更精细，提供 addRoute/removeRoute 方法；4) 完全拥抱 TypeScript，类型支持更完善；5) 组件内守卫改用 onBeforeRouteLeave/Update 等新 API。这些改进使路由逻辑更模块化、可测试，与 Vu
2025-08-18 13:45:00
849
1
原创 4.9 配置 开发服务器 和 请求代理
Vite: 在中设置或'0.0.0.0'。Vue CLI: 在中设置。启动项目后，使用控制台输出的 Network地址（如）在局域网内的其他设备上访问。确保同一网络和防火墙放行。完成这些步骤后，你就可以在手机或平板上实时预览和测试你的 Vue 应用了。配置请求代理是 Vue 3 开发中解决跨域问题的标准做法。Vite用户使用中的Vue CLI用户使用中的。核心是设置target（目标地址）、和（重写路径）。配置完成后，前端代码只需请求带有代理前缀的路径即可。
2025-08-18 10:00:00
1882
1
原创 4.8 Vue 3: provide / inject 详解
特性Vue 3Vue 2API 形式Composition API 函数 (provideinjectOptions API 选项 (provideinject响应式默认且直观。提供refreactive，注入后自动响应。默认非响应式。需提供this或对象引用实现响应，复杂且易出错。语法在中非常简洁。需要定义provide函数和inject选项，稍显繁琐。Key 类型支持字符串和Symbol(推荐)。支持字符串和Symbol。默认值直接支持。通过对象语法支持。TypeScript优秀支持。
2025-08-17 13:00:00
745
1
原创 4.7 defineOptions 和 defineModel
摘要：Vue3.3/3.4引入的defineOptions和defineModel宏增强了<script setup>的功能。defineOptions允许在<script setup>中配置组件选项（如name、inheritAttrs等），弥补了原本无法设置这些选项的局限。而defineModel简化了双向绑定实现，将v-model的prop和emit逻辑封装为响应式ref，支持多模型、修饰符和类型推断，使表单组件开发更简洁。二者分别针对组件配置和双向绑定场景，显著提升了开发效率
2025-08-17 10:00:00
732
1
原创 4.6 Vue 3 中的模板引用 (Template Refs)
Vue3中的模板引用(ref)用于直接访问DOM元素或子组件实例。通过ref="xxx"声明模板引用，并在<script setup>中用const xxx = ref(null)定义响应式变量，两者名称必须匹配。建议在onMounted后访问引用值，DOM元素和子组件实例分别通过.value获取。子组件需用defineExpose暴露方法，v-for中引用会形成数组，类型脚本需明确类型声明。该特性适用于需要直接DOM操作或调用子组件方法的场景，但应优先使用响应式数据通信。
2025-08-16 15:36:03
616
1
原创 4.5 vue3 父子传递和v-model
Vue3父子组件通信主要通过props和emit实现。父组件使用props向子组件传递数据，子组件通过defineProps接收；子组件通过defineEmits定义事件，使用emit触发事件向父组件传值。父组件用@事件名监听子组件事件。v-model可实现双向绑定，是:value和@input的语法糖，支持自定义组件和多字段绑定。核心原则是单向数据流，父组件控制数据更新。掌握props和emit是Vue组件通信的基础。
2025-08-16 10:30:00
817
1
原创 4.4 vue3生命周期函数
对比项Vue 2Vue 3核心变化选项式 API组合式 API（推荐）生命周期名称destroyed入口函数createdsetup()写法选项对象导入函数逻辑复用mixins（有缺陷）自定义 Hook（推荐）调试能力一般增强（等）💡一句话总结Vue 3 的生命周期“行为不变、顺序不变”，只是“写法更新、命名微调、能力增强”。掌握和的命名变化，就能轻松迁移！问题回答Vue 2 的选项式 API 在 Vue 3 中还能用吗？✅能用！完全支持是否需要修改？⚠️ 只需将→。
2025-08-15 15:05:03
1524
2
原创 4.3 computed watch watchEffect
computed用于创建基于其他响应式数据派生出的新数据。它是一个“智能工厂”，根据依赖的响应式数据自动计算并返回一个值。核心特点：自动追踪依赖、具备缓存机制、值是响应式的。适用场景根据现有数据计算新值（如总价、反转字符串）。简化模板中的复杂逻辑。需要缓存结果以提高性能的计算。watch用于监听特定数据的变化，并在变化时执行副作用操作（如异步请求、日志打印、复杂逻辑）。核心特点：明确指定监听源、执行副作用、可配置选项丰富。适用场景数据变化时需要执行异步操作（如 API 请求）。
2025-08-15 11:33:52
925
1
原创 4.2 Vue3中reactive与ref详解及区别
reactive是为对象量身定制的响应式解决方案，使用方便但有解构陷阱。ref是一个通用的响应式容器，通过.value包装任何值，是处理基本类型和需要灵活替换场景的首选。两者可以结合使用，ref在reactive对象中会被自动解包。选择哪个主要取决于你的数据结构、编码习惯和对解包/解构的偏好。在现代 Vue 开发中，ref因其通用性而被广泛使用。
2025-08-14 17:42:52
1077
1
原创 4.1vue3的setup()
主要使用ref和reactiveref用于定义基本类型数据（字符串、数字、布尔值等）。也可以用于对象或数组，内部会自动调用reactive转换。在 JavaScript 中访问或修改值需要.value，在模板中使用时会自动解包（无需.valuecount.value++ // 修改值reactive用于定义对象或数组类型的响应式数据。直接操作对象属性，无需.value。user.age++ // 直接修改在setup()内部直接定义函数即可，然后将其返回。
2025-08-14 17:04:12
1144
1
原创 4.0 vue3简介
Vue3带来了多项重要改进：采用Composition API提升代码组织性，性能优化包括更快的虚拟DOM和Tree-shaking支持，原生TypeScript集成，新增Teleport和Fragments特性，以及基于Proxy的响应式系统。项目创建推荐使用官方工具create-vue（替代vue-cli），通过npm init vue@latest命令快速搭建基于Vite的Vue3项目，支持交互式配置选项。项目结构清晰，启动速度极快（毫秒级），要求Node.js版本20.19.0+或22.12.0+。
2025-08-13 16:05:26
331
原创 3.9开发前端常用的几个工具(nvm,json-server,nrm)
nvm（Node Version Manager）是一种用于管理和切换Node.js版本的工具。它允许开发人员在同一台计算机上同时安装和使用多个不同的Node.js版本，并且可以轻松地在这些版本之间进行切换。https://nvm.uihtm.com/正常安装，安装位置选择目录没有夹杂空格的目录即可。将如下代码加入settings.txt文件中。NVM命令常见问题 nvm use 版本号失败：使用管理员权限运行PowerShell。 安装node成功，对应版本的npm安装失败，去no
2025-08-13 10:49:37
400
1
原创 3.7vuex的 getters 和 分模块
在 Vuex store 中定义gettersstate: {todos: [},getters: {// 获取所有已完成的 todos},// 可以接受其他 getters 作为第二个参数})users.js。
2025-08-12 00:33:28
305
1
原创 3.6 修改vuex的状态Mutations ,Actions
state: {count: 0},// 修改状态},// 使用载荷来修改状态})在这个例子中，我们定义了两个 mutations:increment和decrement。increment不接受任何参数，而decrement接受一个包含amount属性的对象作为其载荷。在 Vuex store 的actions选项中定义 Actions。每个 Action 函数接收一个名为context的对象作为第一个参数。这个contextstate: 指向。rootState。
2025-08-11 16:13:43
2192
15
原创 3.5 vue调试工具和VueX简单使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 Vue Devtools 中，提供了诸如零配置的时间旅行、状态快照导入导出等高级调试功能。
2025-08-11 13:29:22
860
1
原创 3.4路由守卫
在Vue 2中，Vue Router提供了路由守卫（Navigation Guards）的功能，这允许你在路由跳转之前或之后执行逻辑。这些守卫可以用来处理认证、授权、页面标题修改、记录分析数据等任务。
2025-08-10 11:34:37
722
2
原创 3.3keep-alive
include: 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude: 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max: 数字。最多可以缓存多少组件实例。例如，只缓存名为ComponentA。
2025-08-10 10:59:24
358
1
原创 3.2Vue Router路由导航
是 Vue Router 提供的一个组件，用于在模板中创建可点击的链接，从而触发路由跳转。通过掌握这些路由导航和传参的方法，你可以构建出功能丰富、用户体验良好的单页应用。(必需): 指定目标路由的位置。类似，但不会向 history 添加新记录，而是替换当前记录。方法用于导航到新的路由，会向浏览器历史记录栈添加一条新记录。）是以键值对的形式附加在 URL 的末尾，前面有一个问号。时，导航时会在当前路径前追加路径，而不是替换整个路径。也就是说，一个被精确匹配的链接，的链接，当用户点击时会导航到对应的视图。
2025-08-09 14:40:17
801
1
原创 3.1Vue Router
是动态内容的占位符。在一级页面组件中使用，可以实现二级页面的嵌套显示。嵌套路由非常适合构建具有固定布局 + 可变内容的页面结构（如后台管理、文档网站等）。正确使用嵌套路由和，可以让项目结构更清晰、组件复用性更高、用户体验更流畅。💡 提示：你可以继续嵌套更多层级（三级、四级），但建议不要超过三层，以免结构过于复杂。
2025-08-09 12:40:47
3968
20
原创 3.0单页面应用介绍
单页面应用程序（Single Page Application, SPA）是一种现代的Web应用程序架构，它通过动态重写当前页面来更新视图，而不是传统的从服务器加载全新的页面。这种模式提供了更流畅的用户体验，因为用户可以在不重新加载整个页面的情况下浏览不同的内容或执行各种操作。
2025-08-08 14:05:16
291
原创 2.9 插槽
Vue 2 中，插槽（slots）是组件之间传递内容的一种方式。插槽（Slot）是Vue为组件封装者提供的能力，允许开发者在封装组件时，将不确定的、希望由用户指定的部分定义为插槽。默认插槽是没有指定名称的插槽，通常用于当只有一个插槽出口时。包含了所有由子组件传递过来的插槽 prop，父组件可以通过解构的方式直接访问这些属性。是父组件的数据，但其变化会导致插槽内容的更新，而无需重新渲染整个子组件。是响应式的，Vue 会自动更新插槽中显示的内容。如果没有提供任何内容，将会渲染默认内容“这里是默认内容”。
2025-08-08 09:41:09
923
3
原创 2.8 ref 和 自定义指令
Vue2允许开发者通过自定义指令扩展框架功能，实现对DOM的底层操作。自定义指令分为私有和全局两种类型，可在生命周期钩子中处理元素绑定、更新、解绑等场景，适用于表单焦点、样式动态调整、交互增强等需求。官方内置指令（如v-modelv-for）无法满足特定需求时，自定义指令是重要补充。注册位置：在组件的directives节点下声明，仅当前组件可用。示例代码color: {// 动态设置颜色使用方式：在模板中通过v-指令名调用，如。注册方式：通过全局注册，可在所有组件中使用。示例代码。
2025-08-07 12:32:24
1007
原创 2.7 (拓展)非父子通信(事件总线和provide-inject)详解
本文介绍了Vue中实现组件通信的两种方式：事件总线（EventBus）和provide/inject。事件总线通过创建独立的Vue实例实现跨组件通信，适合简单场景但需注意内存泄漏和命名冲突。provide/inject则支持祖先与后代组件间的通信，默认非响应式但可通过特定方法实现响应式数据传递。文章对比了两种方式的优缺点，建议简单通信使用事件总线，复杂场景考虑Vuex，而provide/inject更适合组件库开发。同时详细讲解了在Vue2和Vue3中的不同实现方式及注意事项。
2025-08-07 12:31:49
703
原创 2.6 sync
这种表单编辑组件（如弹窗、卡片）主状态用v-model控制显隐或编辑状态多个字段用.sync实现独立双向同步避免使用v-model多次（Vue 2 不支持）
2025-08-06 15:12:42
845
3
原创 2.5 props和v-model详解
v-modelvalue如果你不想使用默认的value和input，可以使用model选项来自定义。方式说明默认v-model等价于自定义model选项可指定 prop 名和事件名，更灵活核心机制父传子（props），子传父（$emit）💡双向绑定的本质是“单向数据流 + 事件通知”，Vue 的v-model只是语法糖，让你写起来更简洁。通过合理使用props和$emit，你可以在任何自定义组件中实现类似v-model的双向绑定效果。
2025-08-06 12:59:50
780
原创 2.4 组件通信
方法说明推荐度内联箭头函数最灵活，推荐⭐⭐⭐⭐⭐包装函数逻辑清晰，适合复杂处理⭐⭐⭐⭐☆$event+ 参数传统写法，稍显隐晦⭐⭐⭐☆☆。
2025-08-05 20:54:51
499
2
原创 2.3 子组件样式冲突详解
方案适用场景优点注意事项scoped属性组件私有样式隔离简单高效，自动隔离无法直接修改子组件样式/deep/选择器修改子组件或第三方组件样式穿透隔离，灵活调整避免滥用，可能影响样式封装性自定义前缀不使用scoped时的样式隔离兼容性好需手动维护命名规范通过合理组合scoped和/deep/，可有效解决Vue2组件样式冲突问题，同时保证组件的封装性和样式可维护性。
2025-08-05 19:07:37
651
1
原创 2.2 vue2子组件注册使用
这是Vue官方推荐的开发工具，专门为Vue.js设计，支持.vue文件的语法高亮、智能提示、代码格式化等功能。注意：如果是Vue3项目，建议使用Vue (Official) --原Volar插件替代Vetur。VSCode中实现Vue2代码高亮，推荐使用。
2025-08-04 20:58:38
341
1
原创 2.1 vue组件
Vue2项目入口文件main.js详解：作为应用入口点，负责初始化Vue实例并挂载到DOM元素。主要包括导入Vue库和根组件App.vue、配置生产环境提示、创建Vue实例并通过render函数渲染根组件、手动挂载到#app元素。组件系统由根组件（顶层结构）和子组件（功能模块）组成，遵循特定的生命周期执行顺序。Vue组件由template（HTML结构）、script（逻辑代码）和style（可选样式）三部分组成，其中data必须为函数返回对象，避免多个实例共享数据导致污染。
2025-08-04 20:25:44
2474
15
原创 2.0 vue工程项目的创建
命令是创建一个全新的、现代化的 Vue 3 项目的标准方法。它利用create-vue脚手架工具，通过交互式配置，为你生成一个基于 Vite、可选 TypeScript、Vue Router、Pinia、Vitest、ESLint、Prettier 等技术栈的项目。如果你想创建 Vue 2 项目，请不要使用这个命令，因为它创建的是 Vue 3 项目。你应该使用之前介绍的vue create(Vue CLI) 并手动选择 Vue 2 版本。
2025-08-03 19:45:46
651
原创 1.8 axios详解
Axios是一个基于Promise的现代化HTTP客户端库，主要用于在浏览器和Node.js 环境中发送HTTP请求，旨在简化异步数据交互流程。跨平台支持：在浏览器中通过XMLHttpRequest对象发送请求，在Node.js 环境中使用http模块发送请求。：所有请求均返回Promise对象，支持async/await语法，简化异步代码逻辑。自动数据转换：默认自动将请求和响应数据转换为JSON格式，也支持自定义转换规则。拦截器机制：可拦截请求和响应，用于添加认证头、统一错误处理等。安全性增强。
2025-08-03 17:42:54
713
原创 1.7vue生命周期
是一个非常重要的工具，用于在下次 DOM 更新循环结束之后执行回调函数。当你修改了数据，但需要在 DOM 实际更新后进行某些操作时，就需要使用。时，DOM 还没有完成渲染，因此你可能获取不到正确的高度。假设你有一个按钮，点击后切换一个 div 的显示状态（），并希望在 div 显示出来后立即获取它的高度。触发了 DOM 更新，但 Vue 的更新是。
2025-08-02 20:35:49
455
原创 1.6 vue 监听
Vue2中watch功能详解：通过watch选项和$watch方法实现数据监听。watch选项支持静态定义监听器，可配置deep（深度监听）和immediate（立即执行）；$watch方法则支持动态添加/移除监听器。监听对象深层属性推荐使用函数方式或配合计算属性。两者各有优势，watch选项适合初始化时静态监听，$watch方法更适合运行时动态管理监听器生命周期。
2025-08-02 14:19:41
578
Delphi编程获取汉字拼音
2013-06-24
android反编译工具
2012-10-16
DevExpress for xe3
2013-06-09
FastReport Vcl 5.3.13 For XE8 安装版
2015-10-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人