pythonelectron桌面开发案例_使用Vue+Electron构建桌面应用

image.png

image.png

这两天终于要开始做产品客户端，这个早就定下来用electron做了。原因很简单，以前用winform开发已经一万点伤害...。简直就是反人类，现在想起来都想吐。这年头也没几个人再写winform了吧？

vue+electron再加上一款称心如意的UI库(打算选Bulma)，不能再顺手，想想都激动。

本来觉得挺简单，vue开发，差不多了打包到dist，再丢到electron里去打包，运行。甚至自己还建了一个vue+electron工程，思路就是electron里包含vue...有点狠。但是一开始就发现问题了。工程中要用到electron node得时候，必须要打包才可以，而且这样切换，实在是很麻烦有木有？

于是在程序员hub上找到了一个2.2k星星的项目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.

直接就可以得到如下界面：

image.png

vue全家桶自带

带调试工具

页面不刷新加载

直接带各种打包测试工具

是不是有点小激动？

但这个世界总是对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时会在node安装时卡住(真的会卡住)，这是由于win下缺乏正确的构建工具，那么只要这样做就可以解决：

1. 以管理员身份打开power shell//cmd应该也可以，我没试

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

等上面做完了就可以了，这时npm i一路绿灯通过。愉快的输入npm run dev开始玩耍吧！