问题标签 [vue3-sfc-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
287 浏览

javascript - 使用 babel 源代码而不是 babel 包 (@babel/*)

我想使用源版本 ( github.com/babel) 而不是打包版本 (npm @babel/*) 将 babel 嵌入到我的项目中,以便更好地 (webpack) 摇树(@babel/*是 cjs,github.com/babel而是 mjs/ts/flow)。

我使用需要的第 3 方库,node_modules/@babel/*并且我想配置 TypeScript 以使其node_modules/babel/packages/babel-*/src改为使用。

我知道 TypeScript 中没有模块别名。

我试过compilerOptions.paths没有成功:

是否有任何技巧可以要求@babel/*指向babel/packages/babel-*/src

注意:在我的 webpack 配置文件中,我使用:

我正在寻找打字稿的等价物。

相关上下文:https ://github.com/FranckFreiburger/vue3-sfc-loader/issues/7

(如有需要,请随时询问我更多详情)

编辑: 我认为这个问题的解决注定要失败,因为(AFAIK)TypeScript 无法导入文件。我唯一的选择是等待Migrate Babel from Flow 到 TypeScript PR 的解决。

0 投票
1 回答
173 浏览

vue.js - 将 Vue Sfc 添加到现有项目

我有一个遗留项目,想开始使用 CDN 使用 Vue.js 单文件组件。我确实碰到了一些插件,例如https://github.com/FranckFreiburger/vue3-sfc-loader。从 CDN 的角度来看,我们是否有任何解决方案可以:

  • 通用挂载到页面/正文的根目录?
  • 从 /components 文件夹中添加每个 *.vue 文件?

然后我们可以在现有页面的任何位置调用这些组件。我相信插件https://github.com/FranckFreiburger/vue3-sfc-loader只允许我们挂载到特定的 div#app 并添加自定义模板(至少按照提供的示例)干杯!

0 投票
0 回答
318 浏览

vuejs3 - 由于插件未重新加载,Vue 3 本地组件库 (sfc) 开发无法正常工作

我需要帮助。我正在开发一个vue-3带有单独组件库的(Quasar/Electron)应用程序。我想要做的是在本地开发组件库以及热重载的主应用程序。

这很简单,我已经将组件库配置为 Vue 插件。如果我推送到 NPM 并将其作为 npm 依赖项添加到我的项目中,那么一切正常。yarn link当我使用在本地进行符号链接然后以相同的方式添加它时,不起作用的是:

这很好用,vue-2因为对本地组件库的任何更改都会重新加载并在开发过程中立即显示。但是vue-3,您只能加载一次插件(即使在开发中)。首次加载后,您将收到一条警告:“[Vue warn]: Plugin has already been applied to target app.”。

您基本上每次都需要重新启动应用程序才能查看本地组件库的更改。有谁知道如何解决这个问题?

0 投票
1 回答
420 浏览

typescript - 如何在 Vue 3 Typescript 中定义可选数据

我有来自 Vue 3 Typescript 代码库中的 API 的数据。当数据在传输中时,我想知道它丢失了。目前,这就是我的做法:

问题是定义类型apiData: null as DataType | null很麻烦,而且感觉不对。除了这样的演员表之外,我还没有看到任何关于如何正确执行此操作的示例。

有没有更好的方法将对象的属性标记为可选类型?我知道接口,但我的对象是一种非常复杂的类型,可选数据只是它的一个属性......

谢谢您的帮助!

0 投票
1 回答
172 浏览

javascript - 将 *.vue 文件编译成 *.js 文件以便在 cdn 中使用

有什么方法可以将一些Component.vue文件编译成一些 javascript 文件吗?这样编译后的 js 就可以包含在 HTML 中并与 vue CDN 一起使用。

例如,假设我们有一些组件Component.vue,如下所示

现在我们要将编译后的 Component.js 包含在下面的 HTML 文件中。

我知道一个名为的图书馆vue3-sfc-loader做类似的事情。而是使用“.js”文件直接获取Component.vue文件并编译它。基本上,我想.vue离线编译文件

0 投票
0 回答
130 浏览

vue.js - 为 HMR 编译 Vue 3 组件

vuejs/vue-hot-reload-api对于 Vue2 接受带有组件选项的简单对象。

Vue3 有内置的 HMR 支持,它需要一种不同的方法。我无法弄清楚如何正确更新组件。

需要什么样的数据__VUE_HMR_RUNTIME__.createRecord()

以及如何再次编译更新的组件__VUE_HMR_RUNTIME__.reload()

我认为这两个功能都需要render功能。但是它是在组件加载到dom或其他东西时创建的。当我使用类似下面的东西时,render()函数不存在于cmp.

当我在父组件中使用组件时,render() 被编译并包含在cmp.

但是我不能以同样的方式注册更改的组件,因为 Vue3 显示警告该组件已经注册。

如何在下面编译更新的组件并在其中使用它__VUE_HMR_RUNTIME__.reload()

我尝试了vue的compile()功能,但它对我不起作用......

我认为这是在运行时用修改版本替换组件的唯一方法?:)

0 投票
0 回答
192 浏览

vuejs3 - Vue 3.2 / 用于 Prop 的 Watcher 在 SFC + 脚本设置中不起作用

我的设置如下:

控制台日志永远不会运行。

另一方面,如果我设置{ immediate: true },它会运行,但只会注销新值 - 旧值始终未定义。

我在这里做错了什么?

谢谢!

0 投票
1 回答
76 浏览

css - 如何在 CustomElements 中使用 PrimeVue?

我有一个 Vue 3 自定义元素,我想在其中使用 PrimeVue 和 PrimeFlex 等。所以我首先创建一个组件,对 sfc 模式使用 .ce.vue 扩展名,并使用 defineCustomElement 和 customElements.define 的组合将其编译为一个网页组件。最后我在 index.html 中使用它来查看它是否在浏览器中工作。

它在一定程度上起作用,但并不完全。例如,我不确定如何app.use(PrimeVue)为我的案例进行翻译。

所以我可以看到 PrimeVue-Autocomplete 正在显示,但样式不起作用。

所以问题是:

如何在自定义组件中使用所有 PrimeVue?

或者换句话说:如何使用 PrimeVue 设置 Vue 3 CustomElement?