Electron vue的使用教程图文详解

2020-06-14 06:28:38易采站长站整理

淘宝的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