模拟格雷格电子Vue-Vuetify错误消息：[Vue警告]：未知的自定义元素：-你注册的组件正确吗？

Question

首先，我要说谢谢你帮我解决问题。今天早上9点左右，我开始努力解决这个问题，现在已经是下午3点了，我仍然不知道如果有什么可以解决这个问题。为了理解我可能错过的基本原则，我看了无数youtube视频。

这里是所有其他StackOverflow问答对，我也看过并尝试过（有时多次

https://forum.vuejs.org/t/solved-unknown-custom-element-v-card/43018

“[Vue warn]：将vuetify UI组件与Vue cli插件vuetify一起使用时出现未知自定义元素：…”错误

未知的自定义元素：您是否正确注册了组件

https://github.com/SeregPie/VuetifyImageInput/issues/3

https://michaelnthiessen.com/solve-unknown-custom-element-vue/

Vue/Vuetify-未知的自定义元素：

未知的自定义元素：

在这一点上，我基本上已经放弃了为Vuetify寻找解决方案，如果我在周一之前仍然无法找到解决方案，那么我将完全放弃Vuetify，转而使用另一个框架，如VueBootstrap。

问题设置：我只是想通过基于项目的学习来学习Electron Vue Vuetify。我决定从构建一个简单的计算器应用程序开始，这样我就可以学习如何创建组件并用代码将它们连接在一起，也许还可以学习如何进行SASS/CSS样式/主题。

我在GitHub上使用SimulatedGreg模板创建了一个锅炉板应用程序：https://github.com/SimulatedGREG/electron-vue

我验证了应用程序正在运行。然后我按照步骤安装Vuetify。我注意到vuetify安装程序修改了根文件夹中的pp.vue文件，但没有修改渲染器文件夹中的pp.vue。所以我移动了它，我还注意到Vuetify安装程序在src文件夹的根目录下创建了一个新的组件文件夹，所以我将HelloWorld.vue组件移动到src/渲染器/组件文件夹中。我做了一些其他的小改动，以确保我尽了最大努力把它连接起来。验证Vuetify插件已安装并保存在package.json的开发依赖项中，以及其他一些零碎的东西。

最后，我能够得到应用程序的加载位置，但所有的样式都是错误的。现在，它只是一个呈现到DOM的平面文本，没有任何样式。我在开发人员工具中遇到了一系列错误：

以下是完整的错误日志：（抱歉有点长我知道，我试图删除冗余的长位）

