這兩天終于要開始做產(chǎn)品客戶端，這個(gè)早就定下來用electron做了。原因很簡(jiǎn)單，以前用winform開發(fā)已經(jīng)一萬點(diǎn)傷害...。簡(jiǎn)直就是反人類，現(xiàn)在想起來都想吐。這年頭也沒幾個(gè)人再寫winform了吧？
vue+electron再加上一款稱心如意的UI庫(kù)（打算選Bulma），不能再順手，想想都激動(dòng)。
本來覺得挺簡(jiǎn)單，vue開發(fā)，差不多了打包到dist，再丟到electron里去打包，運(yùn)行。甚至自己還建了一個(gè)vue+electron工程，思路就是electron里包含vue...有點(diǎn)狠。但是一開始就發(fā)現(xiàn)問題了。工程中要用到electron node得時(shí)候，必須要打包才可以，而且這樣切換，實(shí)在是很麻煩有木有？
于是在程序員hub上找到了一個(gè)2.2k星星的項(xiàng)目electron-vue，很順手。記錄如下：
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
...and boom! You now have a running electron-vue app.
直接就可以得到如下界面：
- vue全家桶自帶
- 帶調(diào)試工具
- 頁(yè)面不刷新加載
- 直接帶各種打包測(cè)試工具
是不是有點(diǎn)小激動(dòng)？
但這個(gè)世界總是對(duì)windows用戶充滿深深的敵意...
A note for Windows Users
If you run into errors during npm install
about node-gyp
, then you most likely do not have the proper build tools installed on your system. Build tools include items like Python and Visual Studio. Thanks to @felixrieseberg, there are a few packages to help simplify this process.
The first item we need to check is our npm version and ensure that it is not outdated. This can is accomplished using npm-windows-upgrade
. If you are using yarn
, then you can skip this check.
Once that is complete, we can then continue to setup the needed build tools. Using windows-build-tools
, most of the dirty work is done for us. Installing this globally will in turn setup Visual C++ packages, Python, and more.
At this point things should successfully install, but if not then you will need a clean installation of Visual Studio. Please note that these are not direct problems with electron-vue itself (Windows can be difficult sometimes ˉ_(ツ)_/ˉ).
大致就是說，windows下npm i時(shí)會(huì)在node安裝時(shí)卡住（真的會(huì)卡住），這是由于win下缺乏正確的構(gòu)建工具，那么只要這樣做就可以解決：
1. 以管理員身份打開power shell//cmd應(yīng)該也可以，我沒試
2. 輸入 Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
3. npm install --global --production npm-windows-upgrade
4. npm-windows-upgrade
5. 然后還要安裝Windows-Build-Tools：
npm install --global --production windows-build-tools
等上面做完了就可以了，這時(shí)npm i一路綠燈通過。愉快的輸入npm run dev開始玩耍吧！
