Electron集成Vue
Posted wmxz520
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Electron集成Vue相关的知识，希望对你有一定的参考价值。
Electron集成Vue
通过脚手架
执行下面的命令即可创建一个electron-vue的项目；
vue init simulatedgreg/electron-vue my-project
但是使用的是Vue2，所以推荐使用下面一种方式。
使用Vue CLI Plugin Electron Builder插件
1、初始化vue项目
vue create electron-vue-app
2、选择项目的相关配置，然后会自动生成vue项目
3、进入vue项目根目录下，安装Vue CLI Plugin Electron Builder插件
vue add electron-builder
4、下载成功后，运行项目
npm run electron:serve
网络问题处理
1、设置npm镜像
npm config set registry https://registry.npm.taobao.org/
2、设置electron镜像
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
参考
electron-vue：Vue.js 开发 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：分享可用的開放數據。
以上是关于Electron集成Vue的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Election 中的 Main.js 和 html.js 之间发送和获取数据
与 Electron 相比，Chrome 应用程序的优缺点是啥？
electron教程: 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)