electron-vue：Vue.js 开发 Electron 桌面应用

相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用，今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架，该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。

　　相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用，今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架，该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。

 

 

概要

该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 ​​vue-cli​​ 作为脚手架工具，加上拥有 ​​vue-loader​​ 的 ​​webpack​​、​​electron-packager​​ 或是 ​​electron-builder​​，以及一些最常用的插件，如​​vue-router​​、​​vuex​​ 等等。

在 这里 查看其文档。

你会在本样板代码中找到的东西...

• 基本的项目结构与 单一的 ​​package.json​​ 设置
• 详细的 文档
• 使用 vue-cli 作为项目脚手架
• 立即可用的 Vue 插件 (​​axios​​, ​​vue-electron​​, vue-router, vuex)*
• 预装开发工具 ​​vue-devtools​​ 和 devtron
• 使用 ​​electron-packager​​ 或 ​​electron-builder​​ 轻松打包你的应用程序*
• ​​appveyor.yml​​ 与 ​​.travis.yml​​ 配置用于 ​​electron-builder​​ 的自动部署*
• 能够生成用于浏览器的网页输出
• 便利的 ​​NPM 脚本​​
• 使用携带模块热更新 (Hot Module Replacement) 的 ​​webpack​​ 和 ​​vue-loader​​
• 在工作在 electron 的 ​​main​​ 主进程时重启进程
• 支持使用 ​​vue-loader​​ 的 HTML/CSS/JS 预处理器
• 默认支持 ​​stage-0​​ 的 ES6
• 使用 ​​babili​​ 避免完全反编译到 ES5
• ESLint (支持 ​​standard​​ 和 ​​airbnb-base​​)*
• 单元测试 (使用 Karma + Mocha)*
• 端到端测试 (使用 Spectron + Mocha)*

* 在​​vue-cli​​脚手架中可定制

起步

该样板代码被构建为 ​​vue-cli​​ 的一个模板，并且包含多个选项，可以自定义你最终的脚手架程序。本项目需要使用 ​​node@^7​​或更高版本。electron-vue 官方推荐 yarn 作为软件包管理器，因为它可以更好地处理依赖关系，并可以使用 ​​yarn clean​​ 帮助减少最后构建文件的大小。

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

你是一个 Windows 用户？

请务必查看 Windows 用户注意事项 来确保你拥有 electron 和其他依赖关系所需的所有必要构建工具。

希望使用 Vue 1？

只需指向 ​​1.0​​ 分支即可。请注意，electron-vue 已经正式废除了 ​​vue@^1​​ 的使用，因此，这些更改也同样会反映到项目结构、功能和文档上 (​​遗留文档​​)。

vue init simulatedgreg/electron-vue#1.0 my-project

下一步

请务必查看 这个文档。在这里，你将找到有关项目配置、项目结构和构建应用程序的有用信息。这里还有一个方便的 ​​常见问题​​ 的部分。

基于 electron-vue 的作品

看看一些基于 electron-vue 建造的了不起的的项目。想要在此列出你自己的项目吗？请随时提交 pull 请求。

• ​​Surfbird​​: 一个基于 Electron 和 Vue 的 Twitter 客户端
• ​​Lulumi-browser​​: Lulumi-browser 是一个轻量级的浏览器，基于 Vue.js 2 和 Electron
• ​​Space-Snake​​: 使用 Electron 和 Vue.js 构建的桌面游戏。
• ​​Forrest​​: 一个 npm 脚本的桌面客户端
• ​​miikun​​: 一个简单的 Markdown 编辑器
• ​​Dakika​​: 超省时的应用程序，使写作变得轻而易举
• ​​Dynamoc​​: Dynamoc 是一个 dynamodb-local、 dynalite 和 AWS dynamodb 的图形化界面客户端
• ​​Dockeron​​: Dockeron 项目, 基于 Electron + Vue.js 的 Docker 桌面客户端
• ​​Easysubs​​: 快速简单地下载字幕
• ​​Data-curator​​：分享可用的開放數據。