首先，我要说谢谢您帮助解决我的问题。我今天早上约9点开始努力解决这个问题，现在是下午3点，我仍然无法弄清楚是否有什么办法可以解决此问题。为了了解我可能错过的基本原则，我没有看过YouTube视频的数量。
这是我也查看并尝试过的所有其他StackOverflow问答对(有时是多次甚至组合)，但是都没有运气:
https://forum.vuejs.org/t/solved-unknown-custom-element-v-card/43018
<v-card> - did you register the component correctly?
"[Vue warn]: Unknown custom element: ..." Error, when using vuetify UI components with the vue-cli-plugin-vuetify
Vuetifyjs error Unknown custom element: did you register the component correctly
https://github.com/SeregPie/VuetifyImageInput/issues/3
https://michaelnthiessen.com/solve-unknown-custom-element-vue/
Vue/Vuetify - Unknown custom element: <v-app> - did you register the component correctly?
Unknown custom element: <v-app> - did you register the component correctly? For recursive components
至此，我基本上已经放弃寻找Vuetify的解决方案的方法，如果仍然无法在周一之前找到解决方案，那么我将完全放弃Vuetify，转而使用另一个框架，例如VueBootstrap。
问题设置:
我只是想通过使用基于项目的学习来学习Electron-Vue-Vuetify。我决定从构建一个简单的计算器应用程序开始，这样我就可以学习如何创建组件并将它们与代码连接在一起，也许还可以学习如何进行SASS/CSS样式/主题。
我使用GitHub上的SimulatedGreg模板创建了样板应用程序:
https://github.com/SimulatedGREG/electron-vue
我确认该应用程序正在运行。
然后，我按照步骤进行NPM安装Vuetify。我注意到，vuetify安装程序修改了根文件夹中的App.vue文件，但未修改渲染器文件夹中的App.vue。因此，我进行了移动，并且还注意到Vuetify安装程序还在src文件夹的根目录下创建了一个新的components文件夹，因此我将该HelloWorld.vue组件移动到了src/renderer/components文件夹中。我进行了其他一些小的更改，以确保我已尽力将其连接起来。验证已安装Vuetify插件并将其保存在package.json的Dev-dependencies中，以及其他一些零碎的地方。
最终，我能够找到应用程序的加载位置，但是所有样式都不正确。现在，它只是呈现给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>
我尝试过的其他一些事情，您可能会在下面的代码仓库中看到:
在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'
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')
https://github.com/SethEden/EVJS-Calculator
随时克隆它，看看您是否可以帮助我弄清楚我没有正确做的是什么，或者我错过了什么？我敢肯定这是一件非常愚蠢的事情，但是希望它将帮助其他人克服类似或相关的问题。我的主要目标还是学习!因此，如果您有任何其他信息，可以描述为什么更改很重要，这可以帮助我了解更多信息!
也许这个问题的答案是其他一些问题中的答案，但也许我只是不完全理解这些答案，无法根据自己的情况实现。无论如何，我希望它能使其他人受益!
再次感谢你!!
干杯，祝您周末愉快!
〜塞思
更新:
首先进行设置，然后按照本教程进行操作:
https://medium.com/@bromix/electron-application-with-vue-js-and-vuetify-f2a1f9c749b8
npm install -g @ vue/cli
创造 Electron 应用
vue添加vuetify
Vue Add Electro-Builder
结果:Vue，Electron和Vuetify的所有功能均正常运行，但是文件夹结构不能正确地作为企业应用程序进行扩展。
默认文件夹结构:
项目名
-main.js
这是文件夹结构应为:
项目名
- - 应用
- - - 项目名
--------- main.js
这样，我们可以拥有一个Framework文件夹，所有内容都将包含在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-configuration
实现此修复程序以及对代码文件和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)
C:\electronVueJS-App\node_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:serve”:“vue-cli-service electronic:serve --enable-logging”，
这会弹出一些其他窗口，但没有显示其他信息。
在VueJS开发人员Facebook页面上与Sean Alexander Free进行了进一步调查，发现以下内容:
有趣的是，问题出在第18行的electronic-dev-tools-installer Node 模块的index.js中:
var _utils = require(“./utils”);
找不到相对路径，因为当前目录是 Electron 的渲染器路径。
在需求显示之后添加console.log(__ dirname):
D:\workspace\electronVueJS-App\node_modules\electron\dist\resources\electron.asar\renderer
当然，哪一个不是通过相对路径从node_modules文件夹中提取资源的正确路径。
似乎这是安装程序模块本身的问题，但是我认为有些webpack技巧可以解决这个问题。
我的回复
啊，我明白你在说什么。因此，似乎在Electron-dev-tools-installer内部代码中的某处，
开发人员将init-main路径重用为基础位置，并获得了要加载的资源...。
使用非常典型的编程技术，因为似乎他们从未计划过允许系统文件夹结构
定制企业解决方案的规模。 (例如，客户端-服务器)。
此外，我敢打赌，这不会是我遇到的最后一个问题...。
当然不是第一个。
我将恢复为默认安装并研究打开background.js和main.js文件的方法
放入包装器/调用转发器，并尝试使其以这种方式工作。
模板的最终工作仓库是:(我将其留给其他人使用)
https://github.com/SethEden/electronVueJS-Basic
最佳答案
我对Electron完全陌生，与此同时，我发现了Github reply并尝试了它。
一切正常(我在左上方添加了一个按钮来进行测试)。
也许不使用整个Electron样板，但是准备好Electron + Vue + Vuetify就可以了。 :)
我猜想这个answer可以帮助您调试整个样板并使其正常工作，但是它需要一些Webpack配置知识。
不确定是否值得花时间或进行挣扎，但由于有几个人指出了这一点，因此它实际上可能有效。 ^^
~~
哦，我不是专家，但是您可能会问Vue Discord上的人是否要调试当前配置而不是我的解决方案。
关于javascript - SimulatedGreg Electron-Vue-Vuetify错误消息: [Vue warn]: Unknown custom element: <v-app> - did you register the component correctly?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62722398/