Desktop development ---Vue combined with electronic thermal development framework

It's rubbish

vue-cli version is 4.5.x

Various plugins of vue can be used

The framework will continue to be improved in a practice.
Practice project address
https://blog.csdn.net/qq_42027681/category_10690045.html

github address

Vue2.x version

https://github.com/dmhsq/electron-vue-dmhsq
or
https://github.com/dmhsq/electron-vue/tree/main/template

Vue3.x version

https://github.com/dmhsq/electron-vue3-dmhsq

The dist and src in electron are ignored for testing

Clone file

Vue2.x version

git clone https://github.com/dmhsq/electron-vue-dmhsq.git

Vue3.x version

git clone https://github.com/dmhsq/electron-vue3-dmhsq.git

Catalog description

The electron folder controls the running and packaging of the desktop side. The
rest are the vue directory
electron/main.js desktop application main program
electron/main.js desktop application rendering program

electron-vue-dmhsq

If you just want to package the vue project into an exe

npm run builds
执行完成后
在electron文件夹中
npm run build

github address

Installation dependencies

npm install

Hot development page

npm run serve

Only package vue, not electron

npm run builds
打包的文件在electron下

Hot development page

npm run build
执行完成后
开启额外的控制台
cd electron
npm run serve

Thermal development electron

npm run builds
执行完成后
开启额外的控制台
cd electron
npm run serve

Package electron application

最终打包需要删除electron/main.js中的fs模块
npm run builds
执行完成后（如果页面已经打包过无需此步）
在electron文件夹中
npm run build

Demo

Vue page hot development

electron page hot development

Modify the vue file reload window

Develop electron (the hot update has not been implemented yet, after all, you need to restart the app and think about a solution later)

You can add additional windows in electron/mian.js,
interact with win, etc. For
electron development, please refer to the official documentation https://www.electronjs.org/docs

Package as exe program

Tutorials

For detailed tutorial, please refer to
https://blog.csdn.net/qq_42027681/category_10690045.html

Download electron-vue-dmhsq

There is a clone of git

Vue2.x version

git clone https://github.com/dmhsq/electron-vue-dmhsq.git
or
download Download

Vue3.x version

https://github.com/dmhsq/electron-vue3-dmhsq.git clone git
https://github.com/dmhsq/electron-vue3-dmhsq
or
download Download

Normal development page

You can develop the webpage normally,
what vue plug-in depends on, use
elementui to make the page look better

Develop win/mac interaction

Develop the electron/main.js file,
refer to the official document https://www.electronjs.org/docs

Bale

After the execution of npm run builds is completed
,
npm run build in the electron folder

  Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .

未经本人允许，禁止转载

Will be launched later

Front-end: vue entry vue development applet, etc.
Back-end: java entry springboot entry, etc.
Server: MySQL entry server simple instructions cloud server to run the project
python: recommended not to warm up, be sure to see
the use of some plug-ins, etc.

The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910

If you have any questions, you can leave a message below, I will reply if you see it