Basic Content: Rising Star Project Electron + vue2 Desktop Application 1 Basics_lsswear’s Blog-CSDN Blog
According to the experience used and the description on the official website, there are probably four ways:
- Create the project yourself (npm only)
- Scaffolding with Electron
- Compile HBuilder to web, and then compile it with Electron
- Vue scaffolding, install Electron, and then compile
Try them one by one this time to see which one is convenient. The third one was tried and succeeded, but simply with an example.
There is a ready-made example on the official website, and it may be used. ,
Life is about tossing~
1. Build the project with npm
It is best to use a newer version of npm, otherwise there may be a version problem… super troublesome.
npm -v 8.0.0 node -v v16.11.1 npm init npm install --save-dev electron //error content npm ERR! code 1 npm ERR! path D:\workspace\electron\test1\\ ode_modules\electron npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node install.js npm ERR! RequestError: read ECONNRESET npm ERR! at ClientRequest.<anonymous> (D:\workspace\electron\test1\\ ode_modules\got\dist\source\core\index.js:970:111) npm ERR! at Object.onceWrapper (node:events:510:26) npm ERR! at ClientRequest.emit (node:events:402:35) npm ERR! at ClientRequest.origin.emit (D:\workspace\electron\test1\\ ode_modules\@szmarczak\http-timer\dist\source\index.js:43:20) npm ERR! at TLSSocket.socketErrorListener (node:_http_client:447:9) npm ERR! at TLSSocket.emit (node:events:390:28) npm ERR! at emitErrorNT (node:internal/streams/destroy:157:8) npm ERR! at emitErrorCloseNT (node:internal/streams/destroy:122:3) npm ERR! at processTicksAndRejections (node:internal/process/task_queues:83:21) npm ERR! at TLSWrap.onStreamRead(node:internal/stream_base_commons:220:20) npm ERR! A complete log of this run can be found in: npm ERR! D:\software\cood_tools\\ ode_data\\ ode_cache\_logs\2023-05-19T01_30_29_190Z-debug.log
According to the content of this error report “RequestError: read ECONNRESET”, Baidu’s result is that the link is broken, probably because of the source problem.
//View local source npm get registry https://registry.npmmirror.com/ //replace source npm config set registry http://registry.npm.taobao.org/ npm install --save-dev electron added 72 packages in 8m
The download was really slow…but successful.
//package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"start": "electron .",//Manually added
"test": "echo "Error: no test specified" & amp; & amp; exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}
Only bugs and final results are logged afterwards.
Report an error
1. Cannot find module D: workspace electron’testivindexjs’ please verify that the packagejson has a valid “main” entry
According to the official website tutorial, simply write a main.js and modify package.json, run npm run start, and then report an error…
The reason for this is that my local file package.json has not changed main, and the default is index.js.
According to the http header security policy in the official website index.html: Content Security Policy (CSP) – HTTP | MDN
Successfully run~
2, requier is not defined
This should be because the dependency cannot be found, because the require type is wrong…
3. Debugging
At the beginning, I didn’t know how to debug, and then carefully looked at the options under the compiled interface.
The shortcut key is ctrl + shift + i, which can be set by code later.
Parameters can be placed in the start command, which will be discussed later.
giee: https://gitee.com/lsswear/wj_test/tree/master/electron/test1
The sample project that comes with the official website/(ㄒoㄒ)/~~ npm install did not respond for a long time and passed…
2. Scaffolding with Electron
Quite easy to use.
npm install --save-dev @electron-forge/cli//It feels best to install globally npm init electron-app@latest my-app//Create project npm init electron-app@latest my-app -- --template=webpack//Create with template npm run start //run npm run make//compile to the out folder to compile exe executable files and installable files npm run publish//Compile a publishable file, which should be an installable file
Try adding vue2 in it~ I checked that vue2 cannot be installed directly like others, but there is Electron-vue, you can try it.
This scaffolding is the same when it comes out, and there is nothing wrong with it without an example.
3. Use HBuilder
I know this~
Compile the new project into web h5, then add it to the compiled file, and compile it directly with the global Electron.
Reference: Use h5 developed by uniapp to package electron desktop applications – a new technology
4. vue scaffolding
There is Electron-vue to integrate vue and electron, but I don’t know how the compilation works.
Report the webpack version problem.
//Native vue version vue -V @vue/cli 5.0.8 // vue init simulated greg/electron-vue test4 cd test4 npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/webpack npm ERR! dev webpack@"^4.15.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer webpack@"^2.0.0 || ^3.0.0" from [email protected] npm ERR! node_modules/karma-webpack npm ERR! dev karma-webpack@"^3.0.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See D:\software\cood_tools\\ ode_data\\ ode_cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! D:\software\cood_tools\\ ode_data\\ ode_cache\_logs\2023-05-19T08_22_26_571Z-debug.log //package.json "node-loader": "^0.6.0", "node-sass": "^4.9.2", //sass "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "vue-html-loader": "^1.2.4", "vue-loader": "^15.2.4", "vue-style-loader": "^4.1.0", "vue-template-compiler": "^2.5.16", "webpack-cli": "^3.0.8", "webpack": "^4.15.1",//webpack version requirements "webpack-dev-server": "^3.1.4", "webpack-hot-middleware": "^2.22.2", "webpack-merge": "^4.1.3"
Vue-cli has version 4 and version 5, version 4 corresponds to webpack4, version 5 corresponds to webpack5, and my machine was also version 4 before.
The reason for changing to 5 is also because of using sass… For details, see: vue2 sass installation and use_vue2 installation sass_lsswear’s blog-CSDN blog
Use vue scaffolding, install electron-builder, see: How to simply build an Electron + vue2.0 desktop application | Tianya Xiaolei
vue create project name npm install --save-dev electron npm install --save-dev electron-packager
vue create test5
vue install --save-dev electron
//add main.js
//Mainly load the packaged file for the following statement
mainWindow.loadURL(url.format({
pathname: path.join(app.getAppPath(),'dist/index.html'),
protocol: 'file:',//protocol
slashes: true//The attribute of slashes is a boolean value, if the root of the protocol protocol colon is two slashes (/), then the value is true
}));
//vue.config.js modification
//Modify the compiled file path, if not, it will show that the path cannot be found
module.exports = defineConfig({
transpileDependencies: true,
publicPath:""//Add
})
//package.json modification
"main": "main.js",
//run
npm run serve
npm run start
//Compile and modify package.json
"packager": "electron-packager ./ HelloWorld-win=x32 --out ./bin --electron-version 13.0.1 --overwrite --icon=./static/img/logo.ico"
//You can add the compilation command, which is the same as the direct compilation of the command line
5. According to the experience of the boss
Tutorial: Vue3 + electron development desktop software introduction and actual combat (1) – create electron + vue3 main project
It is probably to create a vue project, download electron, and then configure the file.
related articles:
Npm switch Taobao mirror_bearWeb’s blog-CSDN blog
URL | Node.js v18.16.0 Documentation
Error Invalid options in vue.config.js: “baseUrl” is not allowed Problem Solving – Developer Blog