[nodejs]electronjs vue environment construction

Environment construction

nodejs installation

# 官网:https://nodejs.org/en/download/
# 查看nodejs版本
$ node -v
# 查看npm版本
$ npm -v

npm upgrade

# npm升级
$ npm install -g npm

npm change source

//查看源
$ npm config get registry
//更换源
$ npm config set registry https://registry.npmjs.org
//淘宝源
$ npm config set registry https://registry.npm.taobao.org

Install vue/cli

# 安装vue/cli
$ npm install -g @vue/cli

# 查看vue版本
$ vue --version

# 升级vue 
$ npm update -g @vue/cli

Create a vue project

# 打开vue web管理器
$ vue ui
# 选择目录
# 填入项目名称
# 下一步
# 默认vue3
# 创建

add electron

The important thing is said three times, it is very important to click to complete the installation, it is very important to click to complete the installation, it is very important to click to complete the installation

update electron in dependencies

order yourself

Features

custom window

https://www.electronjs.org/zh/docs/latest/tutorial/window-customization

• transparent
  * resize
  • resizable: false
• drag

system tray

https://www.electronjs.org/zh/docs/latest/api/tray

The rendering layer sends messages to the main thread (shutdown, reset, etc.)

https://www.electronjs.org/zh/docs/latest/api/ipc-main