elementui基于vue-cli@3快速创建electron项目

使用 vue-cli@3

1、快速地搭建一个基于 Element 的Vue项目。

1)创建vue项目

创建vue3项目之前，确认安装了@vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果已安装，执行如下命令。 

vue create my-app
cd my-app
yarn serve

运行项目后,如下图所示

2）添加element-ui

vue add element

运行yarn serve,效果如下

2、安装vue-cli-plugin-electron-builder，用于Electron的Vue CLI3打包插件。

vue add electron-builder

安装过程中，vue-cli-plugin-electron-builder一直没安好，之后删除node_modules，npm install重新下载，结果又报gyp...错误，原因是windows平台编译环境的原因，解决办法如下：

npm install -g node-gyp
npm install --global --production windows-build-tools

重新下载后又报nodesass错误，解决办法，npm uninstall node-sass，然后重新安装npm install node-sass

运行yarn electron:serve, ok。

3、配置electron-build插件参数

新建一个electron-builder.yml文件，与vue.config.js文件同级，可以在里面对打包参数进行设置，比如

appId: 101213
productName: test测试 # 项目名 这也是生成的exe文件的前缀名
directories: # 输出文件夹
  output: dist_electron
  buildResources: build,
  app: dist_electron/bundled
win:
  icon: './public/logo.png'
mac:
  icon: './public/logo.png'
linux:
  icon: './public/logo.png'
nsis:
  oneClick: false # 是否一键安装
  createDesktopShortcut: "always" # 是否添加桌面快捷方式
  createStartMenuShortcut: true # 创建开始菜单快捷方式
  allowToChangeInstallationDirectory: true # 允许修改安装目录
  runAfterFinish: true # 安装完成后是否勾选立即执行
extraResources: # 包含的待打包文件 打包后存放在\dist_electron\win-unpacked\resources\public
  - 'public/favicon.ico'

在package.json里的script脚本里添加--config electron-builder.yml

"electron:build": "vue-cli-service electron:build --config electron-builder.yml",

然后执行：yarn electron:builder,生成打包文件

4、electron-updater实现自动更新

自动更新