- 博客(59)
- 收藏
- 关注
RSS订阅原创 CSS3 旋转动画在 Vue 中的实战应用
控制元素显隐而非切换类名，减少 CSS 计算量。在数据加载完成后触发动画，使用。对于非循环动画，使用。限制动画循环次数（如。
2025-05-17 17:07:03
292
原创 Element Plus 图标组件的高效使用技巧
在 Vue 项目中使用 Element Plus 图标时，推荐采用。在需要根据状态切换图标的场景（如折叠菜单按钮），可通过。若需全局注册所有图标（适用于复杂项目），可在。
2025-05-17 17:04:07
123
原创 解决微信开发者工具打包上传问题指南
在使用微信开发者工具进行小程序打包上传时，开发者常遇到各类问题。以下是常见问题的解决方案及操作指南，帮助您高效完成代码提交与发布。
2025-05-10 15:00:52
570
原创 解决微信开发者工具打包上传问题指南
在使用微信开发者工具进行小程序打包上传时，开发者常遇到各类问题。以下是常见问题的解决方案及操作指南，帮助您高效完成代码提交与发布。
2025-05-10 14:59:48
1001
原创 快速学习和使用微信开发者工具
位于界面下方或右侧，包含多个调试面板，如 "控制台"（用于输出调试信息、执行 JavaScript 代码）、"WXML"（查看页面的 WXML 结构，选中节点可查看对应的样式和布局）、"Sources"（查看和调试代码文件，设置断点进行调试）、"Network"（监控网络请求，查看接口调用的详细信息，如请求地址、参数、响应数据等）、"AppData"（查看小程序的应用数据，实时监控数据的变化）等。安装插件的方法：在菜单栏中选择 "工具"→"插件管理"，在插件市场中搜索需要的插件，点击安装即可。
2025-05-10 14:57:04
556
原创 Uniapp 文档介绍与使用
打开 HBuilderX，点击菜单栏的 “文件”->“新建”->“项目”，在弹出的新建项目窗口中，选择 “uni-app” 模板，填写项目名称、项目路径、选择运行的平台等信息后，点击 “创建” 按钮，HBuilderX 会自动初始化一个 Uniapp 项目。在 HBuilderX 中，点击工具栏的 “运行” 按钮，选择要运行的平台，如 “微信开发者工具”“Chrome 浏览器”“Android 模拟器” 等。├─ App.vue // 全局组件，配置全局样式、生命周期等。
2025-05-10 14:55:36
725
原创 Uni-app 组件使用
Uni-app 的组件体系丰富多样，既包含了类似 HTML 标签的基础组件，也有一些特定平台的原生组件，同时还支持开发者自定义组件。基础组件如viewtextimage等，它们在不同平台上都有良好的兼容性和一致性表现；原生组件则能调用特定平台的功能，实现更强大的交互效果；自定义组件则允许开发者根据项目需求封装可复用的代码块。在 Uni-app 中，创建自定义组件非常简单。首先，在项目的components目录下创建一个新的文件夹，例如，然后在该文件夹下创建文件。以下是一个简单的自定义组件示例：vue。
2025-05-04 21:41:17
1328
原创 前端 uni-app 初步使用指南
在 HBuilderX 中，点击菜单栏的 “文件” -> “新建” -> “项目”，在弹出的 “新建项目” 窗口中，选择 “uni-app” 模板。填写项目名称、选择项目保存路径，然后选择一个你喜欢的模板（如 Hello uni-app 模板），点击 “创建”，HBuilderX 会自动为你生成一个基础的 uni-app 项目框架。），根据你的操作系统下载对应的安装包。HBuilderX 是 uni-app 官方推荐的开发工具，它对 uni-app 有着良好的支持，提供了丰富的插件和便捷的开发调试功能。
2025-05-04 21:39:01
888
原创 Git 入门指南：下载与初步认识
安装完成后，你可以通过在 “开始” 菜单中找到 “Git” 文件夹，运行 “Git Bash” 来启动 Git 的命令行界面。使用命令git pull origin 分支名，例如git pull origin main，它会将远程仓库对应分支的更新合并到本地仓库的当前分支。在 GitHub 网站上登录你的账号，点击右上角的 “+” 号，选择 “New repository”，填写仓库名称、描述等信息后，点击 “Create repository” 创建远程仓库。首先，你需要在自己的电脑上安装 Git。
2025-05-04 21:35:12
642
原创 uni-app 引入高德地图
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标（可选）。AMapUI: { version: '1.1', plugins: ['geo/DistrictExplorer'] }, // 可选UI组件。mapStyle: 'amap://styles/light' // 地图样式（浅色主题）。// 地图定位到搜索结果。
2025-04-25 16:55:37
1461
1
原创 ECharts 地图开发入门
{name: '湖北', value: 6812}, {name: '广东', value: 2305},。{name: '河南', value: 1273}, {name: '浙江', value: 1244},。tooltip: { formatter: '{b}：{c} 例' }, // {b}省份名，{c}数值。range: ['#b3e0ff', '#409eff', '#0059b3'], // 颜色范围。map: 'china', // 指定地图名称（需与引入的地图数据匹配）。
2025-04-25 16:52:58
1050
原创 uniapp 常用开发技巧与实战指南
掌握 uniapp 的核心组件特性、跨平台适配策略和性能优化技巧，能够有效提升多端开发效率。建议开发者定期查阅官方更新文档，关注组件市场的优质插件（如 uView、ColorUI）。在 CSDN 发布技术文章时，注重内容结构清晰、案例完整，通过合理的 SEO 优化提升传播效果。如果需要某部分内容的深度解析（如状态管理集成、第三方 SDK 接入），欢迎在评论区留言，后续将推出专项技术教程。
2025-04-25 16:50:42
679
原创 HBuilder X：前端开发的终极生产力工具
HBuilder X 以「轻如编辑器，强如 IDE」的设计理念，融合极速性能、多端开发、生态扩展三大核心优势，成为前端开发者从效率工具到生产力平台的首选。其「开箱即用」的轻量化设计降低入门门槛，「深度扩展」的插件生态适配复杂场景，结合持续迭代的性能优化与跨平台能力，已服务全球超 900 万开发者，助力企业级项目高效落地。HBuilder X 提供轻量化绿色发行包（仅 10 余 MB），支持 Windows、macOS、Linux 全平台。
2025-04-20 21:36:14
1167
原创 快速下载Node.js
Node.js 彻底改变了 JavaScript 的应用边界，使其从浏览器走向服务器和终端。其高性能、易扩展的特性使其成为后端开发的热门选择，搭配 NPM 生态和 VS Code 开发工具，可快速构建现代化应用。Node.js 是基于 Chrome V8 引擎的开源 JavaScript 运行时，允许开发者使用 JavaScript 构建服务器端应用、命令行工具和分布式系统。它以事件驱动、非阻塞 I/O 模型著称，适合开发高性能、可扩展的网络应用。
2025-04-20 21:27:51
709
原创 如何下载——VS Code：轻量级代码编辑器的开发利器
Visual Studio Code（VS Code）是一款由微软开发的免费开源代码编辑器，支持多种编程语言，适用于前端、后端及全栈开发。它以轻量级、高效性和强大的扩展性著称，被全球开发者广泛使用。
2025-04-20 21:26:57
272
原创 局部路由守卫
局部路由守卫为我们提供了更细粒度的路由控制，允许我们在特定的路由或组件级别添加鉴权和逻辑处理。局部路由守卫分为path守卫和component守卫，它们分别适用于不同的场景。path。
2025-04-13 13:53:03
239
原创 全局后置守卫与标题栏切换
在单页面应用（SPA）中，用户在不同页面间切换时，页面标题的动态更新能显著提升用户体验。全局后置守卫是实现这一功能的理想选择，它不仅能确保标题与当前页面内容相符，还能用于记录用户行为，为后续的用户画像构建提供数据支持。
2025-04-13 13:52:12
204
原创 全局前置守卫与购物车页面鉴权
是全局前置守卫，每次路由切换前都会执行。若要访问购物车页面且用户未登录，就会跳转到登录页面；若已登录或者访问的不是购物车页面，就正常放行。在很多应用里，并非所有页面都能随意访问。例如购物车页面，用户需先登录才能查看。这时可以利用全局前置守卫来实现这一鉴权功能。全局前置守卫的书写位置在。对象之前添加鉴权代码。
2025-04-13 13:50:34
260
原创 深挖 TypeScript 基础数据类型：应用与陷阱
在 TypeScript 的学习与实践过程中，对基础数据类型的深入理解和正确运用，是写出高质量代码的关键。本篇文章会通过探讨数据类型在实际场景中的应用，分析常见错误，帮助大家提升运用 TypeScript 基础数据类型的能力。通过留意函数参数、返回值以及对象属性的类型，规避常见错误，开发者能更高效地使用 TypeScript 开发高质量应用。若尝试传入非number类型的参数，TypeScript 编译器会报错，防止运行时错误的出现。// 错误使用，字符串类型不匹配。// 正确做法，进行null检查。
2025-04-06 20:05:07
268
原创 TypeScript 类型系统详解
TypeScript 支持丰富的基础数据类型，涵盖number、string、boolean、null、undefined、symbol以及bigint。这些类型为构建可靠的代码提供了基石。在实际编码中，正确使用基础数据类型不仅能增强代码的可读性，还能借助 TypeScript 的类型检查机制，提前发现潜在错误，提升代码质量。
2025-04-06 20:03:16
477
原创 初见TypeScript
TypeScript 由微软开发，它本质上是 JavaScript 的超集，为 JavaScript 添加了静态类型系统，让开发者在编码阶段就能发现潜在类型错误，提升代码质量，使代码更具可维护性。以变量声明为例，JavaScript 中声明变量无需指定类型，而 TypeScript 能让开发者为变量、函数参数和返回值指定类型。上述代码中，let message: string声明了一个类型为string的变量message，避免给message赋值非字符串类型数据，降低运行时错误风险。定义数组有两种方式。
2025-04-06 20:02:07
625
原创 vue3 响应式系统指南
通过合理运用这些响应式 API，可以在保证数据正确性的同时显著提升应用性能。建议根据具体场景选择合适的响应式方案，在深度响应与性能开销之间找到平衡点。用于创建仅跟踪顶层值变化的响应式引用。当需要处理大型对象但只关心顶层属性变化时，可显著提升性能。创建仅第一层属性响应式的对象。
2025-03-29 14:19:25
794
原创 下载和初步上手Vue3路由
只作用于当前路由，用于该路由的特定权限验证。组件内守卫用于在组件内部处理路由相关的逻辑，如在进入、更新、离开组件时执行特定操作。当哈希值发生变化时，会触发回调函数，我们可以在回调函数中获取当前的哈希值并进行相应的操作。在路由守卫中可以根据这些元信息进行相应的验证，确保用户有足够的权限访问目标路由。路由守卫用于在路由切换的不同阶段执行特定的逻辑。则是路由出口，它会根据当前的路由匹配情况显示对应的组件。组件来生成路由链接，用户点击链接时会跳转到指定的路由。获取目标路由的哈希值，并进行相应的处理。
2025-03-29 14:04:14
924
原创 Vue3 基础语法指南：响应式系统与 Ref 应用
功能点Setup 函数ReactiveRef作用组件逻辑入口深度响应式对象灵活响应式变量适用场景所有组合式 API 使用复杂对象状态管理基础类型 / 简单对象管理性能考量优先使用组合式 API对象层级越深越推荐基本类型优先特殊能力访问 props/context自动依赖收集模板引用通过合理运用这些特性，可以构建出更高效、更易维护的 Vue3 应用。
2025-03-21 19:39:48
274
原创 下载与快速上手 NVM：Node.js 版本管理工具
graph TDA[执行where node] --> B{输出NVM路径?B -->|是| C[验证成功]B -->|否| D[检查旧版Node.js残留]E[执行nvm version] --> F{显示版本号?F -->|是| G[版本验证通过]F -->|否| H[修复环境变量]I[执行node -v] --> J{版本正确?J -->|是| K[完整验证通过]J -->|否| L[重新执行nvm use]截至2025年3月21日本方法仍然可用。
2025-03-21 19:33:17
866
原创 Vuex 基础概念与环境搭建
Vuex 是实现数据集中式状态管理的插件。所有组件共享 Vuex 中的数据，当任意组件修改数据时，其他组件会同步更新。
2025-03-15 21:12:51
312
原创 认识vue2脚手架
package.json：包的说明书（包的名字，包的版本，依赖哪些库）。所以main.js文件的名字不要随便修改，main.js文件的位置不要随便动。第二种：在vue.config.js文件中进行脚手架的默认配置。-- 当浏览器不支持JS语言的时候，显示如下的提示信息。如果用单字母表示组件的名字，会报错，名字应该由多单词组成。脚手架默认配置在vue.config.js文件中进行。main.js、index.html等都是可以配置的。-- 开启移动端虚拟窗口（理想视口） -->-- 设置页签图标 -->
2025-03-09 13:07:24
544
原创 VUE2脚手架的下载与安装
Vue的脚手架（Vue CLI: Command Line Interface）是Vue官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成html css js代码，并且可以将这些代码自动发布到它自带的服务器上，为我们Vue的开发提供了一条龙服务。Vue CLI注意：Vue CLI 4.x需要Node.js v8.9及以上版本，推荐v10以上。
2025-03-09 13:04:01
1049
原创 Vue程序下载
Vue是一个基于JavaScript（JS）实现的框架，想要使用它，就得先拿到Vue的js文件Vue官网Vue2：Vue.jsVue3：Vue.js - 渐进式 JavaScript 框架 | Vue.js下载并安装vue.js第一步：打开Vue2官网，点击下图所示的“起步”：第二步：继续点击下图所示的“安装”第三步：在“安装”页面向下滚动，直到看到下图所示位置：第四步：点击开发版本，并下载第五步：安装Vue使用script标签引入vue.js文件。就像这样：<script src=”xx/vu
2025-02-28 16:31:24
957
原创 Vue中的数据代理与数据劫持
创建Vue实例vm，vm身上会有_data属性，_data通过劫持data配置项，再通过defineProperty的getter和setter，得到的响应式的数据。把vue中的data数据拦截改写成具有getter和setter形式的_data,就是数据劫持。数据代理vm中_data中的数据又通过数据代理（也是通过defineProperty的getter和setter实现），放置到vm身上，vm可以通过getter方法，setter方法直接使用_data中的数据，方便书写数据。
2025-02-28 16:27:34
505
原创 js的数据代理机制
vm这个Vue实例上可能会出现_xxx或$xxx属性， 而这个属性名可能会和Vue框架自身的属性名冲突。通过访问 代理对象的属性 来间接访问 目标对象的属性。注意：代理对象新增的这个属性的名字 和 目标对象的属性名要一致，这样我们访问代理对象属性，就像在访问目标对象的属性一样。// 实现数据代理,目的是读取 myvm.name == options.data.name。// 如果要实现数据代理机制的话，就需要给proxy新增一个name属性。// 读取对象的属性值 对象[变量]-- vue程序 -->
2025-02-28 16:26:24
483
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人