Wechat official account: [Cat twelve daily], welcome to leave a message and point out question A

Electron development is flexible, and none of the methods for developing, compiling, packaging, and electron applications can be claimed to be the only standard. Additional features related to the compile run time for Electron can be found in NPM’s standalone installation package, allowing developers to compile applications and build pipelinings based on their own needs

  • Templates. A template is a blank canvas on which you can build your application. Typically, you can clone a template from a repository and modify it to your liking.
  • Command line tool“Helps you on the other side of the development and distribution process. They are more useful, but they also impose rigid requirements on code structure and build projects.Command line tools are especially useful for beginners

Now let’s take a look at some of the major templating tools

electron-forge

Ps: This site is a little hard to open

Electron Forge is a perfect tool for building modern Electron applications. Electron Forge consolidates several existing (and stably maintained) Electron build tools into an easy-to-use toolkit that anyone can use to quickly set up an Electron development environment. Some of Forge’s core modules were developed by electron’s maintainers, so it’s more like a son. Now let’s look at the documentation and create a simple project

Command line installation

npx create-electron-app my-app
Copy the code

The NPM installation seems slow, but it generates a directory structure that we can install using taobao images

npm config set registry http://registry.npm.taobao.org

We can switch image sources with one package at willNPM install -g NRM NRM use Taobao // Switch the image source NRM ls // View other image sourcesCopy the code

But it still seems to be slow, so let’s start directly into the directory to operate, anyway, generated directory

CNPM I NPM start An unhandled rejection has occurred inside Forge: Error: Could not find any Electron packagesindevDependencies at getElectronModuleName (/ Users/liuyang/aymfx/gitRepository/electron - examples / 2020-01-16 / node_modules / _ @ [email protected] @ @ well ron-forge/core/src/util/electron-version.ts:56:11) at getElectronVersion (/ Users/liuyang/aymfx/gitRepository/electron - examples / 2020-01-16 / node_modules / _ @ [email protected] @ @ well ron-forge/core/src/util/electron-version.ts:92:23) at _default (/ Users/liuyang/aymfx/gitRepository/electron - examples / 2020-01-16 / node_modules / _ @ [email protected] @ @ well ron-forge/core/src/api/start.ts:46:11) at / Users/liuyang/aymfx/gitRepository/electron - examples / 2020-01-16 / node_modules / _ @ [email protected] @ @ company n-forge/cli/src/electron-forge-start.ts:58:19 Electron Forge was terminated. LocationCopy the code

Don’t install electron, just add it to devDependencies

cnpm i -D electron
npm start
Copy the code

The effect of running

Let’s look at the package.json command

