Vue.js way to explore https:https://cdn.v2ex.com/navatar/7504/adad/881_normal.png?m=1650095191 https:https://cdn.v2ex.com/navatar/7504/adad/881_large.png?m=1650095191 2025-09-28T06:58:06Z Copyright © 2010-2018, V2EX WebStorm 写 个 v-for, cpu 就狂飙 tag:www.v2ex.com,2025-09-27:/t/1162167 2025-09-27T02:33:28Z 2025-09-28T06:58:06Z cokyhe member/cokyhe 机器 MacStudio,WebStorm 升到最新 2025.2.2 版本后,几乎不转的风扇呼呼直响,发现 cpu 快 100%了

排查一番发现这样的代码就能 cpu 干一半,里面再嵌套一个 v-for ,cpu 就占八九十了:

<li v-for="menu in menus" :key="menu.key"> </li> 

之前一直以为是 ai 插件的锅,屏蔽掉所有 ai 插件后,情况依然如此,把 v-for 相关代码注释掉以后就好了 这是个啥情况啊

]]>
Nuxt UI 4 可以免费用 Pro 了 tag:www.v2ex.com,2025-09-24:/t/1161521 2025-09-24T06:31:22Z 2025-09-24T21:43:22Z w3 member/w3

With this release, we are unifying Nuxt UI and Nuxt UI Pro into a single, powerful, and completely free open-source library

Blog: https://nuxt.com/blog/nuxt-ui-v4

Nuxt UI: https://ui.nuxt.com/

]]> Vue2 除了 ele-table-editor,还有没有其他“子表单(inline-formset)”的组件? tag:www.v2ex.com,2025-09-10:/t/1158324 2025-09-10T07:31:55Z 2025-09-11T09:13:32Z coolair member/coolair https://github.com/dream2023/ele-table-editor 这个,停止维护很长时间了,主要是跟 el-form 集成起来有很多问题,还有没有其他的现成可用的? ]]> 请问 vue 的 defineEmits 类型如何使用动态键名 tag:www.v2ex.com,2025-08-29:/t/1155847 2025-08-29T09:46:56Z 2025-08-30T04:53:57Z waiaan member/waiaan enum BaseEvent { CLICK = 'click' } interface CustomEvent{ [BaseEvent.CLICK]:string } defineEmits<EmitEvents>()

上面这种写法 @vue/compiler-sfc 会报 Unsupported computed key in type referenced by a macro ,应该怎么写才对?谢谢。

]]>
VUE 开发求助 tag:www.v2ex.com,2025-07-31:/t/1149136 2025-07-31T14:43:39Z 2025-08-01T03:40:06Z andyshz member/andyshz 请问 VUE 佬们在开发大表单的时候怎么设计绑定对象的?直接在 data 中声明所有表单项来绑定吗?那岂不是会有很多冗余代码?而且如果多个组件都使用这个对象,对象在传递的时候是不是每个组件中又需要声明一次? 刚从后端学习前端,希望能有大哥指点指点,按照后端的逻辑,这个表单不是应该设计为一个对象,每个组件直接复用对象即可,传递也传递对象,但是现在开发过程中出现不少问题,搜了之后好像说不能绑定 js 的类对象。。。。。。

]]>
屎代码靠我自己骂已经不解气了,佬们来看个笑话 tag:www.v2ex.com,2025-07-30:/t/1148661 2025-07-30T02:01:13Z 2025-07-29T07:13:13Z AokiNet member/AokiNet 接/t/1148645 的 22 楼评论 “这个我 tm 太有发言权了,7 月中旬接到的一个 vue3 的代码,之前是外包公司做的,业务逻辑就是做问卷手机的,有很多表单,tm 的狗外包崽所有逻辑全部都是直接通过下标来处理表单项,我刚做的需求碰巧就是改了其中一个表单结构,我靠这个代码给我看的天天在工位骂,佬佬们赶紧也帮我骂几句解解气”

  1. 到底是怎么想的直接通过下标访问表单项,根本不考虑后期维护吗?
  2. 为什么不考虑做成配置项自动适配每个表单,而不是每个表单都对应一个页面文件,每个文件冗余巨大。
  3. 接口调用为什么不能做全局 api ,tm 复制几十遍。
  4. 变量能不能不要 abc 123 的啊。
  5. 24 年的项目,都 24 年了为什么还要用原生 wx 开发啊。

主要是针对这个项目代码评价,没有针对外包崽的意思。 总之是闹麻了,看着就头疼

附部分代码截图,很多地方都很离谱

]]>
我的 mp4 播放不出来! tag:www.v2ex.com,2025-07-25:/t/1147719 2025-07-25T08:50:02Z 2025-07-26T19:57:38Z giserman001 member/giserman001 有一个 8K 行的 VUE 代码文件用什么 AI 可以解耦 tag:www.v2ex.com,2025-07-24:/t/1147424 2025-07-24T08:17:06Z 2025-07-25T12:08:11Z ljlljl0 member/ljlljl0
大家对这块有什么好的建议吗,trae 感觉不太方向,让他写都不一定能在一个文件写这么多。 ]]>
求助 Vue 大佬,为什么使用 reactive 数据没有双向绑定? tag:www.v2ex.com,2025-07-21:/t/1146719 2025-07-21T13:12:33Z 2025-07-22T21:56:28Z liuliancc member/liuliancc 萌新小白请教,不太明白为什么使用 ref 数据可以双向绑定,使用 reactive 数据无法双向绑定?是我用法不对吗?
到底什么时候应该使用 ref 什么时候应该使用 reactive 呢?

https://play.vuejs.org/#eNp9U8Fu00AQ/ZXRXmJEsIVAHCInElQ9wAEqijj54tqTdMt6d2Wv3UCUOzeEOMAHIHFC8AP8De13MDubpNu09GLtzrx582b9ZiWeWpsOPYqJyLuqldZBh663s0LLxprWwQpanI/pU1ZODghrmLemgREVjXagA9PYTTzN/MVzUrrQWQaV0R3RuvcKD4yeywVMPWey4izMjXbH8gNO4OETjqzvFfr2miDBF+6X+Zo8CxOQdro4bKwqHdINILcwYbJpIVZRadQg3UbhPozscrQuxOzy4+fLb78ufn79++dLnvlHISqedXjQmBoV0UUUhYCMMHkW9RZj4Tqaxnc464ymh2b5haiIRypsX1knadpCTIAzPlcqZc5fcMy1PY638eoUq3e3xM+6pY8V4qjFDtsBC7HLubJdoAvpw+OXuKTzLklT9IrQdyRfY2dU7zUG2LNe1yQ7wrHa5+wEqRdvusOlQ91th/JCPXLN+EKQM/wT/m/0K7mP0sdcR3+XXnHrqn2ngir1gv6DI5rrrg1uGcN56arTPd8SUDts52WFcBy5bM9aum9OaFRNGuKKo9bYLmDZBm9L1RM6IuKSYGLL4CnUOJcauTTn7ywh08a0h410G9qE6Ea9rclEk6sWozEMN1rdm8BgZB11ROLZNWTSnL+bhgGkTFWqG7uVR8SzZAVpmrL+9EoE72eh+VWTiGUMicbzjSaYzsIgXkty6yRMvqtg1rWP1og2uIZjd211LQc+0FGVJ6hmYVUvvv+4+P0pz0JsA5Da9i7a20j5bvU3C0zoLFBfX+X1P0Ky0Q8=

直接展示代码:

App.vue

<script setup> import { ref, reactive } from 'vue' import Comp from './Comp.vue' // const styleCOnfig= ref({ // fontSize: 16 // }) const styleCOnfig= reactive({ fontSize: 16 }) </script> <template> <p :style="{ fontSize: styleConfig.fontSize + 'px'}">我是字体</p> <Comp v-model="styleConfig" /> </template> 