[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
warn @ vue.esm.js?a026:628
createElm @ vue.esm.js?a026:5949
patch @ vue.esm.js?a026:6488
Vue._update @ vue.esm.js?a026:3954
updateComponent @ vue.esm.js?a026:4075
get @ vue.esm.js?a026:4488
Watcher @ vue.esm.js?a026:4477
mountComponent @ vue.esm.js?a026:4082
Vue.$mount @ vue.esm.js?a026:9063
Vue.$mount @ vue.esm.js?a026:11974
init @ vue.esm.js?a026:3127
createComponent @ vue.esm.js?a026:5989
createElm @ vue.esm.js?a026:5936
patch @ vue.esm.js?a026:6527
Vue._update @ vue.esm.js?a026:3954
updateComponent @ vue.esm.js?a026:4075
get @ vue.esm.js?a026:4488
Watcher @ vue.esm.js?a026:4477
mountComponent @ vue.esm.js?a026:4082
Vue.$mount @ vue.esm.js?a026:9063
Vue.$mount @ vue.esm.js?a026:11974
(anonymous) @ main.js?cebd:13
./src/renderer/main.js @ renderer.js:1351
__webpack_require__ @ renderer.js:791
fn @ renderer.js:102
1 @ renderer.js:1423
__webpack_require__ @ renderer.js:791
(anonymous) @ renderer.js:858
(anonymous) @ renderer.js:861
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-app-bar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
2vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-spacer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/renderer/App.vue
       <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
2vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>
....
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HelloWorld> at src/renderer/components/HelloWorld.vue
       <App> at src/renderer/App.vue
         <Root>

一些Vuetify用户可能也在Vuetify Facebook页面上。我确实在那里重新发布了我的问题，只是希望得到任何帮助！

我尝试过的其他一些东西，您可能会在下面链接的代码repo中看到：

在main.js文件中，我尝试用以下方式修改代码……请参阅注释代码：

import Vue from 'vue'
import axios from 'axios'
// import '../plugins/vuetify' <--Attempted to add this....causes the application to not load anything!
import App from './App'
import router from './router'
import store from './store'

也在main.js中：

new Vue({
  components: { App },
  router,
  // vuetify: Vuetify, <--Also attempted to add this here....same issue as above, not loads at all.
  store,
  template: '<App/>'
}).$mount('#app')

我将代码发布到GitHub上的一个沙箱回购中：https://github.com/SethEden/EVJS-Calculator

请随意克隆它，看看你是否能帮我找出我没有做对的地方，或者我遗漏了什么？我相信这是非常愚蠢的事情，但希望它能帮助其他人克服类似或相关的问题。我在这里的主要目标是学习！所以，如果你有任何额外的信息，你可以描述为什么改变是重要的，这将帮助我了解更多！！

也许这个问题的答案是其他问题中的一个答案，但也许我只是没有充分理解这些答案，无法在我自己的情况下实现它。无论如何，我希望它有益于其他人！

再次感谢你！！干杯

更新：

首先是安装，然后是本教程：https://medium.com/@bromix/electron-application-with-vue-js-and-vuetify-f2a1f9c749b8

npm安装-g@vue/cli vue创建电子应用程序vue添加vuetify vue添加电子生成器

结果：一切为Vue，电子

• src---main.js

文件夹结构应该是这样的：ProjectName

• src---应用 ------ ProjectName --------- main.js

这样我们就可以拥有一个框架文件夹，所有内容都将包含在src项目根文件夹中。

src路径中的所有文件都已移动到新文件夹结构路径中：@/src/Application/ProjectName/。

结果：构建被完全破坏。

找到这篇博客文章：

https://vuejsdevelopers.com/2019/03/18/vue-cli-3-rename-src-folder/

这篇文章：

https://vuejsdevelopers.com/2019/03/11/vue-cli-3-full-stack/

这是GitHub错误报告：

https://github.com/vuejs/vue-cli/issues/1134

在实施这些修复后，构建仍处于中断状态，需要进行额外搜索，我发现：

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#webpack-配置

在对代码文件和package.json主入口点中的各种路径实施了此修复和其他一些明显的更改之后，构建现在可以工作了，但应用程序在加载时出现错误，Vue无法呈现。

错误消息：

[HMR] Waiting for update signal from WDS...
utils.js?e375:21 Uncaught TypeError: Cannot read property 'getPath' of undefined
    at getPath (utils.js?e375:21)
    at getIDMapPath (index.js?b206:29)
    at eval (index.js?b206:32)
    at Object../node_modules/electron-devtools-installer/dist/index.js (chunk-vendors.js:1117)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (background.js?e28f:1)
    at Module../src/Application/electronVueJS-App/background.js (app.js:949)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)

在以下路径中查找utils.js？e375:21:C:\electronVueJS App\node\u modules\electron devtools installer\dist\utils.js

故障代码为：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.changePermissions = exports.downloadFile = exports.getPath = void 0;

var _electron = require("electron");

var _fs = _interopRequireDefault(require("fs"));

var _path = _interopRequireDefault(require("path"));

