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

2021-12-15 16:32:25 394 4203

一、简介

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
没有了 已是最新文章

发表留言