Comp.vue

<script setup lang="ts"> import { reactive, watch } from 'vue' interface StyleConfig { fontSize: number } interface Props { modelValue: StyleConfig } const props = defineProps<Props>() interface Emits { (e: 'update:modelValue', value: StyleConfig): void } const emit = defineEmits<Emits>() const localCOnfig= reactive<StyleConfig>({ ...props.modelValue }) watch(localConfig, (newConfig) => { emit('update:modelValue', { ...newConfig }) }, { deep: true }) </script> <template> <div> <label>字体大小</label> <input v-model="localConfig.fontSize" /> </div> </template> 
]]>
uniapp 求助 tag:www.v2ex.com,2025-07-14:/t/1145111 2025-07-14T09:03:04Z 2025-07-14T11:58:10Z boyzhang member/boyzhang Vue3 编写的最佳实践是怎样的? tag:www.v2ex.com,2025-07-08:/t/1143721 2025-07-08T05:34:05Z 2025-07-09T11:10:52Z yesterdaysun member/yesterdaysun 最近刚用上 Vue3, 我在写 Vue3 的时候总感觉代码非常的散, 稍微复杂的页面里, 就是一堆的 const ref, computed, 更不用说一堆的 xxxLoading, xxxVisible, showXXX, hideXXX, 感觉写 Vue2 的时候也没这么乱过, 如果说要提取所谓 Composiable 组件, 感觉又是一堆的 useXXX, 导出一堆的 xxx,xxx 好像也没好到哪里去, 是我写的姿势不对吗? 这方面的最佳实践到底是什么, 有没有哪个开源项目让我参考参考?

]]>
开发一款轻便简洁的论坛程序 tag:www.v2ex.com,2025-07-01:/t/1142366 2025-07-01T16:31:39Z 2025-07-04T22:29:06Z jianing831 member/jianing831 后端语言 NodeJs 后端框架 ExpressJs 数据库 MySql ui 框架 Vue 基于这样的架构写 需要多少成本 能搞下来 要是自己开发 需要从哪学起

]]>
VueConf 2025 所有演讲嘉宾及日程已确定, 7 月 12 日,深圳见! tag:www.v2ex.com,2025-06-29:/t/1141777 2025-06-29T08:28:26Z 2025-07-03T14:18:11Z itchina110 member/itchina110 VueConf 2025 将于 7 月 12 日在深圳举办。本次会议共有 11 位演讲嘉宾给大家带来分享!

大会网站: https://vueconf.cn

Vue.js & Vite 作者将给大家带来主题演讲。

Vue & Nuxt & Vite 核心团队成员 Anthony Fu 将出席本次大会,他将给大家分享 Vite DevTools 设计哲学的最新进展,以及未来展望。

Vite 核心团队成员 Matias Capeletto ( patak ) 将通过远程的方式给大家带来主题为《 The first 5 years of Vite 》的演讲。

Vue.js 核心团队成员,Vue Router 、Pinia 、VueFire 等库的作者 Eduardo (posva) 将出席本次会议,给大家带来主题为《流畅的 UI 与异步状态管理》的演讲。

Vue & Vue Macros & Vue Language Tools 团队成员、TS Macro & Vue JSX Vapor 作者高飞将出席本次会议,给大家带来主题为《 Vue JSX Vapor 的进化史》的演讲。

Vue & VueUse 核心团队成员 Doctor Wu 将出席本次会议,给大家带来主题为《 Alien Signals:Vue 响应式演进与最速 Signals 实践》的演讲。

Vue.js 核心团队成员,Volar.js & Vue Language Tools & alien-signals 作者 Johnson 将出席本次会议,并带来主题为《 TSSLint 如何消除 linter 在 IDE 中最大的隐性开销》的演讲。本次分享将会介绍 TSSLint 如何通过重新设计,解决了上述性能问题。

腾讯高级前端工程师吕洋将出席本次会议,给大家带来主题为《浏览器里构建 Vue:渐进式 AI+低代码开发体验》的演讲。

Vue.js 核心团队成员,tsdown / Vue Macros 作者三咲智子将出席本次会议,给大家带来主题为《 tsdown:库库包一切》的演讲。

Vue Vine 作者沈青川将给大家带来主题为《 Vue Vine 1.0 升级报告》的分享。

Vue.js 团队成员、Vue Language Tools 核心贡献者山吹色御守将出席本次会议,给大家带来主题《 Vue Language Tools 的增量更新机制解析》的分享。

]]>
vue3+ELInput 无法输入的问题 tag:www.v2ex.com,2025-06-25:/t/1140983 2025-06-25T08:01:26Z 2025-06-25T09:55:38Z leia member/leia vue3+ElInput 无法输入的问题

image

开篇

写业务的时候发现,因为想偷懒嘛,直接就在想在外部去定义一个变量,然后写个弹窗里( tsx )的 el-input ,而不是又去写个 vue 页面,但发现就输入不了了,而且跟着文档写 textarea 没有字数统计。就两个问题嘛

image

1.el-input 无法输入

TSX 的写法嘛,最开始我是这么写的

const auditText = ref(''); // 忽略代码<ElInputmodel-value={auditText.value}autosize={{ minRows: 5, maxRows: 10 }} max-length={50}placeholder="请填写审核不通过原因(最少五个字)"show-word-limittype="textarea" /> 

然后发现真是一点反应没有啊,然后看了下文档上面的这句话

image

const auditText = ref<string>(''); function test(value) { console.log(value); auditText.value = value; } //忽略代码 <ElInput model-value={auditText.value} OnInput={test} autosize={{ minRows: 5, maxRows: 10 }} max-length={50} placeholder="请填写审核不通过原因(最少五个字)" show-word-limit type="textarea" /> 

image

但是那其实也不用这么麻烦人文档里也写得很清楚了v-model就行

<ElInput v-model={auditText.value} autosize={{ minRows: 5, maxRows: 10 }} max-length={50} placeholder="请填写审核不通过原因(最少五个字)" show-word-limit type="textarea" /> 

2.字数统计不见了

先看看官网的写法,定义个 maxlength 再定义个 show-word-limit 就有字数统计了

image

可是如果我在 tsx 里按官网这么写会发生什么那

image

image

image

果然吗,不是 props 的属性就不用写了,原生事件是直接绑定在 attrs 上给 input 标签的,所以写在 tsx 里会报错,写在模版里不会。暂时就忽略这一行检查把~~~。

总结

平时会记录一些简单但好玩的问题,水一篇 vue ,每天一篇 vue 一篇 react 。

关于我的一些介绍

]]>
想问一下 pinia 持久化到 localStorage 如何实现有效期 tag:www.v2ex.com,2025-06-13:/t/1138410 2025-06-13T07:31:14Z 2025-06-13T19:02:12Z puremaker member/puremaker RT ,本人做了款小游戏,把玩家信息存到了 store 里。但是发现如果某个玩家意外退出了,且游戏对局结束了,当这个玩家再打开页面的时候还会被识别为在游戏中,因为他没有经历正常的结束游戏代码,没有去移除掉失效的玩家信息。当然每次重载游戏的时候用玩家信息去核实游戏状态也可以。但是我想知道这个持久化到底能不能设置有效期

]]>
有什么适用于 Vue/Nuxt 的表单/问卷/试卷+设计器库么 tag:www.v2ex.com,2025-06-04:/t/1136320 2025-06-04T07:30:05Z 2025-06-03T15:30:05Z panlatent member/panlatent 有经验的老哥给点推荐。目前看了几个,在设计器/Builder 上都是收费的。虽然无可厚非,但是比较需要一个免费/商业友好的。

需求是二次封装,用在多个项目里,设计器/Builder 是必要的。

