Electron 官网地址: electron 官方地址
官方文档说明
https://electron.nodejs.cn/docs/latest/tutorial/quick-start
开发环境
Windows 10 、 Visual Studio Code
开发环境的准备
1、安装 Node.js 坏境
官网地址：https://nodejs.org/zh-cn/about
2、安装 Vue Cli
npm install -g @vue/cli
3、安装 淘宝镜像 cnpm
npm config set registry https://registry.npmmirror.com
4、全局安装 Electron
cnpm install electron -g
查看 是否安装成功 :
//查看node版本
node -v
//查看vue 注意：V大写
vue -V
//查看electron
electron -v
cmd结果
安装 Vue Cli
安装 淘宝镜像 cnpm
搭建 vue 环境
1、首先使用 vue-cli 搭建基础 vue框架
vue create electron-demo
创建vue框架
运行此命令报错
vue add electron-builder
使用下面的命令 cnpm intsall 进行安装
cnpm intsall
安装 完成后 我们使用 npm run electron:serve 运行
npm run electron:serve
启动服务
看到这个界面说明已经完成了。
Electron-vue界面
查看electron+vue 项目目录
项目目录
src目录下 background.js 文件 配置 electron 应用的一些设置。 如窗口大小 、 是否可以缩放、是否可以移动窗口等
Electron 应用打包
应用打包 使用 npm run electron:build 进行打包
打开项目目录 删除掉 node_modules 重新 cnpm install
如果还是无法打包 删除掉 node_modules / electron 目录 重新 cnpm install
然后运行 npm run electron:build 进行打包
cnpm设置镜像源 命令
查看npm 淘宝镜像源
npm config get registry
删除镜像 恢复默认镜像
npm config delete registry https://registry.npmmirror.com
npm、cnpm和pnpm基本概念
npm
npm（Node Package Manager）是Node.js的默认包管理器，用于安装、管理和分享JavaScript代码包。它是全球最大的开源库生态系统之一，提供了数百万个包供开发人员使用。npm的特点包括包管理、版本控制、发布与共享以及执行自定义脚本等。
cnpm
cnpm（China Node Package Manager）是npm的一个镜像版本，由淘宝团队提供。它主要用于加速在中国大陆地区的包下载速度，因为它使用国内的镜像服务器来存储和分发npm包。cnpm的使用与npm非常相似，开发者可以通过简单地将npm命令替换为cnpm命令来使用它。cnpm的安装通常涉及全局安装cnpm并设置其使用淘宝镜像的仓库地址。
pnpm
pnpm（performant npm）是一个注重性能的包管理器，它通过使用硬链接和符号链接来避免重复安装依赖包，从而节省磁盘空间并提高安装效率。pnpm还支持创建非扁平的node_modules目录结构，适用于monorepo（单一代码仓库）开发模式。它的设计理念是在项目间共享相同版本的依赖包，减少冗余存储，并提供了更快的安装速度。
网友评论