Electron-Vue跨平台桌面应用开发

官方文档说明
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（单一代码仓库）开发模式。它的设计理念是在项目间共享相同版本的依赖包，减少冗余存储，并提供了更快的安装速度。

最后编辑于：2024.10.23 17:58:38