- 博客(127)
- 收藏
- 关注
RSS订阅原创 node版本管理nvm-desktop
场景：当你有多个项目，但是使用的Node版本不一样，需要频繁切换node版本，建议使用nvm-desktop软件管理，下载安装：https://github.com/1111mp/nvm-desktop/releases。
2024-12-26 11:40:31
156
原创 Echarts 绘制地图
注意：地图点击可以下钻，再点进去是二级，直到你想要的省市地区（点击旁边的空白可以返回上一级）；右侧JSON数据的链接地址，可以选择下载下来（放在json文件夹中），也可以使用在线地址！左侧是地图，右侧是JSON数据路径，点击你想要生成的地图省市、地级（以中华人名共和国为例为例）我的地图Json文件是下载放到项目里assets下的，你可以使用在线的也可以引用本地的。官网地址：https://echarts.apache.org/二、获取地图的GeoJSON。四、准备放地图的容器。
2024-11-27 11:44:01
1053
原创 前端项目接入单元测试手册
vue/test-utils：这是Vue官方提供的用于组件单元测试的工具库。关键是能够在隔离的环境下测试组件的行为，而无需担心与其他组件或状态的交互。Vue Test Utils为Vue项目中的单元测试提供了一系列有用的API，它使得测试Vue组件变得简单，能模拟用户交互，如点击、输入并断言组件行为。使用Vue Test Utils进行单元测试意味着可测试组件模板、脚本和样式，从而确保每个组件按预期工作，并能稳健处理边界情况。版本2文档 @vue/test-utils。
2024-11-18 11:10:38
685
1
原创 公车5.0优化内容
6、路由跳转之后添加tab，meta中的hidden配置为false时显示tab，修改所有路由的meta_hide属性为false。1、首屏加载速度慢，原因是commons重复打包了，删除即可，首屏加载速度提升了10几秒，本地打包速度提升了2分钟。5、修改css卡顿问题，全局每个页面都引入了一次global.less，删掉即可。2、删除$dogShanXi重复方法，并全局替换dogShanXi方法。3、Tab打开太多页面卡死，设置最多打开10个。8、路由按懒加载，更换加载方式。
2024-03-07 09:12:08
262
原创 webpack/vue-cli构建速度和打包体积优化
可以生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等javascript复制代码新版的 vue-cli 也内置了webpack-bundle-analyzerjson复制代码配置：默认值：server。在server 模式下，分析器将启动 HTTP 服务器以显示 bundle 报告。在 static 模式下，将生成带有 bundle 报告的单个 HTML 文件。
2024-01-18 20:07:28
1599
原创 Vue3中如何使用this
vue3中，使用setup()来代替了以前data、methods函数等。因为，setup执行是在created之前。所以，没有this。但是又想使用$parent,$refs等方法。
2023-11-15 12:01:15
449
原创 vue中minxin和hooks区别
Mixins 是vue2的用法，通过对象的方式进行定义和应用，在组件中的属性和方法会与组件本身的属性和方法进行合并，可能会导致命名冲突或不可预料的行为。Hooks 是vue3的用法，使用函数的方式定义和使用，可以将相关的逻辑和状态封装为自定义的 Hook 函数，相对来说更安全。
2023-11-14 16:49:15
647
原创 vue自定义指令控制权限
指令会根据当前用户的权限判断按钮是否应该显示，如果权限不足，则从DOM中删除该按钮。1、在main.js中注册全局指令。指令控制按钮的显示和隐藏。
2023-11-14 16:33:41
422
原创 Vue3 + Vite + Ts 开发必备的 VSCode 插件
TypeScript Hero：可以帮助你快速重构 TypeScript 代码，包括重命名、提取函数等。TSLint：另一个代码风格检查工具，可以帮助你遵循一致的 TypeScript 代码风格。GitLens：方便的 Git 工具，可以快速查看代码的 Git 历史记录、文件修改记录等。GitLens：方便的 Git 工具，可以快速查看代码的 Git 历史记录、文件修改记录等。Prettier：代码格式化工具，可以根据配置格式化代码，让你的代码更加整洁易读。Vue Peek：快速定位 Vue 组件和模板。
2023-11-14 11:03:55
3421
原创 vue-render函数的三个参数
在示例代码中，我们定义了一个表单组件，其中的 `fields` 数组包含了表单中的各个字段，每个字段都有一个 `type` 属性表示字段的类型，例如文本框、密码框、下拉框等。在 `render` 函数中，我们使用 `map` 方法遍历 `fields` 数组，根据每个字段的类型动态生成对应的组件，并将组件的属性和事件绑定到表单数据中。如果需要在模板中使用这些组件，可以通过在 `render` 函数中将生成的组件保存到一个数组中，然后在模板中使用 `v-for` 渲染这个数组。如有任何问题，请随时提问。
2023-11-04 17:28:00
1034
原创 vue3使用ts封装axios
在示例代码中，我们使用 TypeScript 创建了一个自定义的 Axios 实例 `api`，并在其中配置了请求拦截器和响应拦截器。我们还封装了 `get` 和 `post` 方法来发起 GET 和 POST 请求，并处理了响应数据和错误。请注意，示例中的 `ApiResponse` 类型和 `ApiError` 类型是根据具体的 API 响应格式进行定义的，您可以根据自己的实际情况进行调整。此外，您还可以根据需要添加其他的封装方法，例如 PUT、DELETE 等。如有任何问题，请随时提问。
2023-11-04 13:42:35
794
原创 vue多地区根据环境变量和url获取对应api地址
当你的项目分为多个地区的时候，而且每个地区的逻辑稍微有点差异的情况下，不需要每个地区都打包一次，只需要根据环境变量配置一个公共文件即可。2、新建globelParams.js。3、在axios接口请求时调用。1、新建多个环境变量文件。
2023-11-03 16:04:12
259
原创 vuex页面刷新数据丢失问题
1、保存在localStorage/sesstionStorage/cookie 中。2、在vuex中每次调用这个接口。
2023-11-03 15:39:09
203
原创 前端代码规范
HTML 编码规约(WC-HTML)-HTML 编码规约前言本规约涉及 HTML 语言的编码风格、最佳实践。配套工具eslint-config-ali：集团 JS 规约配套的 ESLint 规则包参与和反馈对规约有任何意见和建议，欢迎到这里提 issue，或到规约站点版的对应条目中留言讨论：） 1【推荐】使用 2 个空格缩进。 统一使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进： <!DOCTYPE html><html>
2023-09-21 16:42:28
842
1
原创 vue动态组件is的两种用法
3、缓存后产生activated生命周期，每次都会调用。1、is属性通常用于渲染动态组件（选项卡）2、keep-alive缓存组件。
2023-09-14 15:17:59
425
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人