如果自己开发工作量又有点大,对于我来说能做集成就绝不自己开发。

]]>
vue_cli 用到 env 环境变量值特殊字符处理 tag:www.v2ex.com,2025-05-28:/t/1134800 2025-05-28T02:11:49Z 2025-05-18T05:54:14Z iv8d member/iv8d VUE_APP_DES_KEY='abcd$1234^33'
代码中使用 process.env.VUE_APP_DES_KEY 引用,少一截,变成了 abcd^33 ,应该是识别成变量了。网上找了很多方案,比如加引号,加转义符\。也问过 AI ,方案基本相同。
1. 加引号仍然会替换变量
2. \转义在 dev 环境下正常了,在 prod 打包后仍然会替换
按理不应该在 env 下放敏感信息,奈何目前用到了,请各位大佬赐教 ]]>
统计基于 vue 的汽水音乐电脑版用了哪些开源组件 tag:www.v2ex.com,2025-05-26:/t/1134485 2025-05-26T14:37:24Z 2025-05-26T19:32:24Z zsxzy member/zsxzy 让 AI 统计的 汽水音乐电脑版用了哪些开源组件

  1. @electron/osx-sign

    • 作用: 用于在 macOS 系统上对 Electron 应用程序进行代码签名的工具。
  2. electron-winstaller

    • 作用: 用于为 Electron 应用程序创建 Windows 安装程序 (Squirrel.Windows installer)。
  3. dayjs

    • 作用: 一个轻量级的 Javascript 日期时间库,用于解析、校验、操作和显示日期和时间。
  4. immer

    • 作用: 一个 Javascript 库,通过在“草稿状态”( draft state )上进行修改来创建下一个不可变的状态,简化了不可变数据的处理。
  5. minimist

    • 作用: 一个用于 Node.js 的命令行参数解析器。
  6. nanoid

    • 作用: 一个小巧、安全、URL 友好的唯一字符串 ID 生成器。
  7. web-vitals

    • 作用: Google 推出的一个库,用于测量和上报网页核心性能指标 (Core Web Vitals),如 LCP, FID, CLS 。
  8. axios

    • 作用: 一个基于 Promise 的 HTTP 客户端,可用于浏览器和 Node.js 环境中发送网络请求。
  9. chalk

    • 作用: 一个用于在终端(命令行)中为文本添加颜色和样式的库。
  10. electron-squirrel-startup

    • 作用: 用于处理 Electron 应用程序通过 Squirrel.Windows 安装和启动时的相关事件。
  11. multistream

    • 作用: 将多个可读流( readable streams )合并成一个单一的流。
  12. inquirer

    • 作用: 一个常用的交互式命令行用户界面集合,用于创建复杂的命令行交互提示。
  13. sanitize-html

    • 作用: 用于清理 HTML 代码,移除不需要的标签和属性,防止 XSS 攻击等。
  14. qrcode

    • 作用: 用于生成二维码图像的库。
  15. vue

    • 作用: 一款流行的渐进式 Javascript 框架,用于构建用户界面。
  16. @byted-sdk/account-api

    • 作用: 根据名称推测,这可能是字节跳动内部用于账户相关 API 的 SDK 。
  17. vue-router

    • 作用: Vue.js 官方的路由管理器,用于构建单页面应用 (SPA)。
  18. @vueuse/core

    • 作用: 一个包含 Vue 组合式 API (Composition API) 实用工具的集合库。
  19. file-uri-to-path

    • 作用: 将 file: 协议的 URI 转换为本地文件系统路径。
  20. follow-redirects

    • 作用: 一个支持自动跟随 HTTP/HTTPS 重定向的 HTTP/HTTPS 客户端。
  21. proxy-from-env

    • 作用: 从环境变量 (如 HTTP_PROXY, HTTPS_PROXY, NO_PROXY) 中获取代理设置。
  22. form-data

    • 作用: 一个用于创建 multipart/form-data 类型数据流的库,常用于文件上传。
  23. asynckit

    • 作用: 一个用于异步操作的极简抽象层,为流、Promise 和回调提供一致的 API 。
  24. combined-stream

    • 作用: 一个可以按顺序从一系列可读流中发出数据的流。
  25. mime-types

    • 作用: 一个工具库,用于根据文件扩展名查找 MIME 类型,反之亦然。
  26. delayed-stream

    • 作用: 一个可以延迟流事件(特别是 data 事件)直到调用 resume() 方法的流。
  27. mime-db

    • 作用: 一个全面的 MIME 类型数据库。
  28. supports-color

    • 作用: 检测终端(命令行环境)是否支持颜色以及支持的级别。
  29. ansi-styles

    • 作用: 提供 ANSI 转义码,用于在终端中设置文本样式(如颜色、背景色、加粗等)。
  30. has-flag

    • 作用: 检查命令行参数中是否存在某个标志( flag )。
  31. color-convert

    • 作用: 提供颜色值转换功能,例如在 RGB, HSL, HEX 等不同颜色模型之间转换。
  32. color-name

    • 作用: 一个包含颜色名称及其对应十六进制值的列表。
  33. debug

    • 作用: 一个小型的 Javascript 调试工具,可以通过环境变量控制调试信息的输出。
  34. once

    • 作用: 确保一个函数只被调用一次。
  35. readable-stream

    • 作用: Node.js 核心 stream 模块中可读流接口的实现,可用于旧版 Node.js 或浏览器环境。
  36. wrappy

    • 作用: 一个用于包装函数的工具。
  37. inherits

    • 作用: Node.js util.inherits 方法的独立版本,用于实现对象间的原型继承。
  38. util-deprecate

    • 作用: Node.js util.deprecate 方法的独立版本,用于标记函数或方法为已废弃。
  39. string_decoder

    • 作用: Node.js string_decoder 模块的独立版本,用于将 Buffer 对象解码为字符串。
  40. safe-buffer

    • 作用: 提供一个更安全的 Buffer 构造函数,以避免一些潜在的安全问题。
  41. cli-width

    • 作用: 获取终端(命令行界面)的可是宽度。
  42. lodash

    • 作用: 一个现代 Javascript 工具库,提供了许多实用的函数,简化常见的编程任务。
  43. mute-stream

    • 作用: 一个可以被“静音”的直通流( passthrough stream ),静音时数据会丢失。
  44. run-async

    • 作用: 允许异步函数串行或并行执行。
  45. ansi-escapes

    • 作用: 提供用于操作终端的 ANSI 转义码,如移动光标、清屏等。
  46. figures

    • 作用: 提供各种 Unicode 符号,并为 Windows CMD 环境提供了回退方案。
  47. strip-ansi

    • 作用: 从字符串中移除 ANSI 转义码。
  48. external-editor

    • 作用: 允许用户使用其偏好的文本编辑器来编辑字符串。
  49. string-width

    • 作用: 获取字符串在终端中实际显示的宽度(所占列数)。
  50. cli-cursor

    • 作用: 用于控制命令行界面中光标的显示和隐藏。
  51. wrap-ansi

    • 作用: 对包含 ANSI 转义码的字符串进行自动换行。
  52. ora

    • 作用: 在终端中显示优雅的加载动画( spinners )。
  53. escape-string-regexp

    • 作用: 转义字符串中的正则表达式特殊字符。
  54. is-unicode-supported

    • 作用: 检测终端是否支持 Unicode 字符。
  55. ansi-regex

    • 作用: 用于匹配 ANSI 转义码的正则表达式。
  56. chardet

    • 作用: Javascript 的字符编码检测器。
  57. iconv-lite

    • 作用: 纯 Javascript 实现的字符编码转换库。
  58. tmp

    • 作用: Node.js 的临时文件和目录创建工具。
  59. safer-buffer

    • 作用: 与 safe-buffer 类似,提供更安全的 Buffer API ,可能是其替代或增强版本。
  60. os-tmpdir

    • 作用: Node.js os.tmpdir() 方法的 ponyfill (腻子脚本),提供获取操作系统临时目录路径的功能。
  61. restore-cursor

    • 作用: 在程序退出时优雅地恢复命令行光标的显示状态。
  62. onetime

    • 作用: 确保一个函数只执行一次(与 once 功能类似,但可能来自不同作者或有细微差别)。
  63. mimic-fn

    • 作用: 使一个函数模仿另一个函数的某些属性(如名称、长度)。
  64. cli-spinners

    • 作用: 提供多种命令行加载动画( spinners )样式。
  65. is-interactive

    • 作用: 检查当前进程是否在交互式终端中运行。
  66. log-symbols

    • 作用: 为日志信息提供各种状态符号(如 ✔, ℹ, ⚠, ✖)。
  67. wcwidth

    • 作用: Javascript 实现的 wcwidth() 函数,用于计算宽字符(如中日韩字符)在终端中占据的列数。
  68. defaults

    • 作用: 将默认选项对象合并到用户提供的选项对象中。
  69. clone

    • 作用: 对 Javascript 对象进行深拷贝。
  70. buffer

    • 作用: 为浏览器环境提供 Node.js Buffer API 的实现。
  71. base64-js

    • 作用: 提供 Base64 编码和解码功能。
  72. ieee754

    • 作用: 用于处理 IEEE754 浮点数的读取和写入。
  73. is-plain-object

    • 作用: 判断一个值是否为纯粹的 Javascript 对象(即通过 {}new Object() 创建的对象)。
  74. parse-srcset

    • 作用: 解析 HTML <img> 标签的 srcset 属性。
  75. postcss

    • 作用: 一个用 Javascript 转换 CSS 的工具,通过插件体系可以实现各种 CSS 处理功能。
  76. htmlparser2

    • 作用: 一个宽容的、快速的 HTML 和 XML 解析器。
  77. picocolors

    • 作用: 一个非常小且快速的 Node.js 库,用于通过 ANSI 颜色代码格式化终端文本。
  78. source-map-js

    • 作用: 一个用于生成和使用 source map 格式的库,帮助调试压缩或转换后的代码。
  79. domelementtype

    • 作用: 为 htmlparser2 定义 DOM 元素的类型。
  80. entities

    • 作用: 用于 HTML/XML 实体的编码和解码。
  81. domhandler

    • 作用: htmlparser2 的一个处理器,用于将解析的 HTML/XML 构建成 DOM 树结构。
  82. domutils

    • 作用: 提供操作由 domhandler 创建的 DOM 结构的工具函数。
  83. dom-serializer

    • 作用: 将 domhandler 创建的 DOM 树渲染回 HTML/XML 字符串。
  84. pngjs

    • 作用: 一个简单的 PNG 图片编解码库,用于 Node.js 。
  85. yargs

    • 作用: 一个强大的库,用于构建交互式的命令行工具,能解析参数、生成帮助信息等。
  86. decamelize

    • 作用: 将驼峰命名( camelCase )的字符串转换为使用指定分隔符的小写字符串(例如 fooBar -> foo_bar)。
  87. require-directory

    • 作用: 递归地遍历指定目录,require() 每个文件,并返回一个嵌套的哈希结构。
  88. which-module

    • 作用: 根据给定的文件路径找到其所属的模块对象。
  89. y18n

    • 作用: yargs 使用的轻量级国际化 (i18n) 库。
  90. find-up

    • 作用: 通过向上遍历父目录来查找文件或目录。
  91. camelcase

    • 作用: 将使用短横线、点、下划线或空格分隔的字符串转换为驼峰命名( camelCase )。
  92. is-fullwidth-code-point

    • 作用: 检查一个数字是否为全角字符的 Unicode 码点。
  93. path-exists

    • 作用: 检查指定的路径是否存在。
  94. locate-path

    • 作用: 从多个路径中找出第一个实际存在的路径。
  95. p-locate

    • 作用: 异步地查找并返回第一个满足测试函数的 Promise 。
  96. p-limit

    • 作用: 以有限的并发数运行多个返回 Promise 的异步函数。
  97. p-try

    • 作用: Promise.try() 的 ponyfill ,用于启动一个 Promise 链。
  98. core-js-pure

    • 作用: Javascript 的模块化标准库,包含 ECMAScript 最新草案的 polyfills (纯净版,不污染全局作用域)。
  99. js-cookie

    • 作用: 一个简单、轻量级的 Javascript API ,用于处理浏览器 cookie 。
  100. fast-glob * 作用: 一个快速的 glob 模式匹配库(用于文件路径匹配)。

  101. @nodelib/fs.stat * 作用: 提供具有扩展 API 的 fs.statfs.lstat 方法。

  102. merge2 * 作用: 将多个流( streams )按顺序或并行合并为一个流。

  103. glob-parent * 作用: 从 glob 字符串中提取出非通配符部分的父路径。

  104. @nodelib/fs.walk * 作用: 提供遍历目录的方法。

  105. micromatch * 作用: 高度优化的通配符和 glob 模式匹配库。

  106. is-glob * 作用: 判断一个字符串是否看起来像一个 glob 模式或扩展 glob 模式。

  107. is-extglob * 作用: 判断一个字符串是否为扩展 glob (extglob) 模式。

  108. fastq * 作用: 一个快速、简单、基于 Promise 的异步队列。

  109. @nodelib/fs.scandir * 作用: 提供 fs.scandir 方法,用于扫描目录内容。

  110. reusify * 作用: 高效地重用对象,减少垃圾回收。

  111. run-parallel * 作用: 并行运行一组函数。

  112. queue-microtask * 作用: 一个用于将函数排队到微任务( microtask )中执行的微型库。

  113. picomatch * 作用: 一个非常快速且准确的 Javascript glob 模式匹配器。

  114. braces * 作用: Javascript 实现的类似 Bash 的花括号扩展功能(例如 a{b,c}d -> abd, acd)。

  115. fill-range * 作用: 填充一个数字或字母范围,可以指定步长,或创建一个与正则表达式兼容的范围。

  116. to-regex-range * 作用: 从两个数字或字母创建一个与正则表达式兼容的范围。

  117. is-number * 作用: 判断一个值是否为数字类型。

  118. node-machine-id * 作用: 获取一个唯一的机器 ID 。

  119. @vue/shared * 作用: Vue.js 内部包共享的工具函数。

  120. @vue/runtime-dom * 作用: Vue.js 针对 DOM 环境的运行时。

  121. @vue/compiler-dom * 作用: Vue.js 针对 DOM 环境的编译器。

  122. @vue/compiler-sfc * 作用: Vue.js 单文件组件 (SFC, .vue 文件) 的编译器。

  123. @vue/server-renderer * 作用: Vue.js 用于服务器端渲染 (SSR) 的包。

  124. csstype * 作用: 为 TypeScript 提供严格类型的 CSS 属性和值定义。

  125. @vue/runtime-core * 作用: Vue.js 的运行时核心,平台无关。

  126. @vue/reactivity * 作用: Vue.js 的响应式系统核心。

  127. @vue/compiler-core * 作用: Vue.js 的编译器核心,平台无关。

  128. estree-walker * 作用: 用于遍历符合 ESTree 规范的抽象语法树 (AST)。

  129. @babel/parser * 作用: Babel 使用的 Javascript 解析器,可以将 Javascript 代码转换为 AST 。

  130. @babel/types * 作用: Babel 用于处理 AST 节点的工具函数和类型定义。

  131. @babel/helper-string-parser * 作用: Babel 内部用于解析字符串的辅助函数。

  132. @babel/helper-validator-identifier * 作用: Babel 内部用于验证标识符(变量名等)的辅助函数。

  133. to-fast-properties * 作用: 强制 V8 引擎对一个对象使用“快速属性”模式,以优化性能。

  134. magic-string * 作用: 一个用于操作字符串并能生成对应 source map 的库。

  135. @vue/reactivity-transform * 作用: Vue.js 实验性的响应式语法糖转换。

  136. @vue/compiler-ssr * 作用: Vue.js 针对服务器端渲染 (SSR) 的编译器。

  137. @jridgewell/sourcemap-codec * 作用: 用于编码和解码 sourcemap VLQ (Variable Length Quantity) 段。

  138. crypto-js * 作用: 一个 Javascript 的加密标准库,支持多种加密算法和哈希函数。

  139. isuri * 作用: 检查一个字符串是否为有效的 URI 。

  140. rfc-3986 * 作用: 验证 URI 是否符合 RFC 3986 标准。

  141. @vueuse/metadata * 作用: VueUse 内部使用的元数据。

  142. vue-demi * 作用: 一个开发工具,允许编写通用的 Vue 库,使其同时兼容 Vue 2 和 Vue 3 。

  143. @vueuse/shared * 作用: VueUse 库共享的工具函数。

  144. plist * 作用: Apple 的属性列表 (Property List, .plist) 文件解析器和构建器。

  145. fs-extra * 作用: 扩展了 Node.js 内置 fs 模块的功能,添加了更多文件系统操作方法,并为 fs 方法增加了 Promise 支持。

  146. xmlbuilder * 作用: 一个用于 Node.js 的 XML 构建器。

  147. graceful-fs * 作用: fs 模块的替代品,进行了一些改进,例如更好地处理文件系统错误和资源限制。

  148. universalify * 作用: 将回调风格的函数转换为 Promise 风格的函数,反之亦然。

  149. jsonfile * 作用: 方便地读取和写入 JSON 文件。

  150. lodash.template * 作用: Lodash 库中的 _.template 方法,用于创建编译模板函数。

  151. temp * 作用: Node.js 的临时文件和目录创建工具 (与 tmp 类似,可能由不同依赖使用)。

  152. lodash.templatesettings * 作用: Lodash 库中的 _.templateSettings 方法,用于配置 _.template 的行为。

  153. commander * 作用: Node.js 命令行界面解决方案,使创建命令行工具更简单。

  154. minimatch * 作用: 一个轻量级的 glob 模式匹配工具。

  155. glob * 作用: 为 Node.js 提供 glob 功能(文件名模式匹配)。

  156. brace-expansion * 作用: 实现类似 Bash 的花括号扩展功能(已在 braces 中列出,功能相同)。

  157. concat-map * 作用: 一个 map 函数,其回调可以返回一个数组或单个值,结果会被展平。

  158. fs.realpath * 作用: Node.js fs.realpath 方法的实现或 ponyfill ,用于解析符号链接并返回规范化的绝对路径。

  159. path-is-absolute * 作用: Node.js path.isAbsolute() 方法的 ponyfill ,判断路径是否为绝对路径。

  160. inflight * 作用: 防止对同一资源发起重复的异步请求,而是将回调添加到正在进行的请求上。

  161. mkdirp * 作用: 递归地创建目录,类似 Unix 命令 mkdir -p

  162. rimraf * 作用: Node.js 实现的 rm -rf 命令,用于递归地删除文件和目录。

]]>
ant-design-vue 好像不怎么维护了, vue 有什么比较靠谱的 ui 组件库吗 tag:www.v2ex.com,2025-05-24:/t/1134102 2025-05-24T16:43:13Z 2025-06-08T05:26:24Z SonicKang member/SonicKang 关于二次封装 element-plus 组件库主题问题 tag:www.v2ex.com,2025-05-22:/t/1133539 2025-05-22T06:35:36Z 2025-05-22T07:44:16Z staceycomcn111 member/staceycomcn111 🎉 VueConf 2025 来啦, 7 月 12 日,深圳见! tag:www.v2ex.com,2025-05-10:/t/1130826 2025-05-10T02:52:47Z 2025-05-10T06:39:20Z itchina110 member/itchina110 每一年的 VueConf ,都是 Vue 开发者们的狂欢!

