超详细！！！electron-vite-vue开发桌面应用之项目环境搭建（一）

云风网
云风笔记
云风知识库

一、创建项目

1、脚手架创建

//官方脚手架
npm create electron-app@latest my-app //my-app 项目名称
//create-electron-vite脚手架
npm create electron-vite@latest my-app

2、选择模板

PS D:\webPro\yunfeng\electron> npm create electron-vite@latest electron-note
? Project template: » - Use arrow-keys. Return to submit.
>   Vue
    React
    Vanilla

3、这里选择vue模板

PS D:\webPro\yunfeng\electron> npm create electron-vite@latest electron-note
√ Project template: » Vue

Scaffolding project in D:\webPro\yunfeng\electron\electron-note...

Done. Now run:

  cd electron-note
  npm install
  npm run dev

PS D:\webPro\yunfeng\electron>

4、安装依赖

执行npm install可能会报错
1、socket hang up
2、connect ETIMEDOUT 20.205.243.166:443
这是electron的安装并不依赖本地npm中registry所配置的镜像，需要增加名称为electron_mirror的镜像源。

根目录新建或则修改文件.npmrc内容

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_CUSTOM_DIR="{{ version }}"
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

4、运行npm run dev