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 的 webpackelectron-packager 或是 electron-builder,以及一些最常用的插件,如vue-routervuex 等等。

在 这里 查看其文档。

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

* 在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:使用 Vue.js 开发 Electron 桌面应用

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源


相关文章
|
23天前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
|
4天前
|
JavaScript 前端开发 Linux
在 Node.js 和 Electron 中获取设备 UUID 的最佳实践
【JS】在 Node.js 和 Electron 中获取设备 UUID 的最佳实践
15 1
|
2月前
|
JavaScript Linux 开发工具
开源项目:使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器!!
开源项目:使用 Atom-Electron 和 Vue.js 制作的简单 RSS 阅读器!!
|
2月前
|
Web App开发 资源调度 前端开发
electron 中如何安装或更新 vuejs-devtool 最新稳定版
electron 中如何安装或更新 vuejs-devtool 最新稳定版
|
2月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
58 0
|
2月前
|
前端开发 JavaScript API
强强联手打造桌面应用新标杆:Angular与Electron的完美融合——从环境搭建到通信机制,全面解析构建跨平台应用的最佳实践与技巧
【8月更文挑战第31天】随着Web技术的进步,开发者们越来越多地采用Web技术来构建桌面应用程序。通过结合使用开源框架Electron及前沿的前端框架Angular,开发者能充分利用JavaScript、HTML和CSS打造出高性能且易维护的跨平台桌面应用。本文将详细介绍如何搭建基于Angular与Electron的开发环境,包括创建Angular项目、安装Electron及相关依赖、配置Electron主进程以及实现Angular应用与Electron间的通信等关键步骤,并最终将应用打包成多平台可执行文件,为读者提供了一套完整的解决方案以快速入门并实践这一强大技术组合。
29 0
|
2月前
|
JavaScript 开发工具
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
|
3月前
|
前端开发
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
|
5月前
|
JavaScript 前端开发 安全
【TypeScript技术专栏】TypeScript在Electron桌面应用中的实践
【4月更文挑战第30天】本文介绍了如何在Electron桌面应用中采用TypeScript以提升代码质量和可维护性。Electron利用Chromium和Node.js让前端开发者能创建桌面应用,而TypeScript的强类型系统和高级语言特性有助于管理复杂项目。通过初始化项目、安装依赖、配置TypeScript、编写主进程和渲染进程代码,开发者可以在Electron中实践TypeScript。一个简单的文本编辑器案例展示了TypeScript在确保类型安全方面的优势。尽管有学习成本,但TypeScript对大型Electron项目来说是值得的。
329 0
|
5月前
|
JavaScript 前端开发 API
如何利用JavaScript和Electron构建具有丰富功能的桌面应用
【4月更文挑战第30天】如何利用JavaScript和Electron构建具有丰富功能的桌面应用
23 0