今年,我们将再次相聚在深圳(老地方),共同迎来 VueConf 2025 !

👨‍💻👩‍💻 本次大会将有 11 位演讲嘉宾 登场——既有大家熟悉的老朋友,也有首次亮相的新面孔。无论你是 Vue 的资深爱好者,还是刚入门的新手,这里都能找到属于你的技术干货与灵感火花!

🔥 为什么不能错过 VueConf 2025 ?

立即抢票 👉 https://vueconf.cn/

让我们一起在深圳,感受 Vue 的魅力!

VueConf 2025 ,不见不散!

]]>
vue 怎么 5 个月不更新了 tag:www.v2ex.com,2025-04-29:/t/1128910 2025-04-29T07:57:08Z 2025-04-29T12:25:29Z Pursue9 member/Pursue9
如图:

]]>
前端 props 单向数据流 vs 状态管理流 你更能接受哪种代码 tag:www.v2ex.com,2025-04-21:/t/1126963 2025-04-21T04:07:37Z 2025-04-23T15:39:54Z zhengfan2016 member/zhengfan2016 如题,写了两个简单的 vue demo ,实际业务代码比这个复杂很多

单向数据流版简单 demo
layouts.vue AComponent.vue BComponent.vue

状态管理流版简单 demo
layouts.vue AComponent.vue BComponent.vue

]]>
WSL2 + System Proxy 后, vite 启动的项目,随机一部分网络请求变得巨慢,求指导。 tag:www.v2ex.com,2025-04-17:/t/1126043 2025-04-17T01:12:13Z 2025-04-17T05:14:09Z Mogugugugu member/Mogugugugu 环境:Windows 11 专业工作站版 版本号 24H2 / 23H2

