vscode源码分析之electron介绍
程序员文章站
2022-03-07 21:40:44
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
- 打包
npx @electron-forge/cli import
npm run make
打包完成后在out文件夹下即可运行。
结语
本文是vscode源码分析的开篇之作，主要介绍了界面UI设计的关键技术electron的入门。后面博客将持续介绍vscode的界面部分源码分析，欢迎持续关注后续博客。
本文地址：https://blog.csdn.net/gschen_cn/article/details/109261200
上一篇： R可视化12|ggplot2-图层图形语法 (4)
下一篇： 前端面试题