Alguns pequenos problemas encontrados ao construir um projeto Electron

1. Crie um projeto eletrônico

1. Crie uma pasta

mkdir electron-desktop

2. Entre na pasta criada

cd electron-desktop

3. Execute o seguinte comando:

yarn init -y
yarn add electron --dev

        O comando acima cria um projeto em branco que contém um package.json e dependências instaladas no diretório node_modules.

        Durante o processo de criação, também gerei um arquivo package-lock.json, o que me fez relatar um erro na quarta etapa e a mensagem de erro solicitando a remoção do arquivo:

 Após a remoção, o erro ainda é relatado quando o comando yarn add é executado novamente:

Depois de pesquisar, encontrei a seguinte solução alternativa:

• Primeiro limpe o cache: npm cache clean --force
• Defina a origem do espelho: npm config set Registry https://registry.npm.taobao.org
• Se não tiver sido definido antes, defina o endereço do espelho: npm config set disturl https://npm.taobao.org/dist
• Definir espelho de elétron: npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

O método acima vem de: o artigo original do blogueiro CSDN "Ming Zai's Sunny Afternoon", o link original: https://blog.csdn.net/qq_41785288/article/details/128323448

Verifique se a instalação foi bem-sucedida:

• npx electron -v

成功后再次执行yarn add，

 2. Escreva o projeto de inicialização

1. Crie o diretório src e continue a criar as pastas principal e do renderizador neste diretório:

        Existem dois conceitos importantes no Electron, o processo principal e o processo de renderização. No processo principal, o código Node.js é usado para chamar a API empacotada pelo Electron para criar uma janela, gerenciar todo o ciclo de vida do aplicativo e carregar a interface web tradicional no processo de renderização:

• O diretório principal é usado para armazenar o código relacionado ao processo principal
• O diretório do renderizador é usado para armazenar códigos relacionados à renderização

2. Crie um arquivo index.html no diretório do renderizador e escreva o conteúdo do arquivo de acordo com suas próprias necessidades

3. Crie index.js no diretório principal como a entrada do processo principal e carregue o arquivo index.html

const { app, BrowserWindow } = require('electron')
const path = require('path')

let win
app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' })
  win.loadFile(path.join(__dirname, '../renderer/index.html'))
})

4. Adicione a configuração no arquivo package.json da seguinte forma:

"main": "src/main/index.js",
"scripts": {
  "start": "electron ."
},

5. Execute o projeto criado:

npm start

Se for bem-sucedido, o aplicativo criado pode ser aberto na área de trabalho.

A estrada é longa e longa, vou procurar de cima a baixo!