"Scripts ": {"start":" electronic-forge start", // development mode "package": "electronic-forge package", // looks like package, but this process is super slow "make": "Electric-forge make", // If you run the build script, Electron Forge will generate platform-specific distributable content for you to share "publish" with everyone: "Auto-forge publish", // publish" lint": "echo \"No linting configured\"},Copy the code

Summary: Documents are slow to open, slow to initialize, and slow to pack. It seems that this is rarely used in China. Let’s look at the next one

electron-builder

Electron Builder is a complete Electron application packaging and distribution solution dedicated to the integrated experience of software development. The electron builder has added a dependency for simplicity that can manage all the more requirements internally.

The electron builder replaces the modules and functions (for example, auto-updater) used by the electron maintainer with custom ones. The Electron Builder package will be more integrated and have less in common with the mainstream Electron applications. Here are some of the benefits, according to the official

  • NPM package management (support yarn without enforcing the distinction between production and development dependencies)
  • You can perform signature operations
  • Automatic line more
  • Support for many target formats
  • Advantages of publishing platform
  • Docker pack Electron can be used to generate applications for different platforms
  • Automatically download all necessary utility files on demand (for example, sign Windows applications with code, make AppX) without setting them up

Install the webPack-based application

Get started on the command line

Mkidr 2020-01-16 // Create directory 2020-01-16 win is not supportedcd 2020-01-16
npm init -y
mkdir src
cd src
mkdir main
mkdir renderer
touch main/index.js
touch renderer/index.js
cd. cnpm i electron-builder electron electron-webpack webpack -DCopy the code

Final directory structure

main/index.js

"use strict";

import { app, BrowserWindow } from "electron";
import * as path from "path";
import { format as formatUrl } from "url";

constisDevelopment = process.env.NODE_ENV ! = ="production";

// global reference to mainWindow (necessary to prevent window from being garbage collected)
let mainWindow;

function createMainWindow() {
  const window = new BrowserWindow({
    webPreferences: { nodeIntegration: true}});if (isDevelopment) {
    window.webContents.openDevTools();
  }

  if (isDevelopment) {
    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
  } else {
    window.loadURL(
      formatUrl({
        pathname: path.join(__dirname, "index.html"),
        protocol: "file".slashes: true,})); }window.on("closed".() = > {
    mainWindow = null;
  });

  window.webContents.on("devtools-opened".() = > {
    window.focus();
    setImmediate(() = > {
      window.focus();
    });
  });

  return window;
}

// quit application when all windows are closed
app.on("window-all-closed".() = > {
  // on macOS it is common for applications to stay open until the user explicitly quits
  if(process.platform ! = ="darwin") { app.quit(); }}); app.on("activate".() = > {
  // on macOS it is common to re-create a window even after all windows have been closed
  if (mainWindow === null) { mainWindow = createMainWindow(); }});// create main BrowserWindow when electron is ready
app.on("ready".() = > {
  mainWindow = createMainWindow();
});

Copy the code

renderer/index.js

"use strict";
const styles = document.createElement("style");
styles.innerText = `@import url(https://unpkg.com/spectre.css/dist/spectre.min.css); .empty{display:flex; flex-direction:column; justify-content:center; height:100vh; position:relative}.footer{bottom:0; font-size:13px; left:50%; opacity:.9; position:absolute; transform:translateX(-50%); width:100%}`;
const vueScript = document.createElement("script");
vueScript.setAttribute("type"."text/javascript"),
  vueScript.setAttribute("src"."https://unpkg.com/vue"),
  (vueScript.onload = init),
  document.head.appendChild(vueScript),
  document.head.appendChild(styles);
function init() {
  (Vue.config.devtools = false),
    (Vue.config.productionTip = false),
    new Vue({
      data: {
        versions: {
          electron: process.versions.electron,
          electronWebpack: require("electron-webpack/package.json").version,
        },
      },
      methods: {
        open(b) {
          require("electron").shell.openExternal(b); }},template: `
      

       

        
Welcome to your new project! 

        
Get qwdqwd now and take advantage of the great documentation at hand.

        

           
         
         


         
    
          
  • electron-webpack v{{ versions.electronWebpack }}
    • 
          
  • electron v{{ versions.electron }}
    • 
         

        

        
This intitial landing page can be  easily removed from src/renderer/index.js.

       

      
`,
    }).$mount("#app");
}

Copy the code

package.json

{
  "name": "2020-01-16"."version": "1.0.0"."description": ""."main": "index.js"."keywords": []."author": ""."license": "ISC"."scripts": {
    "dev": "electron-webpack dev"."compile": "electron-webpack"."dist": "npm run compile && electron-builder"."dist:dir": "npm run dist --dir -c.compression=store -c.mac.identity=null"
  },
  "dependencies": {
    "source-map-support": "^ 0.5.16"
  },
  "devDependencies": {
    "electron": "8.2.0"."electron-builder": "^ 22.4.1"."electron-webpack": "^ 2.8.2"."webpack": "~ 4.42.1"}}Copy the code

The results of

This is based on the project of rapid construction of others, which is not used by many people. This project tells us that when we build electron project again, other technologies, such as Webpack and VUE, can also be used to develop desktop applications in web development. Remember to match the version to the version when running this project. Now the version of webpack is 5, I tried the latest version, but it won’t work.

Vue builds electron project

In fact, vue CLI already supports the electron project and it is very quick and natural, so let’s start

First we need to install the Vue CLI, the version number appears to be successful installation

CNPM install -g@vue /cli vue -v //@vue/cli 4.5.8Copy the code

Launch the VUE visualization and you will see a project dashboard, select the VUE Project Manager, create a new VUE project, and then follow the instructions to create a VUE project

vue ui
Copy the code

After creation, we directly run the app as shown in the picture. After running, click on the right to start the APP

It’s so easy to create a VUE project now, there are so many packages built in for us to use, now let’s put this page in electron, this time we need to install a plug-in, this plug-in will help us to turn the project into a vue project in electron, let’s try it out

No texture, groping should be able to find it soon

Plug-ins – Add plug-ins – then search for plug-ins vue-cli-plugin-electron- Builder – Click Install – wait – Finally install successfully

Back to missions – we’ll see a few more ICONS

Click electron: serve-run

complete

We can see that the directory structure has background.js, which is the main process

With the Vue CLI, a journeyman like me could create a Vue project based on electron in less than five minutes, and we could play with desktop applications. In fact, you can try to package the operation, certainly small achievements, I can write desktop applications, once only engaged in c++ people can write things, we js also can do things, continue to refuel.

If you think my article is ok, click a like or follow the next, there are wonderful stories waiting for you oh, but also can cloud masturbation cat