WSL 版本:2.4.12.0
内核版本:5.15.167.4-1
网络模式:Mirrored

WSL2 安装的是 Ubuntu 22.04.5 LTS

目前遇到的问题是 开启系统代理(无论是 Fiddler Everywhere 或者 Clash Verge )后,会出现一些请求特别特别慢的情况。

我是使用 Cursor +WSL2 开发的模式,启动一个 vue3 的项目,发现每次只要打开系统代理,刷新页面总会有几个请求需要加载几十秒甚至 1 分钟以上才能请求完成,而且 vue 的 hot reload 也完全没办法用,卡住的请求并不是固定的,但每次都会随机卡住几个。

目前怀疑的点,强制刷新页面后,在开发模式下,可能需要加载几十上百个文件,是不是大量文件加载导致的这个问题?

我应该如何排查和解决问题?求大佬指点。

]]>
vue vite 打包 白屏问题 tag:www.v2ex.com,2025-04-17:/t/1126031 2025-04-17T00:36:27Z 2025-04-17T09:56:51Z ZGame member/ZGame 会在一些老版本的 android tv 上白屏,各位有知道解决办法吗

]]>
外行搞前端构建环境真的很头疼,有谁能帮忙搞定这个 Nuxt3 开源项目的构建?有偿。 tag:www.v2ex.com,2025-04-09:/t/1124212 2025-04-09T05:44:04Z 2025-04-09T09:24:58Z villivateur member/villivateur 项目地址 https://github.com/am32-firmware/am32-configurator

我在 Ubuntu 20.04 和 Ubuntu 24.04 上,用 nodejs 18-23 都无法成功 build ,均报 typescript 语法错误。可见 https://github.com/am32-firmware/am32-configurator/issues/29

我并不想改他的源码,我觉得这肯定是环境问题。

