淘宝的cnpm命令管理工具可以代替默认的npm管理工具:
$ npm install-g cnpm--registry=https://registry.npm.taobao.org;淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:
cnpm install--globalvue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;
第三步:搭建vue项目
使用命令创建项目,一步步选择之后开始等等项目创建完成

完成后如下:

成功之后修改启动项,打开demo>config>index.js,具体修改如下:

执行命令,出现如下效果说明项目已经运行成功:

执行生成命令:
$ npm run build注意: 生成的时候一定要修改index.js 中的生成路径,否则后面程序运行打包页面会显示空白,找不到路径

出现如下效果

项目下回多出一个dist的文件夹,里面就你打包好的东西

接下来一切操作都在dist文件夹目录下。
第四步:安装Electron
执行命令:
安装成功后执行:electron -v 查看一下是否安装成功

第五步:创建主程序的入口(main.js),及相关配置 package.json
在dist文件夹内创建main.js文件及package.json 文件
文件内容如下:
main.js
以上是最基本的代码,更复杂的可以自行设计,也可以看官方文档
package.json
package.json更多配置可查看官方文档:https://www.electron.build/configuration/configuration
现在万事俱备只欠东风,
执行命令: electron .

成功后效果如下:

出现如上效果说明你已经成功了。
第五步:打包成软件包
执行命令
$ npm install electron-builder$ npm install electron-package
执行打包命令:
electron-bulider










