综合开发

Electron-vue 创建 Electron + Vue 项目

微信扫一扫,分享到朋友圈

Electron-vue 创建 Electron + Vue 项目

Electron 是由 GitHub 开发的一个开源框架。它允许使用 Node.js(作为后端)
Chromium(作为前端)
完成 桌面GUI应用
程序的开发。

我们所常用的 Visual Studio Code 和 Atom 都是基于 Electron 框架。

去年由于业务需求,有考虑将产品迁移至 Electron 来解决 Web 端的部分短板。

当时主要考虑的几点因素:

  • 部分甲方不希望产品通过网页形式展现(要以客户端形式),再单独开发一套桌面应用成本较大
  • 浏览器不支持 H265 原生视频播放
  • 可以使用操作系统 API
  • 产品特性因素,长期挂着 Web 端性能不佳

但使用 simulatedgreg/electron-vue
也是有条件的:

node@^7
vue-cli@2.x

你的项目基于 vue-cli@2.x
创建,并且由于各种因素没有升级计划,那可以考虑一下。

如果项目基于 vue-cli@3.x
创建,建议采取 electron-builder
方案构建开发环境。

项目搭建:

# 安装 vue-cli@2.x
yarn global add vue-cli
# 安装:脚手架样板代码
vue init simulatedgreg/electron-vue electron-project
# 设置应用名称 - my-project
Application Name (my-project)
# APP 的 ID 建议为 com.公司名.应用名 - com.example.yourapp
Application Id (com.example.yourapp)
# APP 版本 - 0.0.1
Application Version (0.0.1)
# 项目描述 - An electron-vue project
Project description (An electron-vue project)
# 是否使用 Sass 或 Scss - Yes
Use Sass / Scss? (Y/n)
# 选择需要使用的 Vue 插件/依赖 - axios, vue-electron, vue-router, vuex, vuex-electron
? Select which Vue plugins to install (Press <space> to select, <a> to toggle al
l, <i> to invert selection)
❯◉ axios
◉ vue-electron
◉ vue-router
◉ vuex
◉ vuex-electron
# 使用 ESLint 语法检测 - Yes
? Use linting with ESLint? (Y/n)
# 选择 ESLint 语法检测规则 - Standard
? Which ESLint config would you like to use? (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)
# 是否使用 Karma + Mocha 单元测试 - No
? Set up unit testing with Karma + Mocha? (Y/n)
# 是否使用 Spectron + Mocha 端到端测试 - No
? Set up end-to-end testing with Spectron + Mocha? (Y/n)
# 选择打包工具(builder 更轻量) - electron-builder
? What build tool would you like to use? (Use arrow keys)
❯ electron-builder (https://github.com/electron-userland/electron-builder)
electron-packager (https://github.com/electron-userland/electron-packager)
# 项目作者 - 自定义
? author (Ryan Zhong <hi@bluesdream.com>)
# 进入项目
cd electron-project
# 通过 yarn 安装依赖
yarn
# 运行项目
yarn run dev
# 项目编译
yarn run build

注:模板所默认安装的 Electron 版本为 2.0.4
若要使用更高版本需自行升级。

参考资料:

Electron 中文文档

Spring MVC系列-(3) Bean的装配

上一篇

研究发现交通管制在疫情初期能有效阻止病毒

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

Electron-vue 创建 Electron + Vue 项目

长按储存图像,分享给朋友