有谁能帮忙解决环境问题,告诉我你的各种工具版本号,以及支付宝 / Paypal 账号,我发 88 元红包(不多,希望专业的 V 友能帮个忙)

]]>
vue 指令更新问题 tag:www.v2ex.com,2025-04-01:/t/1122466 2025-04-01T02:08:16Z 2025-04-01T10:23:28Z leaveeel member/leaveeel
![code]( https://imgur.com/a/1GmgAgO)

![direactive]( https://imgur.com/a/mLmEw9I)



另外,不确定自己封装通用组件的必要性,现在的是 C 端项目有 ui 要求没用模板,但也有像 form 、table 、dialog 等模块,因为工作量不大我现在都单独抽出了组件库写了文档。越优化越觉得和 element 的组件功能是差不多的只是 ui 不同,引用 element 然后自定义样式,不满足的功能也可以二次封装自己添加,按需加载打包可能更方便? ]]>
为什么 vue 的 nuxt.js 不跟进 nextjs 的 app route 目录结构 tag:www.v2ex.com,2025-03-27:/t/1121573 2025-03-27T09:20:14Z 2025-03-27T18:16:08Z zhengfan2016 member/zhengfan2016 如题,我感觉 nuxt.js 加入 app route 可以很大程度的改善 vue sfc 的问题

旧的 page route 结构,经常 page 和 component 两个目录来回跳

- page - about.tsx - component # 纯组件 - componentA.tsx - componentB.tsx - container # 和业务耦合的组件 - componentC.tsx 

app route 文件结构类似这样,只在 about 页面使用的组件完全可以放在 about 下,如果出现多页面复用组件再升级到 component 或者 container 目录

- page - about - page.tsx - componentA.tsx - componentB.tsx - componentC.tsx 
]]>
使用 Ant design X vue 组件库怎么解决无法正确展示 MarkDown 格式字符串的问题? tag:www.v2ex.com,2025-03-17:/t/1119152 2025-03-17T13:09:07Z 2025-03-17T13:59:32Z tiRolin member/tiRolin 是这样的,我毕设搞了一个 AI 对话,但是呢,这个 AI 对话返回的字符串是 markdown 格式,但是我前端无法正确解析,最后字符串格式就会变成下面这样

这里显然没有正确解析出样式来,我试了很多方法都没能解决这个问题,各个 ai 问了个遍了,然后去网上找了好多方法,还是没搞定,下面是我这个页面的源码,有没有大佬帮我看看到底该怎么解决这个问题啊?小弟我感激不尽啊

<template> <div class="layout"> <div class="menu"> <RouterLink to="/" class="re-home">返回首页</RouterLink> <!-- Logo --> <div class="logo"> <img :src="logo" draggable="false" alt="logo" class="logo-img" /> <span class="logo-span">柑橘智能问答</span> </div> </div> <div class="chat"> <!-- 消息列表 --> <Bubble.List :items="messages" class="messages" style="flex: 1" :messageRender="renderMarkdown" :roles="{ ai: { placement: 'start', typing: { step: 5, interval: 20 }, styles: { content: { borderRadius: '16px' } } }, local: { placement: 'end', variant: 'shadow' } }" /> <!-- 输入框 --> <Sender :value="content" class="sender" @submit="onSubmit" @update:value="(val) => (cOntent= val)" /> </div> </div> </template> <script setup> import { ref, h } from 'vue' import { Conversations, Prompts, Sender, Bubble } from 'ant-design-x-vue' import { Edit, Delete } from '@element-plus/icons-vue' import reqAIChat from '@/api/chat/index' import { message } from 'ant-design-vue' import { ElMessage } from 'element-plus' import logo from '@/assets/images/logo.png' import { marked } from 'marked' import hljs from 'highlight.js' import 'highlight.js/styles/github.css' marked.setOptions({ highlight: (code) => hljs.highlightAuto(code).value, breaks: true, gfm: true }) marked.use({ renderer: { link(href, title, text) { return `<a href="${href}" target="_blank" rel="noopener">${text}</a>` } } }) const renderMarkdown = (content, item) => { if (item?.isMarkdown) { return h('Typography', { class: 'markdown-container' }, [ h('div', { innerHTML: marked.parse(content), // Vue 3 直接注入 HTML class: 'markdown-body' }) ]) } return content // 普通文本直接返回 } const cOntent= ref('') const messages = ref([ { key: '1', content: '## Markdown 测试\n[链接]( https://x.ant.design)1. **橙( Orange )**:包括甜橙和酸橙,甜橙中又分为脐橙、瓦伦西亚橙等。2. **柑橘( Mandarin )**:也称为蜜橘,包括各种小型、易剥皮的柑橘。3. **柚子( Pomelo )**:也称为文旦,是柑橘类中最大的一种。4. **柠檬( Lemon )**:以其酸味和香气闻名。5. **青柠( Lime )**:比柠檬小,酸味较轻。6. **葡萄柚( Grapefruit )**:大小和形状类似葡萄,味道可以是甜的也可以是酸的。', role: 'ai', variant: 'primary', isMarkdown: true } ]) const activeKey = ref('0') const cOnversationsItems= ref( Array.from({ length: 2 }).map((_, index) => ({ key: `item${index + 1}`, label: `未命名对话 ${index + 1}` })) ) const OnSubmit= async (nextContent) => { if (!nextContent) return messages.value.push({ key: `${messages.value.length + 1}`, content: nextContent, role: 'local', variant: 'shadow' }) content.value = '' try { const res = await reqAIChat({ message: nextContent }) if (!res) { ElMessage({ message: '请求失败', type: 'error' }) return } messages.value.push({ key: `${messages.value.length + 1}`, content: res, role: 'ai', variant: 'primary', isMarkdown: true }) } catch (error) { ElMessage({ message: '请求出错', type: 'error' }) } } const OnAddConversation= () => { conversationsItems.value.push({ key: `${conversationsItems.value.length + 1}`, label: `未命名对话${conversationsItems.value.length + 1}` }) activeKey.value = `${conversationsItems.value.length + 1}` } const menuCOnfig= (conversation) => { return { items: [ { label: '编辑', key: 'edit', icon: () => h(Edit) }, { label: '删除', key: 'delete', icon: () => h(Delete), danger: true } ], onClick: (menuInfo) => { message.info(`点击 ${conversation.key} - ${menuInfo.key}`) } } } </script> <style scoped> .markdown-body { padding: 12px 16px; line-height: 1.7; /* 必须继承字体 */ font-family: inherit; /* 代码块样式 */ pre { padding: 12px; border-radius: 8px; background: #f6f8fa !important; } code { font-family: 'SFMono-Regular', Consolas, monospace; } } .markdown-body { line-height: 1.6; color: #333; } .re-home { display: inline-block; padding: 10px 20px; margin: 12px; background: #ffa500; color: white; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: bold; text-align: center; transition: background-color 0.3s ease; } .layout { width: 100%; min-width: 1000px; height: 722px; display: flex; background: #fff; font-family: AlibabaPuHuiTi, sans-serif; } .menu { padding: 24px 0; /* background: #fff; */ width: 280px; height: 100%; display: flex; flex-direction: column; background: rgba(245, 245, 245, 0.5); } .logo { display: flex; height: 72px; align-items: center; justify-content: start; padding: 0 24px; } .logo-img { width: 24px; height: 24px; } .logo-span { margin: 0 8px; font-weight: bold; color: #333; font-size: 16px; } .add-btn { background: #1677ff0f; border: 1px solid #1677ff34; width: calc(100% - 24px); cursor: pointer; margin: 0 12px 24px 12px; font-size: 14px; height: 32px; padding: 4px 15px; border-radius: 6px; } .add-btn:hover { color: #69b1ff; } .chat { height: 100%; width: 100%; max-width: 700px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; padding: 24px; gap: 16px; } </style> 

这里 content 里已经有一些写死的内容了,那是我用来测试的,就是想着如果可以解析了那么这些写死的内容是会被正确解析上去的,但是我看了好久都没搞懂该怎么解决这个问题,所以这个写死的内容也一直留着了

]]>
shadcn, shadcnvue 全是基于 tailwindcss 的,没有基于 unocss 的嘛? tag:www.v2ex.com,2025-03-11:/t/1117419 2025-03-11T00:45:14Z 2025-03-11T12:40:26Z EricYuan1 member/EricYuan1 vue3 的 template typescript 支持稀烂,退坑 tag:www.v2ex.com,2025-03-06:/t/1116274 2025-03-06T02:46:15Z 2025-04-14T09:13:18Z jenson47 member/jenson47 截止目前 vue3 已经发布 4 年多了,用了几个月 vue3 ,template 的 typescript 支持真的稀烂。

不吹不黑,如果说 tsx 的 typescript 支持跟 vue3 的 template 支持差距不大,也就不说了,tsc 检查 template 无法提示组件不存在的属性,官方 vscode 插件 vue official 2.2.8 版本 用起来更是让人蛋疼,组件自动识别飘忽不定,高亮也是飘忽不定,就连 script 部分提示也会出错。

也许你会说重启试试,无法自动导入,手动导入呀,template 支持不行,你也可以用 tsx 写呀

也有人说,我写代码就是一把梭,复制粘贴,什么 typescript ,直接 anyscript 和 unkonwscript 走起

我只能说对对对

]]>
组件持久化的问题请教 tag:www.v2ex.com,2025-03-06:/t/1116262 2025-03-06T02:14:02Z 2025-03-06T10:58:43Z sunorg member/sunorg
需求:
const data=ref({
id:xxx,ref:关联某个组件,children:[
id:xxx,ref:关联某个组件,children:[]
id:xxx,ref:关联某个组件,children:[]
]
})

------------
尝试 1: 动态渲染:
<KeepAlive>
<component :is="某 item.ref" />
</KeepAlive>

尝试 2:全局注册一个组件池,存储先实例化的组件,然后通过索引方式来挂载
<KeepAlive>
<DirectiveWrapper
:component-id="某 item.componentId"
:compOnent="getComponentById(某 item.componentId)"
/>
</KeepAlive>



问题:
当 ref 可以在 data 里的子父节点交换时,组件会被重新渲染初始化,丢失了状态。 使用过,因为没有共享数据的需求,也尝试过直接存组件状态的,但该丢失还是丢失。


需要大家给点思路方向,需要解决指定组件不被重新渲染。 ]]>
Vue3 tsx 应该用 props 还是 emit 传递事件? tag:www.v2ex.com,2025-03-03:/t/1115381 2025-03-03T01:55:19Z 2025-03-03T12:52:33Z chenliangngng member/chenliangngng 本人之前由于长期写 react ,更倾向于 props 模式也就是直接把 onChange 作为参数,但平时还是老老实实遇到事件函数就用 emit 传递

