精华内容
参与话题
问答
  • electron-vue是vue-cli和electron结合的项目,比单独使用vue构建起的electron项目要方便很多. 打开cmd,新建一个项目,我使用的是electron-vue,输入以下命令: vue init simulatedgreg/electron-vue my-project my...

    本文将以electron6.x+webpack4+vue全家桶+element-ui为技术栈,一套代码可以分别打包在客户端和web端,结合webpack支持热更新,打包为exe安装包,过程中会涉及vue全家桶、electron的常见问题、配置和优化,webpack的对应配置等。

    一、新建项目

    1、初始化项目

    electron-vuevue-clielectron 结合的项目,比单独使用 vue 构建起的 electron 项目要方便很多.
    打开cmd,新建一个项目,我使用的是 electron-vue,输入以下命令:

    vue init simulatedgreg/electron-vue my-project
    

    my-project就是我们自己取的项目名。

    如果出现下图问题,说明没有安装 vue-cli
    在这里插入图片描述可通过 npm install -g vue-cli 进行安装,如果 vue-cli 也无法安装,可通过 cnpm 来安装。

    然后再 electron-vue 构建项目提示正在下载模板,下完模板之后根据提示进行操作就行,输入你该输入的东西,然后可以一路Enter
    在这里插入图片描述
    解释,可根据情况选择 ESLintKarma + Mocha

    Application Name:项目名称
    
    Application Id: 项目标识Id(一般使用公司网址)
    
    Application Version :你的程序的版本号
    
    Project description:项目描述
    
    Use Sass / Scss :Yes
    
    Select which Vue plugins to install:要安装的插件,默认是全选的,按空格键取消选择,前面尖括号里有*号表示选中状态
    
    Use linting with ESLint? :是否使用ESLint插件做语法检查
    
    Which ESLint config would you like to use?:如果使用上一步的ESLint,你希望用哪一种检查配置
    
    Set up unit testing with Karma + Mocha?:是否使用 Karma 和 Mocha集成测试模块
    
    What build tool would you like to use?:你喜欢用哪一种打包方式
    

    在你所创建的目录可以看到生成的项目:
    在这里插入图片描述
    然后通过

    npm install
    npm run dev
    

    命令运行之后,出现以下界面,代表项目创建成功:
    在这里插入图片描述

    2、项目结构

    在这里插入图片描述
    其中,Electron的主进程和渲染进程在src里分为两个文件夹:mainrendererVue的所有代码就放置在renderer文件夹里。

    二、安装Element UI

    打开项目根目录下的package.json,里面是项目依赖的一些名称以及项目版本要求和一些基本配置,可以看见配置项里有 dependenciesdevDependencies 两项,分别代表什么意思呢?当使用 webpack 构建项目时,需要明确不同环境下所需要的依赖和版本要求:

    dependencies:是在生产环境下使用的一些依赖,由命令行参数 --save 或者 --save-prod 写入,缩写为 -s
    devDependencies:是仅在开发环境下使用的一些依赖,不会再生产环境下使用,由命令行参数 --save-dev 写入,缩写为 -d

    如果你仅仅是引入一个在开发期间需要的依赖包,你只需要把它写入在 devDependencies 中,在生产环境发布产品时,是不会加载这些包的。

    1、npm 安装 Element ui

    npm install element-ui -s
    

    然后在生产环境 dependencies 可以看见包的版本:
    在这里插入图片描述
    然后在 main.js 文件中全局引入,打开 src/renderer/main.js

    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(Element)
    

    你可以在 App.vue 文件中测试是否成功引入

    <template>
      <div id="app">
      <el-button type="danger">测试element</el-button>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
      export default {
        name: 'intercom'
      }
    </script>
    
    <style>
      /* CSS */
    </style>
    

    在这里插入图片描述

    electron+vue 项目的初期搭建就到这里,我们下期再会!

    展开全文
  • 上一篇:electron+vue制作桌面应用--自定义标题栏中我们介绍了如何使用electon制作自定义样式的标题栏 接下来,我们介绍一下标题栏上的最大化、最小化和关闭按钮如何实现 首先查阅electron文档BrowserWindow部分,...

    上一篇:electron+vue制作桌面应用--自定义标题栏中我们介绍了如何使用electon制作自定义样式的标题栏
    接下来,我们介绍一下标题栏上的最大化、最小化和关闭按钮如何实现

    首先查阅electron文档BrowserWindow部分,我们发现electron已经准备好win.close()、win.maximize()和win.minimize()三个方法供我们调用了。

    那么问题来了,我的渲染进程获取到了点击事件,如何到主进程中调用对应的方法呢?

    这里有两种方法,一种是使用ipc,另一种是使用romate
    这里先介绍下ipc
    新建组件Titlebtn,'src\renderer\components\mytitle\Titlebtn.vue'

    <template>
      <div 
        class="titlebtn" 
        v-bind:style="style"
        v-on:click="click"/>
    </template>
    
    <script>
        const {ipcRenderer: ipc} = require('electron');
        const style = {
            min: {
                backgroundColor: 'green',
                right: '100px'
            },
            max: {
                backgroundColor: 'yellow',
                right: '60px'
            },
            close: {
                backgroundColor: 'black',
                right: '20px'
            }
        };
        export default {
            name: 'Titlebtn',
            props: ['type'],
            computed: {
                style: function () {
                    return style[this.type];
                }
            },
            methods: {
                click: function () {
                    ipc.send(this.type);
                }
            }
        }
    </script>
        
    <style>
    .titlebtn {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        -webkit-app-region: no-drag;
    }
    </style>

    这里需要注意一下,因为之前我们设置标题栏样式-webkit-app-region: drag,这里按钮必须设置样式-webkit-app-region: no-drag,不然按钮将无法选中或点击
    鼠标点击按钮后,通过ipcRenderer向主进程发送消息
    然后修改我们的Titlebtn组件,如下

    <template>
        <div id="mytitle">
            <Titlebtn type="min" />
            <Titlebtn type="max" />
            <Titlebtn type="close" />
        </div>
    </template>
    
    <script>
        import Titlebtn from './Titlebtn.vue';
        export default {
            name: 'Mytitle',
            components: {
                Titlebtn
            }
        }
    </script>
        
    <style>
    #mytitle {
        position: absolute;
        width: 100%;
        height: 52px;
        background-color: rgb(198, 47, 47);
        -webkit-app-region: drag;
    }
    </style>

    修改主进程index.js,监听渲染进程的消息,并根据消息执行相应的动作

    import { ipcMain } from 'electron'
    ipcMain.on('min', e=> mainWindow.minimize());
    ipcMain.on('max', e=> {
        if (mainWindow.isMaximized()) {
            mainWindow.unmaximize()
        } else {
            mainWindow.maximize()
        }
    });
    ipcMain.on('close', e=> mainWindow.close());
    展开全文
  • 使用 electron-vue 构建你的桌面应用

    万次阅读 热门讨论 2017-11-06 19:04:42
    什么是 electron官网里这么说:Electron提供了一个Nodejs的运行时,专注于构建桌面应用,同时使用web页面来作为应用的GUI,你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。翻译一下:它是一个运行...

    什么是 electron

    官网里这么说:Electron提供了一个Nodejs的运行时,专注于构建桌面应用,同时使用web页面来作为应用的GUI,你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。

    翻译一下:它是一个运行时,可以像 node 一样这样执行:electron app.js;也是一个使用 html + css + javascript 构建跨平台原生桌面应用的框架。

    本质上,electron 就是一个带了 Chrome 浏览器的壳子(无需考虑兼容性的问题)。

    Electron用 web 页面作为它的 GUI,而不是绑定了 GUI 库的 JavaScript。它结合了 Chromium、Node.js 和用于调用操作系统本地功能的 APIs(如打开文件窗口、通知、图标等)。

    具有两个进程,分别是主进程,以及渲染进程。

    • 主进程:运行 package.json 里面 main 脚本的进程成为主进程。

    • 渲染进程: 每个 electron 的页面都运行着自己的进程,称为渲染进程。

    主进程也就是 npm run start 出来的窗口,我们关心的,还是窗口里面的内容,即是渲染进程。

    electron-vue

    electron-vue 是一个结合 vue-cli 与 electron 的项目,主要避免了使用 vue 手动建立起 electron 应用程序,很方便。

    我们需要做的仅仅是像平常初始化一个 vue-cli 项目一样

    vue init simulatedgreg/electron-vue my-project

    就可以拥有一个 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等的脚手架。

    下图是我的 blog 结合 electron-vue 的目录:

    src 里的 main,即是主进程,而我们需要关心的则仅有 renderer 渲染进程。( main 进程里,添加了常用菜单栏的功能)。

    打包发布

    打包发布有两种方式:

    结语

    上手很愉快。

    electron 中文文档: https://github.com/electron/electron/tree/master/docs-translations/zh-CN

    这有一个栗子:https://github.com/jkchao/vue-electron

    展开全文
  • electron + vue 协作开发桌面端项目

    万次阅读 2018-06-13 18:52:47
    本人也是刚开始接触electron,只是对前端也能实现桌面开发有点好奇,就玩了一下,刚开始看electron的文档一脸懵,耐着性子看完了。着手写一个简单的项目,如果你着手写一个electron的项目,只需要具备两个条件,第一...

    自从eclectron出现,到现在已经很久了,在这里,历史就不谈了,直接上干货。

    本人也是刚开始接触electron,只是对前端也能实现桌面开发有点好奇,就玩了一下,刚开始看electron的文档一脸懵,耐着性子看完了。

    着手写一个简单的项目,如果你着手写一个electron的项目,只需要具备两个条件,第一个你仔细阅读了electron

    的文档,并有了一定的了解和看法,第二你的js很熟练。所以相对于实现一个electron的项目而言,难的并不是实现,而是实现  的过程,还有electron项目的打包,这中间会有各种坑,特别对于我们这些刚接触electron的人来说。

    这次介绍一个第三方库electron-vue,看名字就知道了,他是electron和vue的结合体,很轻松的就可以把你的vue项目转化为桌面项目。文档:https://simulatedgreg.gitbooks.io/electron-vue/content/en/renderer-process.html

    下面开始讲解项目的实现过程,不过再讲解之前,需要一些准备工作,当然说到vue,node是必不可少的,还有vue的脚手架vue-cli,这两个安装完毕,就可以开始写项目了。

    1.首先创建一个electron-vue的项目

    vue init simulatedgreg/electron-vue my-project


    我是之前已经创建过这个项目,所以他提示我是否继续创建,不过没什么影响,一路继续就好了,和vue的创建很像。

    2.进入项目目录

    cd my-project

    这里还有一点和vue不太一样,vue在创建的时候就会自动安装依赖,但是electron-vue不会,需要你手动安装依赖

    npm i (这里需要说明一下,虽然用cnpm安装会更快,但是这里还是推荐用npm,不然后面可能会出现一些莫名的坑)

    安装完成,下方就是electron-vue的目录


    .electron-vue:webpack和electron的一些配置

    build:项目打包后的文件

    src:里面有两个文件夹


          main:看过electron的都知道electron项目里有一个main.js的文件,这个文件和main.js是同样的功能

          renderer:是vue的代码文件,按vue的实现方法写就可以,在这里尽情的写vue代码吧

    package.json:这个就不需要我多说了吧(会vue的都知道)

    3. 执行看一下效果

    npm run dev


    ok,完美显示

    4.试试打包,毕竟桌面端,怎么可以没有.exe文件

    electron-vue有内置的打包,你只需要执行 npm run build就可以了

    每次重新打包前,执行一下npm run build:clean 清楚之前打包的代码,在执行打包。

    开始打包

    不报错,就说明打包完成,点击build文件下的.exe文件,看下效果


    可以了,下面去放心实现你的桌面项目吧。

    我也是刚接触electron,大家一起交流,有问题欢迎指出。

    展开全文
  • electron-vue打包编译

    2019-11-27 21:57:16
    electron-vue开发环境配置(针对windows): electron-vue支持win7以上版本的开发,node版本要求是7以上的。 window小伙伴在安装electron-vue时会报错,所以,在安装之前,请先安装相关windows-build-tools。 ...
  • 创建窗口时,增加一句:frame: false,禁止掉窗口默认边框(只显示内容区) win = new BrowserWindow({ width: 800, height: 600, frame: false, ... // See nklayman.github.io/vue-cli-plugin-electr
  • 首先确保你安装了node.js 没有安装的话去官网下载安装https://nodejs.org/zh-cn/ 不推荐使用最新版本,因为有可能electron还不支持最新版的node.js,建议从8.0以上的版本开始 (注意:npm 命令被集成到了node.js...
  • 第二章 electron-vue 第三章 自定义标题栏 文章目录系列文章目录前言一、效果预览二、重点步骤1.去掉默认的标题栏和边框(Main process)2.自定义标题栏(Render process)3.在标题栏中引用 【天气】组件4.最小化、...
  • electron-vue初探

    千次阅读 2019-03-12 16:03:54
    最近一朋友想让我帮他做个打印机的插件,实现打印特定内容的功能,但又不接受网页的形式,于是技术选型我选择了electron,正好我之前也没玩过electron,就决定搞个桌面端demo试试。 什么是electron? Electron 是一个...
  • electron 将pc端(vue)页面打包为桌面端应用

    万次阅读 热门讨论 2017-11-12 17:45:38
    背景最近在学习RxJS,平时边看文档边顺手就敲一敲那些API,有时候想回顾一些自己写的东西,就要先把项目跑起来,这也难免有些麻烦。...这个练手Rxjs的小项目是用vue跑的,之前没玩过vue,顺手玩一下。打
  • 3、electron-vue菜单栏跳转

    万次阅读 2018-03-13 20:22:10
    方法一:主线程与渲染线程通信 (1)在主线程目录main的index.js配置如下,其中 mainWindow是BrowserWindow对象 ... const template = [{ label: '主页', click() { mainWindow.webContents.send('href', '...
  • 0.electron-vue的打包方式 npm run build 这种打包方式对应以electron-renderer为输出的开发环境(默认) npm run build:web 这种打包方式对应以web为输出的开发环境(默需手工修改配置及部分文件) 1.npm run ...
  • Electron-vue也是基于vue-cli的脚手架工具。小伙伴们自己构建的vue项目想要改造成桌面应用,还请移步Electron将Web页面打包成桌面应用实例。 2018.11.13更新——实操过程中遇到的问题 1. 关于<template lang=...
  • electron-vue实战--MAC

    千次阅读 2019-07-30 14:41:36
    日前有个查询手机积分和归属地的桌面应用,当然可以直接使用electron创建项目,但我想直接使用vue实现基本功能,然后通过electron打包成不同环境下的桌面程序. 二、安装 该样板代码被构建为vue...
  • 1、electron-vue安装

    万次阅读 2018-03-14 20:03:46
    此项目请使用node7以上,electron-vue强烈推荐用 yarn ,因为它可以更好地处理依赖关系,并且可以帮助减少最终的打包大小。当然国内的小伙伴使用cnpm也可以。 特别注意出现:Use linting with ESLint? (Y/n),最好...
  • ├─ .electron-vue │ └─ build.js 打包时调用,在package.json中的script里的build命令 “build”: “node .electron-vue/build.js && electron-builder”, │ └─ dev-client.js │ └─ dev-...
  • electron-vue开发,介绍

    千次阅读 2018-08-13 21:53:56
    开始开发环境设置 在你使用yarn 或者npm install 安装依赖之后,运行..... yarn run dev # (yarn run dev) 或者 npm run dev 此样板代码附带了几个易于移除的登录页面组件。   入口 在产品阶段,electron-...
  • electron-vue+electron-updater实现自动更新

    千次阅读 热门讨论 2019-08-29 10:45:17
    目录 创建项目 安装electron-updater electron-updater配置 ...1、安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli 2、创建项目 vue init simulatedgreg/electron-vue test //vue init simula...
  • 9、electron-vue安装node-serialport

    万次阅读 2018-03-22 13:07:13
    安装 node-serialport是使用Nodejs在Windows上调用串口,具体用法请参考telnet-client yarn add serialport // 或 cnpm install -save serialport yarn安装方式 ...npm install -g cnpm --registry=ht...
  • 上两篇博客做了在windows下的electron-vue项目的打包发布,由于electron是跨平台的,所以需要产品支持多平台即Windows,Linux,Mac os系统。于是尝试在Windows下打包成Linux/Mac OS系统下的安装包,或者在Linux下...

空空如也

1 2 3 4 5 ... 20
收藏数 7,578
精华内容 3,031
关键字:

electron-vue

vue 订阅