var _https = _interopRequireDefault(require("https"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var getPath = function getPath() {
  var savePath = _electron.app.getPath('userData'); // <-------------------- HERE

试图像这样修改上面的代码，以便能够看到到底是什么失败：

var getPath = function getPath() {
    console.log('_electron is: ' + JSON.stringify(_electron));
    console.log('_electron is: ', _electron);
    var savePath = _electron.app.getPath('userData'); // <-------------------- HERE

现在构建无法完成构建过程，因此尝试其他操作：而不是：

var _electron = require("electron");

我要这样做：

const remote = require('electron').remote;
const app = remote.app;
console.log(app.getPath('userData'));

然后我会尝试：

const remote = require('electron').remote;
console.log('remote electron is: ", remote);
const app = remote.app;
console.log('remote app is: ', app);
console.log(app.getPath('userData'));

最后：

var getPath = function getPath() {
var savePath = app.getPath('userData');

另一个构建时错误：

[Window Title]
Error

[Main Instruction]
A JavaScript error occurred in the main process

[Content]
Uncaught Exception:
TypeError: Cannot read property 'app' of undefined
    at eval (webpack:///./node_modules/electron-devtools-installer/dist/utils.js?:11:20)
    at Object../node_modules/electron-devtools-installer/dist/utils.js (C:\electronVueJS-App\dist_electron\index.js:166:1)
    at __webpack_require__ (C:\electronVueJS-App\dist_electron\index.js:20:30)
    at eval (webpack:///./node_modules/electron-devtools-installer/dist/downloadChromeExtension.js?:16:14)
    at Object../node_modules/electron-devtools-installer/dist/downloadChromeExtension.js (C:\electronVueJS-App\dist_electron\index.js:142:1)
    at __webpack_require__ (C:\electronVueJS-App\dist_electron\index.js:20:30)
    at eval (webpack:///./node_modules/electron-devtools-installer/dist/index.js?:16:55)
    at Object../node_modules/electron-devtools-installer/dist/index.js (C:\electronVueJS-App\dist_electron\index.js:154:1)
    at __webpack_require__ (C:\electronVueJS-App\dist_electron\index.js:20:30)
    at eval (webpack:///./src/Application/electronVueJS-App/background.js?:6:85)

该错误现在发生在该行上：

const electApp = remote.app;

很明显那不起作用。

恢复代码只是为了安全，因为这是最接近于获得正在运行的应用程序的。

错误现在是：

utils.js?e375:19 Uncaught TypeError: Cannot read property 'getPath' of undefined
    at getPath (utils.js?e375:19)
    at getIDMapPath (index.js?b206:29)
    at eval (index.js?b206:32)
    at Object../node_modules/electron-devtools-installer/dist/index.js (chunk-vendors.js:1117)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (background.js?e28f:1)
    at Module../src/Application/electronVueJS-App/background.js (app.js:949)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)

试图通过Electron logging参数启用Chrome日志：“Electron:serve”：“vue cli服务Electron:serve--启用日志”，

这弹出了一些附加窗口，但没有显示附加信息。

与Sean Alexander Free在VueJS开发者Facebook页面上进行的进一步调查发现：有趣的是，问题出在electron dev tools安装程序节点模块的index.js第18行：var_utils=require（“./utils”）；

找不到相对路径，因为当前目录是electron的渲染器路径。

在require之后添加console.log（\uuuuu dirname）显示：D:\workspace\electronVueJS App\node\u modules\electron\dist\resources\electron.asar\renderer

当然，这不是通过相对路径从node_modules文件夹中拉入资源的正确路径。

似乎这是安装程序模块本身的问题，但我认为一些webpack诡计可以绕过这个问题。

我的回应啊，我明白你在说什么。因此，似乎在电子开发工具安装程序内部代码的某个地方，开发人员重用了init-main路径作为相同的路径，以确定去哪里加载资源......非常典型的编程技术，因为他们似乎从未计划允许系统文件夹结构可根据自定义企业解决方案进行缩放。（例如客户机-服务器）。此外，我敢打赌，这不会是我遇到的最后一个问题......而且肯定不是第一个。我将恢复到默认安装，并研究如何将background.js

模板的最终工作回购是：（我将留给其他人）https://github.com/SethEden/electronVueJS-Basic

Answer 1

我对电子完全陌生，同时我发现Github回复并尝试了它。
它完全工作（我在左上方添加了一个按钮来测试它）。

也许不使用整个电子样板，但它让你准备好了电子Vue Vuetify。：）

我想这个答案可能有助于调试整个样板文件并使其正常工作，但它需要一些网页配置知识。

不确定这是否值得时间投资或斗争，但既然有几个人指出了这一点，它可能真的有效。^^

~~
哦，我不是专家，但是如果您想调试当前配置而不是我的解决方案，您可以询问Vue Discord上的人员。