Vue 學習之 安裝electron，serialport，sqlite3

寫在最前面 我的node 版本

一.Electron 基礎環境搭建

1.安裝 vue,vue-cli

vue 安裝
npm install vue -g

vue-cli 安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.安裝electron-vue 並新建工程

安裝 electron
npm install electron --save-dev

安裝 Windows-Build-Tools
	這裏默認安裝的時 vs2017 生成工具，如果曾經安裝過，可能需要在重新手動安裝 vsBuild.exe

 npm install --global windows-build-tools

通過腳手架，安裝新工程
vue init simulatedgreg/electron-vue my-project

如果網絡比較慢，可以先把工程模板下載下來(https://github.com/SimulatedGREG/electron-vue),在通過下面的指令安裝
vue init E:\MyWork\electron-vue(工程模板的路徑) my-project

3.安裝依賴環境

 npm install 

4.運行

npm run dev

二.Serialport 安裝

1.安裝依賴

配置工具
npm install -g node-gyp

編譯工具
npm install --save-dev electron-rebuild

2.安裝Serialport

npm install serialport --save

3. 重新編譯

.\node_modules\.bin\electron-rebuild.cmd

在這裏 出現了幾個問題

a.編譯時 出現亂碼，並且報出致命錯誤

解決方法：
首先卸載 serialport ，然後全局用npm 官方源安裝 serialport ，之後再.\node_modules.bin\electron-rebuild.cmd ，這個時候提示 rebuild complete

另外 以後如果有什麼問題，儘量第一做法是卸載 組件，然後再用官方源安裝一遍

----------------------------------以下是嘗試過程----------------------------------------------

這時我的做法是 先將Serialport 卸載了，然後再重新安裝

卸載 serialport
npm uninstall serialport

之後再在node_modules\serialport 下 運行 串口配置命令

node-gyp configure

然後又報錯了

在node_modules 下搜索 binding.gyp 發現有四個文件

發現在node_modules/@serialport/bindings 目錄下，有一個bindng.gyp,不清楚是不是要把這個binding.gyp 複製到node_modules/serialport 下。我是在 node_modules/@serialport 下運行 配置命令，然後沒有報錯
—》 這種做法最後在生成 app後，console 提示未找到 serialport 類

新做法–》 將 @serialport 下所有文件複製到serialport 下 然後node-gyp rebuild 沒有錯誤，但是出現下面的問題 不知道什麼問題


之後不管是rebuild 還是 install 都沒有報錯

如果有其他的問題，可以參考這個鏈接

三. 安裝sqlite3

cnpm i sqlite3 -S

1. 編譯sqlite3

node-gyp rebuild --target=2.0.4 --arch=x64 --target_platform=win32 --dist-url=https://atom.io/download/electron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v2.0.4-win32-x64
平臺配置 win10 64位   --arch=x64 --target_platform=win32

如果太慢,可以把
--dist-url=https://atom.io/download/electron/
換成
--dist-url=http://npm.taobao.org/mirrors/atom-shell

四. 過程中遇到的錯誤

1.node-sass 兼容問題

這種情況 重新rebuild 一下就好

npm rebuild node-sass

2.控制檯運行時，出現 (Module not found: Error: Can’t resolve ‘XXX’ in ‘XXXX’ )

這時候 安裝下，然後再rebuild 就好了

npm i XXX --save

如果有ERR，可以
npm uninstall XXX
npm i XXX --save