Electron-vue開発の実戦Electron入門

原文は初めて私のブログに投稿しました.クリックしてより良い読書体験を得ることを歓迎します.
前言
最近は新しいものを勉強したいです.デスクトップに興味があります.Electronを勉強したいです.新しいものを勉強したいなら、プロジェクトを実戦の基礎として持たなければなりません.
Electron簡単な紹介
見ます:Electron簡単に紹介します.
Electron-vue簡単な紹介
E lectron-vue簡単に紹介します.
プロジェクトの構築

#      vue-cli        
npm install -g vue-cli
#     vue-cli   electron-vue   
vue init simulatedgreg/electron-vue my-project

#     
cd my-project
npm install # or yarn
#       
npm run dev # or yarn run dev

windowsのユーザーであれば、インストール中にnode-gyp、C++ライブラリなどの問題が発生したら、公式文書の解決方法を参照してください.
上記のような問題がなければ、次のような画面が見られます.
五関を越えて六将を斬る
以上は理想の状態です.現実がいかに残酷かを見てみましょう.
背景
いくつかの理由で、Nodejsバージョンが、v8.3.0から安定バージョンv10.16.0にアップグレードされる.安定版ですか?正常だと思っています.npm installの古いプロジェクトはnode-sassにインストールできません.最後にNodejsをv12.3.1の開発版にアップグレードしました.最後は正常です.
以下は次のような環境での操作です.

nodejs v12.3.1

npm

windows 10

踏み始める
まず見てください.私がnpm installにあったミスです.
原文のリンク
分析によると、一部のバージョンでは、chromedriverのzipファイルurlの応答は302ジャンプであり、install.jsではNode.js内蔵のhttpオブジェクトのget方法が302ジャンプを処理できない場合がある.他の場合は、googleアプリ.comが壁になっているため、科学的にインターネットを利用してもファイルを取得できない場合があります.
上記のいずれの場合も、以下のコマンドでインストールできます.(cnpmでインストールしてもいいです.)

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

そして、すべてが正常だと思ったら、npm run devになります.結果としては、運行ログにエラーが発生したことが分かります.エラーログはスクリーンショットを忘れて保存しました.大体の意味はelectronが正しくインストールされていないということです.node_modulesフォルダを削除してnpm installを再インストールする必要があります.えっと、ホー~じゃまた来ます.ところが、卵は一緒です.最後に、chromedriverのインストールと同じ問題があるかもしれないと思いました.

npm install electron --electron_mirror=https://npm.taobao.org/mirrors/electron/

はい、大成功を収めました.またnpm run dev、わあわあ、やっとインターフェースが見えました.

ERROR in Template execution failed: ReferenceError: process is not defined

emi…これはどういう状況ですか?最初は何のカバンかと思っていましたが、インストールされていませんでした.最後に、対応するgoogleがissuesで発見された.https://github.com/agalwood/M...
今日も会ったのですが、Googleは長い間、やっと解決しました.技術はnode 12.4開発版を10.16安定版に還元して、node_を削除します.modulesはinstallでいいです.
また、唯一の比較的効果的な解決策であり、v12.3.1のバージョンをアンインストールし、v10.16.0の安定版を再インストールした.何の意外もなく再度node-sassインストール問題に遭遇しました.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

このような問題は今解決されても手応えがあります.依然として淘宝鏡像を使います.

npm install node-sass –sass-binary-site=http://npm.taobao.org/mirrors/node-sass

再度npm run dev、完璧です.ようやく完璧なインターフェースを見ました.以下のとおりです
しかし、日誌の誤報に気づきました.ミリ…

┏ Electron -------------------

  [11000:0615/095124.922:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
  
┗ ----------------------------

ここではgoogleを表彰する必要があります.Github上のプロジェクトのissuesのコレクションbaiduは基本的にありません.issuesまで検索しました.https://github.com/SimulatedG...
So,to summare ze
In main/index.dev.js:

- require('electron-debug')({ showDevTools: true });
+ // NB: Don't open dev tools with this, it is causing the error
+ require('electron-debug')();

In main/index.js in the createWindow()function:

mainWindow.loadURL(winURL);

+  // Open dev tools initially when in development mode
+  if (process.env.NODE_ENV === "development") {
+    mainWindow.webContents.on("did-frame-finish-load", () => {
+      mainWindow.webContents.once("devtools-opened", () => {
+        mainWindow.focus();
+      });
+      mainWindow.webContents.openDevTools();
+    });
+  }

問題の根本的な原因も深く追究していません.
説明:コードの前の＋と-は、github上のコードのバージョン更新に対する提示であり、+は、新規コードラインを表し、-はコードラインを削除することを表している.ブログのcodeブロックには対応様式がありませんので、実際のコードには前の＋とーを追加する必要はありません.
締め括りをつける
波のNが折れた後、換えてきたのは問題を解決する構想と経験で、それから技術の問題はやはりgoogleで捜さなければなりません.感嘆～上記は、問題があったら解決する方法として、npm installの手順をまとめます.

//   node-sass
npm install node-sass –sass-binary-site=http://npm.taobao.org/mirrors/node-sass
//   chromedriver
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
//   electron
npm install electron --electron_mirror=https://npm.taobao.org/mirrors/electron/
//      
npm install

および各種バージョン:

nodejs v10.16.0

npm v6.9.0

windows 10

また、cnpmをそのまま使っても大丈夫です.
参考文献
Electron-vue開発の実戦