Electron5+vue-cli3开发跨平台桌面应用-安装与配置

2021-12-15 16:32:25 116 807

一、简介

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。


本文将一步步教你使用Electron12和vue+cli,构建跨平台桌面应用,实现功能的同时,保留前端最主流熟悉的基本框架结构


本文不涉及Node、Electron和vue的详细开发教程,仅以实现两者结合为目的,如深入学习Electron和vue,请访问官方:

Node.js: https://nodejs.cn

Electron: https://electronjs.org/

vue: https://cn.vuejs.org/

vue-cli: https://cli.vuejs.org/zh/


二、环境安装

1、安装Node.js,已经按照了的可以忽略,nodejs的安装请自行查看node官网安装,意见最新稳定版


2、安装cnpn,国内使用npm很慢,尤其是后面一些electronjs的配置,基本每次都失败,建议可以安装cnpm,从国内淘宝镜像下载,执行以下命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org


3、在github上有个electron-vue的项目是比较火的,但这个项目使用的electron版本太老了,项目本身也很久都没有更新过,而且其生成的工程结构并不是vue-cli3。所以放弃使用。


4、安装vue/cli,已经按照了的可以忽略,作者安装的版本是 @vue/cli 4.5.11

cnpm install -g @vue/cli


5、创建vue项目

vue create demo-electron


以下是vue项目的创建流程,熟悉的可以跳过,也可以按照自己习惯的方案配置

image.png

image.png

image.png

image.png

image.png


5、改造vue项目为多页面配置模式,大家在使用一些客户端应用的时候经常可以看到,一个应用有多个窗体,为了方便实现多窗体应用,我们将vue项目改为多页面配置模式。


在根目录增加vue.config.js文件,具体的配置项参数可以查看vuecli网站文档

vue.config.js

const path = require('path');
const glob = require('glob');
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    publicPath: './',
    // 将构建好的文件输出到哪里
    outputDir: 'dist',
    pages: {
        index: {
            entry: glob.sync('src/apps/index/main.js'),
            template: 'public/index.html',
            filename: `index.html`,
            title: 'demo-electron’,
        },
        login: {
            entry: glob.sync('src/apps/login/main.js'),
            template: 'public/index.html',
            filename: `login.html`,
            title: 'demo-login',
        },
    },
    // 当设置为 `"error"` 时,检查出的错误会触发编译失败。
    lintOnSave: true,
    // 通过这个选项可以显式转译一个依赖。
    transpileDependencies: [
        /* string or regex */
    ],
    // 是否为生产环境构建生成 source map?
    productionSourceMap: false,
    // 在多核机器下会默认开启。
    parallel: require('os').cpus().length > 1,
    // 配置 webpack-dev-server 行为。
    devServer: {
        open: process.platform === 'darwin',
        host: '',
        port: 8080,
        https: false,
        hotOnly: false,
        disableHostCheck: true,
    },
    chainWebpack: (config) => {
        config.resolve.alias.set('@', resolve('src/common')).set('src', resolve('src'));
    },
};


我这里构建的是一个实例,主功能页面和一个登陆页面,具体的按自己项目功能。

然后调整了‘@’符别名的默认目录。


项目目录结构如下图所示

image.png

随缘而来,乘风而去,山高海阔,自有我风采!
所属分类: Node.js
没有了 已是最新文章

发表留言

  1. 回复
    2022-05-21 04:17
    学习如何每天制作数百个背。 https://fam.bookeat.es/gotodate/promo
  2. 回复
    2022-05-20 23:24
    #网络金融专家! 看看新的机器人。 https://fam.bookeat.es/gotodate/promo
  3. 回复
    2022-05-20 12:24
    今天投资1美元,明天赚1000美元. https://fam.bookeat.es/gotodate/promo
  4. 回复
    2022-05-20 07:29
    在线工作可以为您带来丰厚的利润。 https://fam.bookeat.es/gotodate/promo
  5. 回复
    2022-05-20 01:47
    金融机器人是有史以来第一个投资工具. 发射它! https://fam.bookeat.es/gotodate/promo
  6. 回复
    2022-05-19 20:57
    没有必要担心未来,如果你使用这个金融机器人。 https://fam.bookeat.es/gotodate/promo
  7. 回复
    2022-05-19 16:03
    还是不是百万富翁? 金融机器人会让你成为他! https://fam.bookeat.es/gotodate/promo
  8. 回复
    2022-05-19 11:49
    Hi, Music scene releases, VIP premium account, download music private FTP https://0daymusic.org List albums: https://0daymusic.org/FTPtxt/ Sorted section by date / genre. Private FTP Music/Albums/mp3 1990-2022. Best Regards, 0day-music team.
  9. 回复
    2022-05-19 11:49
    Cialis Generique Site Serieux Bjbzuo [url=https://newfasttadalafil.com/]generic cialis[/url] Mbpjps viagra aumenta el tamano <a href=https://newfasttadalafil.com/>buy cialis generic online</a> It provides complete system of patient assessment in the clinical fundamentals of nursing to assist nurses
  10. 回复
    2022-05-19 11:08
    每周在这里在线工作数千人。 https://fam.187sued.de/gotodate/link