最近 ai 告诉我 props 不是最佳实践,emit 是最佳实践,可我用 cursor 给我生成的代码清一色都是 props 模式,给我整不会了

其实我感觉用 Vue3 tsx 的话,什么 v-model 和 emit 这些都没必要了,和 react 一样 props 到底就好了

]]>
话说我怎么就懵逼了呢? Vue3 的泛型组件 generic="T"? tag:www.v2ex.com,2025-02-06:/t/1109294 2025-02-06T03:58:18Z 2025-02-06T07:46:34Z tlerbao member/tlerbao

哪位大佬给我讲讲,这里面的原理

 <Hello :title="" :item="" /> 

这个 T 是根据第一个 Prop 参数推倒的?

根据顺序来的?还是怎样?当有多个 Prop 时,

是根据调用组件写的 Prop 顺序,还是定义 Prop 顺序,还是怎样?

完全懵逼中?

]]>
请教 Vue3 + typescript 最佳实践问题 tag:www.v2ex.com,2025-02-01:/t/1108526 2025-02-01T09:10:42Z 2025-02-15T08:16:37Z jenson47 member/jenson47 如题,我发现 vscode 下使用 vue 官方插件,使用 vue3+typescript 去开发,我发现在 template 上 typescript 是没效果。 比如

  1. 第三方扩展自动引入
  2. 属性自动识别 [看情况]
  3. 不存在属性或方法无法提示错误,总之 typescript 不生效
  4. 官方插件偶尔飘
]]>
vue3 纯前端如何生成 icns 格式图片? tag:www.v2ex.com,2025-01-07:/t/1103248 2025-01-07T08:53:53Z 2025-01-07T10:10:13Z jadelike member/jadelike 如题,我现在在做一个项目,我是 Windows ,技术栈是 VITE+VUE3+TS ,上传也没用后端,直接生成 blob 格式链接,(只让上传 svg 格式图片)如:blob:http://localhost:5173/0c4ef255-bec5-4377-9596-45a5a4d5501e

我现在已经实现了转换 png 和 ico 格式图片,但转换 icns 一直没找到如何实现,找到一个 png2icons ,但一直有莫名其妙的报错,我试了好久也不行,特来求助了

简单附一下我转换的代码

console.log("Processing images...:", props.uploadedImage); // blob:http://localhost:5173/0c4ef255-bec5-4377-9596-45a5a4d5501e const image = await loadImage(props.uploadedImage); const smallImage: any = await resizeImage(image, 32, 32, "png"); // 调整为输出 png 格式 
]]>
你们写 vue 一定是按照 vue 的脚手架的目录结构来写吗? tag:www.v2ex.com,2025-01-03:/t/1102382 2025-01-03T11:44:25Z 2025-01-03T15:01:14Z MRlaopeng member/MRlaopeng 没写过前端的后端人, 今天初尝 vue 没想到这么方便 直接 npm create vue@latest 就可以创建好目录结构 那岂不是就得按官方的来了?

]]>
大佬们, vue3 新人求教,就没有办法对 ref 包装的 obj 进行解构吗 tag:www.v2ex.com,2025-01-01:/t/1101860 2025-01-01T15:45:30Z 2025-01-04T23:06:45Z zhengfan2016 member/zhengfan2016 如题,demo 代码如下,模拟读取后端 api 返回: 使用 data.value 可以获取到数据,但是使用 list?.value 获取不到数据,问了 gpt 也问不出如何使用 const {data:list} 开头的代码进行解构,难道 ref 就没法解构吗

]]>
vue3 中 v-show 分页问题 tag:www.v2ex.com,2024-12-30:/t/1101229 2024-12-30T04:01:52Z 2024-12-30T05:41:59Z zhuoyue100 member/zhuoyue100

const pagination = reactive({ page: 1, total: 9, page_size: 3 }) const showChart = computed(() => (i: number) => { let offset = (pagination.page-1)*pagination.page_size console.log(i, i > offset && i <= offset+pagination.page_size) return i > offset && i <= offset+pagination.page_size })

