This issue recommends a desktop software development framework based on Vue.js——electron-egg。
At present, there are nearly 7 million developers in China, and desktop software is limited by the learning threshold and mobile trend, and it is gradually mediocre. However, in our daily work, we cannot do without desktop software, so we hope to have a software framework with low learning threshold and support for multiple platforms. electron-egg is born under this demand, developers only need to master js development to get started electron-egg.
character
- Cross-platform: A set of code that can be packaged for windows, Mac, Linux, or run as a web site
- Simple and efficient: only need to learn js language, support vue, react, ejs and so on
- Engineering: You can use server-side development thinking to write desktop software
- High performance: Multiple worker processes can be started
- Rich functions: Technical scenarios on the server, such as routing, middleware, controllers, services, scheduled tasks, queues, and plug-ins
install
1. download
# gitee
git clone https://gitee.com/wallace5303/electron-egg.git
# github
git clone https://github.com/wallace5303/electron-egg.git2. install
# recommend node versions 14.16.0
# Enter directory ./electron-egg/
# Improve installation speed, use domestic mirroring;
npm config set registry https://registry.npm.taobao.org
npm install3. common commands
# Developer model
# 1：[Go to the front-end directory] Start the front-end service
cd electron-egg/frontend && npm install && npm run serve
# 2：[root directory], start the back-end service
npm run dev
# Pre-release mode (environment variable: prod)
npm run start
# Packaging (windows version)
npm run build-w (32-bit)
npm run build-w-64 (64-bit)
# Packaging (mac version)
npm run build-m
npm run build-m-arm64 (m1 chip Architecture)
#Packaging (linux version)
npm run build-l
# web run-development mode
npm run web-dev
#web run-development mode
npm run web-start
# web Run - Producer mode - Stop
npm run web-stop
# Move front-end static resources
npm run rduse
1. Select development mode
To open the configuration file:
electron-egg/electron/config.js，You can modify the following configurations:
developmentMode: {
default: 'vue', // By default, the front and back ends are separated and vue is used
mode: {
// The front and back ends are separated, developed using vue, and the ports are the same as the VUE-enabled serve
vue: {
hostname: 'localhost',
port: 8080
},
// The front and back ends are separated, developed using react, and the ports are the same as the react enabled serve
react: {
hostname: 'localhost',
port: 3000
},
// ejs template rendering
ejs: {
hostname: 'localhost',
port: 7068 // The same as the egg port
}
}
},2.start
- vue mode
# 1：Go to the front-end directory and start vue
cd electron-egg/frontend
npm run serve
# 2：[root directory], start the electron service
npm run dev- react mode, same as vue
- ejs mode, template rendering
# Start the desktop application directly
# root directory
npm run dev3.Write an api for the front end to use
3.1 Create a route
in
In the electron-egg/app/router/index.js file, add:
router.get('/hello', controller.v1.home.hello);3.2 In the controller layer (
electron-egg/app/controller/v1/home.js），compiling methods
async hello() {
const { ctx, service } = this;
const data = {
title: 'hello'
};
this.sendSuccess(data);
}3.3 visit api
http://localhost:7068/hello4. For ejs template rendering, write a hello page
4.1 Create a route
in
In the electron-egg/app/router/index.js file, add:
router.get('/helloPage', controller.v1.home.helloPage);4.2 establish
electron-egg/app/view/hello.ejs view file
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to electron-egg</p>
</body>
</html>4.3 Add method
in
Electron – an egg/app/controller/v1 / home. The js file, add a method:
async helloPage() {
const { ctx } = this;
const data = {
title: 'hello'
};
await ctx.render('hello.ejs', data);
}Detailed documentation: https://eggjs.org/zh-cn/tutorials/index.html
5. Package as exe, dmg, deb executable files
5.1 Move front-end resource files; vue or react mode (ejs mode, website-to-application mode, no need for this step)
Method 1: Use commands
npm run rdMethod 2: Manually update resources
Put the built resources (all files in the dist folder) into electron-egg/app/public, then copy the contents of index.html into electron-egg/app/view/index.ejs
5.2 Run the package command to generate the executable program directory: electron-egg/out
# Packaging (windows version)
npm run build-w (32-bit)
npm run build-w-64 (64-bit)
# Packaging (mac version)
npm run build-m
npm run build-m-arm64 (m1 chip Architecture)
# Packaging (linux version)
npm run build-lusage scenario
- Regular desktop software
- Games (h5 related technology development)
- Change any website into desktop software
You can read more on your own.
