为什么做美食视频网站,wordpress icp备案号,网站app程序制作企业,在线构建网站Electron 是一个非常强大的工具#xff0c;它可以用来构建跨平台的桌面应用#xff0c;编写一次到处运行。知乎视频www.zhihu.com0. 准备工作安装好nodejs在终端中输入 node -v 看到版本号即为成功node -v
# 输出 v14.11.0安装一个IDE#xff0c;推荐使用vscode安装cnpm 包…Electron 是一个非常强大的工具它可以用来构建跨平台的桌面应用编写一次到处运行。知乎视频www.zhihu.com0. 准备工作安装好nodejs在终端中输入 node -v 看到版本号即为成功node -v
# 输出 v14.11.0安装一个IDE推荐使用vscode安装cnpm 包管理工具用来加速下载依赖npm install -g cpm安装vue-cli 管理工具cnpm install -g vue/cli1. 新建一个vue项目找一个空文件夹执行以下命令创建一个空文件执行以下命令vue create electrondemo第三个electrondemo 为项目名称按照提示进入electrondemo文件夹并运行起来cd electrondemo
npm run serve可以看到实例项目已经运行起来了2. 安装electron-builderelectron-builder是一个开箱即用的构建跨平台electron桌面应用的解决方案执行以下命令安装electron-buildervue add electron-builder安装成功后可以看见package.json 中已经增加了几个命令 scripts: {serve: vue-cli-service serve,build: vue-cli-service build,lint: vue-cli-service lint,electron:build: vue-cli-service electron:build,electron:serve: vue-cli-service electron:serve,postinstall: electron-builder install-app-deps,postuninstall: electron-builder install-app-deps},这里将用到的两个命令是npm run electron:serve
# 启动调试
npm run electron:build
# 生成项目在命令行中输入npm run electron:serve耐心等待成功后 应用程序就运行起来了自动配置中会打开右侧的调试工具运行以下命令将项目打包npm run electron:build如果在国内的话可能会遇到下载依赖特别慢的问题很多解决方案是通过手动下载 electron 到 cache 目录其实只需要配置 electron 的下载源即可在项目根目录新建 vue.config.js,并添加以下内容//vue.config.js
module.exports {pluginOptions: {electronBuilder: {builderOptions: {...electronDownload: {mirror: https://npm.taobao.org/mirrors/electron/}}}}
}
即配置electron的下载路径为https://npm.taobao.org/mirrors/electron/配置之后再次运行以下命令打包npm run electron:build可以在输出中看见下载路径为配置的路径了Build completebuild完成后可以在dist_electron中看见打包完成的应用啦直接运行dmg/exe可以看到程序成功运行起来啦
