欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

vscode源码分析之electron介绍

程序员文章站 2022-06-28 18:15:37
vscode凭借其强大的插件功能和丰富的插件库，使其成为现如今最流行的集成开发环境之一。如此优秀的软件，有很多值得开发者学习的地方，如它的框架体系、插件机制、各组件之间的信息交互等。好在vscode本身就是一款开源的软件，因此为开发者提供了学习的机会。本系列博客将为大家深入介绍vscode软件背后的原理、技术和方法，帮助大家更好的理解所用的工具，以期开发出和vscode一样优秀的深受广大开发者喜欢的软件。...

vscode凭借其强大的插件功能和丰富的插件库，使其成为现如今最流行的集成开发环境之一。如此优秀的软件，有很多值得开发者学习的地方，如它的框架体系、插件机制、各组件之间的信息交互等。好在vscode本身就是一款开源的软件，因此为开发者提供了学习的机会。本系列博客将为大家深入介绍vscode软件背后的原理、技术和方法，帮助大家更好的理解所用的工具，以期开发出和vscode一样优秀的深受广大开发者喜欢的软件。

electron是什么

electron是一款以html、csss和javascript技术为基础，能够在windows、linux、mac等运行的跨平台桌面端应用程序开发的框架。

开发环境配置

安装nodejs即可。

node -v
npm -v

helloworld入门项目

接下来将通过一个入门级helloworld项目的创建，帮助大家了解electron开发的基本流程。

  • 项目目录结构
    my-electron-app/
    ├── package.json
    ├── main.js
    └── index.html

  • 创建项目

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
  • 创建main.js文件
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
  win.webContents.openDevTools()
}

app.whenReady().then(createWindow)

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
  • 创建index.html文件
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
  • 修改package.json文件：
{
    "name": "my-electron-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}
  • 运行代码
npm start

vscode源码分析之electron介绍

  • 打包
npx @electron-forge/cli import
npm run make

打包完成后在out文件夹下即可运行。

结语

本文是vscode源码分析的开篇之作，主要介绍了界面UI设计的关键技术electron的入门。后面博客将持续介绍vscode的界面部分源码分析，欢迎持续关注后续博客。

本文地址：https://blog.csdn.net/gschen_cn/article/details/109261200

相关标签： 编程之美 1024程序员节

上一篇： Eclipse[IDE--集成开发环境]

下一篇： 广西柳州螺蛳粉哪个好吃？推荐3家店

推荐阅读