前端系列——Electron工程构建(普通工程,Vue集成)

前端系列——Electron工程构建(普通工程,Vue集成)

  • Electron
    • 前言
    • 创建Electron工程(npm)
      • 1.创建项目文件夹
      • 2.初始化
      • 3.安装Electron环境
      • 遇到的错误
      • 完成后如下所示
    • 自动构建Electron工程
    • 利用git构建
    • 创建Electron工程(yarn)
    • 创建Electron工程(cnpm)(实在不行用这个)
    • 启动并预览项目
    • 项目中构建Electron工程(推荐直接看这个)
      • 1.构建文件夹
      • 2.安装依赖
      • 3.创建index.html
      • 4.创建main.js
      • 5.生成package.json
      • 6.使用npm run start打开
    • 项目构建Vue+Electron工程
      • 1.构建一个普通的Vue项目
      • 2.进入项目目录构建electron
      • 3.查看版本
      • 4.启动项目
      • 5.安装vue-devtools
      • 6.注释掉vue-devtools的调用
      • 注意

Electron

前言

如果你想要直接以项目的方式学习构建,请不要看上面的创建Electron工程,而是直接看“项目中构建Electron工程”

创建Electron工程(npm)

1.创建项目文件夹

mkdir test
cd test

2.初始化

npm init

3.安装Electron环境

npm install --save-dev electron

前端系列——Electron工程构建(普通工程,Vue集成)_第1张图片

遇到的错误

当我使用手动创建electron项目的时候我的node一直依赖下载卡住,不知道你们有没有这种问题,所以我使用自动构建的方式,自动构建如下

完成后如下所示

自动构建Electron工程

npx create-electron-app@latest 项目名

利用git构建

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

以上是npm安装我一律存在依赖问题
前端系列——Electron工程构建(普通工程,Vue集成)_第2张图片

创建Electron工程(yarn)

yarn init
yarn add --dev electron

创建Electron工程(cnpm)(实在不行用这个)

cnpm install --save-dev electron

前端系列——Electron工程构建(普通工程,Vue集成)_第3张图片

启动并预览项目

你需要在package.json文件的script下加上如下内容

"start": "electron ."

前端系列——Electron工程构建(普通工程,Vue集成)_第4张图片

然后使用npm run start

项目中构建Electron工程(推荐直接看这个)

1.构建文件夹

mkdir 项目目录名

cd 项目目录名

2.安装依赖

cnpm install --save-dev electron

3.创建index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>hello World</h1>
  </body>
</html>

4.创建main.js

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

//创建主窗口
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })

  //加载html
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

5.生成package.json

npm init -yes

添加命令

 "start": "electron ."

前端系列——Electron工程构建(普通工程,Vue集成)_第5张图片

6.使用npm run start打开

前端系列——Electron工程构建(普通工程,Vue集成)_第6张图片

项目构建Vue+Electron工程

1.构建一个普通的Vue项目

我这里采用vue3

vue create test

2.进入项目目录构建electron

cnpm install --save-dev electron-chromedriver
vue add electron-builder

当时折磨了我整整一天安装不好 electron-builder,因为一直卡着不动,我本来已经抱着没有希望的态度了,睡觉之前就直接扔在哪里让他放着,第二天早上居然安装好了,不得不说速度慢
前端系列——Electron工程构建(普通工程,Vue集成)_第7张图片

3.查看版本

npx electron -v

4.启动项目

npm run electron:serve

前端系列——Electron工程构建(普通工程,Vue集成)_第8张图片

5.安装vue-devtools

在启动时会报Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
解决如下:

cnpm install vue-devtools --save-dev

6.注释掉vue-devtools的调用

找到background.js中这块地方,注释修改如图
前端系列——Electron工程构建(普通工程,Vue集成)_第9张图片

注意

我们要关注入口js的改变,原先是main.js现在是src下的background.js,如果你的不是,请手动修改
前端系列——Electron工程构建(普通工程,Vue集成)_第10张图片

你可能感兴趣的:(笔记,前端,vue,前端,vue.js,electron)