In 2020, Electron is in full steam. I never thought that the front end can also develop desktop applications. Today, we will talk about Electron in terms of environment construction, project development and application packaging. Half share, half use.
Environment set up
For Electron, you can use HTML + JS directly, vue, Reacet, etc. Since our front end team uses VUE, we’ll focus on Electron + VUE.
If you search on the Internet, most tutorials will point you to a project called electric-Vue, which is a scaffolding set up by a foreign god to facilitate the development of Electron. An old Chinese medicine doctor has also examined it. Vecli 4.x is not supported, the Electron version only has 2.x. You should know that now the Electron has come to 8.3, adhering to the professional ethics of old Traditional Chinese medicine, give up decisively.
Build your own environment based on the latest versions of Vue Li 4 and Electron.
The tools required
node V12+
npm
cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org
vue cli4 $ npm install -g @vue/cli
Note that version
On the whole
Vue create electron // Enter the project after successful creationcd// If this step is stuck, use CNPM to install the electron chromedriver CNPM first install --save electron-chromedriverCopy the codeElectron is only as high as 6? It doesn’t matter. Choose first.
At this point, the bag is ready to go, but the speed is stable at 1 to 5 KB /s. It’s really fast.
Ctrl + C to finish the task and fix the problem with the Electron version. Check if there are meters under SRC and background. Js. Open package.js and manually modify the Electron version to 8.3
// delete node_modules rm -rf node_modules //Copy the codeThis is not a free speed
instruction
# vue serve
npm run serve
# vue build
npm run build
# electron:serve
npm run electron:serve
# electron:build
npm run electron:build
Copy the codeThe cache to repair
The problem comes again, you will find that NPM run electron: Build package will download the electron package, some people say, I don’t like CNPM, I like NPM, I like YARN. In fact, we use CNPM mainly for faster setup environment, let’s first fix the electron cache
<! -- Cache directory --> Linux:$XDG_CACHE_HOME/ ~ / cache/electron/apple system: ~ / Library/Caches/electron/Windows:$LOCALAPPDATA/ electron/Cache or ~ / AppData/Local/electron/Cache /Copy the codeIn MAC, for instance into the ~ / Library/Caches/electron/directory to see taobao word folder, let’s make a copy of the inside of the bag on the outer layer Such packaging need not download again, If you like NPM and YARN, delete node_modules and install again
The lazy exclusive
Git clone, CNPM install. If you prefer other ways to build, please refer to cache repair
Github address: github.com/JackFlyL/El…
The development of the configuration
Basically, the front-end students are familiar with the road, which is the same as the development of VUE, dry over
NPM Run electron: Serve enters the development environment
SRC /background.js is the configuration of the electron program
For example, the application of width and height configuration, according to their own project requirements
win = new BrowserWindow({ width: 800, height: 600, webPreferences: {
nodeIntegration: true}})Copy the codePackaging configuration
If there are customization requirements when packaging the application, you need to create a vue.config.js in the project root directory
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
appId: "com.example.app",
productName: "aDemo"// Ademo.exe is a copyright:"Copyright © 2019"Directories: {output: directories directories:"./dist"// Output file path}, MAC: {// MAC related configuration icon:"./logo.png"},},},},},};Copy the codeFor details, see www.electron.build/
Mainline technology recruitment! That’s the theme. Surprise!
[Welfare Prospect]
Business prospects: industry segmentation leader, high-speed development, AI intelligent driving precision landing;
Technology-driven: senior students from Beijing University of Science and Technology, Berkeley, and Zurich led the team, with excellent student mentors sitting across the table;
Welfare security: seven insurances and one housing fund (full amount), household quota (Beijing, Shanghai and Tianjin), stock options;
Team atmosphere: work professionally! Trustworthy! To sum up, is – reliable!!
【 Company Introduction 】
Mainline Technology, founded in 2017, is a national high-tech artificial intelligence enterprise dedicated to creating intelligent logistics products with intelligent driving technology. The company is committed to creating an intelligent driving logistics engine under closed, semi-closed and urban scenarios, enabling diversified logistics scenarios such as ports, high-speed trunk lines, logistics parks and urban distribution. Mainline technology has successfully realized the normal unmanned autonomous horizontal transportation of intelligent driving container trucks in Tianjin Port and other ports. At present, it is gradually developing the application of intelligent driving in high-speed trunk lines, urban distribution and other scenes, taking unmanned driving as the bridge, truly combining “AI+ logistics”. At present, “TrunkPort” and “TrunkPilot” have been released to the public, and trial operation has been carried out in Tianjin, Hebei and other places, gradually realizing the liberation of productivity by technology and bringing scientific and technological achievements to every logistics worker. www.trunk.tech
[About the Team]
Our team members graduated from Tsinghua University, Peking University, Berkeley, ETH Zurich and other well-known universities at home and abroad, and have worked in Google, Baidu, Microsoft Research Asia, Tesla and other companies. The technical capabilities of the team cover the whole stack of intelligent driving, integrating perception and centimeter-level positioning, semantic cognition, vehicle regulation control, etc., and have achieved a number of first places in the fields of environmental perception, driving cognition, intelligent control and automotive electronics technology. With years of experience and influence in the field of autonomous driving, it was founded by senior students from Peking University and Tsinghua University. The founding team came from the original founding team members of Baidu autonomous vehicle and leaders of various school teams of China Intelligent Car Competition. Its members have worked for tech companies such as Google, Baidu and MSRA. There are not only car experts who play with the controls of 40-ton heavy trucks, but also industry leaders who come up with cutting-edge technologies such as laser deep learning.
job
Control algorithm:
1. Responsible for the design, implementation and verification of the automatic driving control technology scheme
2. Able to independently undertake the development of autonomous driving control algorithm and provide technical guidance to team members
3. Responsible for the early tracking and research of ADAS related software technology
4. Cooperate with other engineers to complete joint adjustment and integration of the whole system, and provide feasible solutions to technical difficulties
Decision planning algorithm:
1. Responsible for the design and development of autonomous driving decision-making and planning algorithms;
2. Summarize and summarize scenarios, and be responsible for the testing and completeness demonstration of decision planning algorithm;
Location algorithm:
1. Responsible for the design and development of automatic driving positioning algorithm;
2. Responsible for the engineering and optimization of the positioning algorithm to ensure the implementation of the algorithm research;
Construction of laser SLAM:
1. Design, development and optimization of laser radar drawing and positioning algorithm;
2. Responsible for the design and optimization of the algorithm for mapping and positioning of autonomous slam.
For more positions, please consult
Resume direct: [email protected]
Wechat consultation: Lulu92ber
HR sister is beautiful and warm, the team is really reliable!