首次展示正确,点击分页按钮后不切换,这个怎么实现?

]]>
el-table 使用 expand 展开倒数第二行时,最下面一行会错乱,我把第一列的数据进行了合并,求问大家怎么解决呀? tag:www.v2ex.com,2024-12-27:/t/1100740 2024-12-27T08:03:53Z 2024-12-27T08:49:38Z Dewchame member/Dewchame 哭了,前端真的太难受了。 tag:www.v2ex.com,2024-12-12:/t/1097132 2024-12-12T14:05:42Z 2024-12-28T06:14:30Z iamtuzi3333 member/iamtuzi3333 Experience the sprunkikissmod tag:www.v2ex.com,2024-12-11:/t/1096770 2024-12-11T08:59:29Z 2024-12-11T08:56:29Z Chenliang2 member/Chenliang2 做烂了也要做啊,算是跟风吧,sprunkikissmod.com ,不过确实好玩

]]>
uniapp 看别人的代码组件全部都不用 v-if 控制,都是默认显示的,经常出现难以排查的错误 tag:www.v2ex.com,2024-11-15:/t/1089897 2024-11-15T09:04:44Z 2024-11-15T12:29:15Z 6c9fd member/6c9fd 排查了两小时,最后改成 v-if 就正常了,好多项目都这样,加个 v-if 又不会怎么样,又没有老哥解释下为什么很多人喜欢这么写

]]>
element-plus el-select-v2 组件 filter-method 方法给 option 赋值报错 tag:www.v2ex.com,2024-11-04:/t/1086504 2024-11-04T07:56:12Z 2024-11-04T08:53:12Z coollest member/coollest html 部分是这样的

<div v-if="item.type=='multi-select'"> <el-select-v2 ref="selectMultiRef" class="bar" v-model="selectedValues[item.value]" filterable placeholder="Select" clearable highlight-current-row :optiOns="filteredOptions(item).value" @change="updateOptions" :filter-method="filterMethod" multiple > </el-select-v2> </div> 

filterMethod 具体是

const filterMethod = (query:any) => { let optiOns= selectMultiRef.value[0].allOptions const escapeStringRegexp = (string = '') => string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d') const regexp = new RegExp(escapeStringRegexp(query), 'i') let filteredOptiOns= options.filter((opt: any) => { return query ? regexp.test(opt.label || '') : true }).sort((a: any, b: any) => { const aStartsWith = a.label.toLowerCase().startsWith(query.toLowerCase()); const bStartsWith = b.label.toLowerCase().startsWith(query.toLowerCase()); return (aStartsWith === bStartsWith) ? 0 : (aStartsWith ? -1 : 1); }) selectMultiRef.value[0].optiOns= filteredOptions //这行报错 }; 

报错信息:TypeError: 'set' on proxy: trap returned falsish for property 'options'

要实现需求:通过 filterMethod 将筛选后的选项与 query 字符串前缀排序

搜了一下,stackoverflow 上类似报错的答案是把:optiOns="filteredOptions(item).value"的 options 换成一个变量,之后 filterMethod 给这个变量赋值,最后达到效果。

现在的问题是整个代码是一个组件,父组件传进来一个数组,之后再把每个 item 赋值给各个 select 组件。 这样就不好把每个 select 组件的 options 都设置一个变量。

请教各位大佬,有没有什么方法能直接通过 filterMethod 修改 select 的 options

]]>
想请教一下大佬们,使用 VUE 进行门户(首页)自定义的方案? tag:www.v2ex.com,2024-10-30:/t/1084977 2024-10-30T08:07:32Z 2024-10-30T14:30:02Z lizhesystem member/lizhesystem 最近有个需求,通过管理端拖拉拽实现门户首页自定义的功能,前端用的 VUE ,但是在技术选型这块有几个疑问?

  1. 组件共享问题:如果在管理端进行操作并且预览的话,无法实现管理端组件和客户端组件的共用(两个项目相互独立),参考过其他开源项目使用 iframe (嵌入)客户端传参方式的方案,感觉整体交互会比较复杂。

  2. 首页加载问题:既然是门户网站,想来是不是使用 ssr 比如 nuxt 是不是更好,但是这样的话技术曲线会增高,因为之前也没接触过。如果使用传统单页面的方案,前端接收 JSON 来渲染组件铺首页,效果肯定很差,会有先白屏的效果,体验应该也不会太好。

  3. 渲染问题:有没有什么方案,可以不用编译就可以动态渲染页面,这样我更改完界面,客户端就直接看到效果,而不是使用接口拿 JSON 铺组件的效果,vite 或者 nuxt 可以么?

或者有没有这方面的开源项目,可以给小弟参考参考

]]>
vue 复杂且大量 el-form-item 表单结构优化问题请教 tag:www.v2ex.com,2024-10-09:/t/1078477 2024-10-09T02:16:14Z 2024-10-09T07:02:26Z siguapajamas member/siguapajamas 如题,目前最主要的动态因素是不同模块影响不同的表单配置,最主要的就使用了 switch case 返回不同的配置数组,再为每个表单取字符串名,如果 switch case"模块名" return 的数组中包含这个字符串名,就是 v-if 为 true,但是随着数量越来越多,交互的条件越来越来多,让表单填写多了变得卡顿.... 大佬们是否有别的实现思路,或者优化方法

<el-col v-if=" switchFn(item.configType, item).includes('address') " > <el-form-item :prop="`item.address`" :rules="[ { required: true, message: '必填项', trigger: 'blur' }]" label="地址" > <el-input v-model="item.address"/> </el-form-item> </el-col>
]]>
后端学前端的无力感 tag:www.v2ex.com,2024-09-30:/t/1077205 2024-09-30T13:57:03Z 2024-11-27T10:57:02Z kevinguoCN member/kevinguoCN 1.学习 vue3 + mitt + pinia + vue-router + vite
2.学习 promise,async await 的用法
3.学习 axios
4.学习 TS 的基本用法
然后尝试做了一些项目,发现遇到的问题特别多。
1. 前端开发遇到的各种版本问题,node 版本,vite 版本, 各种库的版本
2. vue2 和 vue3 的 api 的改变, 会导致网上一些教程不匹配
3. eslint 和 prretier 的一些配置问题
4. “@” 别名的设置 webstrom 不停的报错飘红
5. ts 的类型检查, 不停的类型提示飘红。
6. css 的一些难以发现的问题,文本框输入框的默认尺寸会导致浏览器样式问题。 ]]>
组件用:change 实现监听效果是什么原理, vue 里面不行 uniapp 里可以 tag:www.v2ex.com,2024-09-26:/t/1075922 2024-09-26T03:15:24Z 2024-09-26T03:20:39Z 6c9fd member/6c9fd <template> <view class="w100" :change:bb="auto" :bb="bb">测试</view> </template> <script> export default { data() { return { bb:1, } }, methods: { auto(newValue, oldValue, ownerInstance, instance) { console.log(newValue, oldValue, ownerInstance, instance) setTimeout(() => {console.log(this.bb);this.bb = this.bb + 1;}, 2000); } } </script>

这种用法是立即执行的 watch 监听,可以检测 bb 的值的变化,实测只能监测元素上绑定的值如 bb ,uniapp 文档里也没找到有这种用法的说明,有大佬知道吗

]]>
请教 Vue3 的 defineComponent 函数使用 tag:www.v2ex.com,2024-09-19:/t/1074206 2024-09-19T15:00:37Z 2024-09-20T06:43:44Z Artiver member/Artiver 各位好,我又来请教个 Vue3 的问题,标签页系统使用 defineComponent 创建组件,实现刷新功能。由于组件需要缓存,使用了 keepalive ,于是用 pinia 存储组件的 name 属性,所以创建时在 name 加上时间戳将其表示唯一。

GitHub 地址

createNode.js的部分代码片段如下,本意是想看下创建组件时的时间戳:

function getTimeStamp() { let timeNow = Date.now(); console.log("create: ", timeNow); return timeNow; } export function createNameComponent(component) { return () => { return new Promise((resolve) => { component().then((comm) => { const tempComm = defineComponent({ name: (comm.default.name || "vueAdminBox") + "_" + getTimeStamp(), props: comm.default.props || {}, ... 

当前实现效果如下:

20240919 223831

可以看到,组件只有第一次打开时会触发getTimeStamp函数,关闭再打开就不会重新获取时间戳了。

我期望每次打开标签页都是不同的时间戳,有老哥遇到这个问题吗?

]]>
ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86