这篇文章首发在zihu，但是只有我自己看得见，白忙活一场。遂放弃在那里发文了...
突然想学一下windows的开发，了解了一圈，决定玩玩Electron。
由于前端变化太快，本文所有的步骤都给出了官方链接，尽量使得版本升级后，也能通过链接找到最新的信息。
一. 由来
windows开发的第一步自然是配置windows开发环境，然后我就被震惊了。微软直接让我下载了一个虚拟机，打开就能用。这是真正的开箱即用啊！（https://developer.microsoft.com/zh-cn/windows/downloads/virtu...）
我觉得各官网都该学习一下，直接让用户下虚拟机，真的不想搭环境啦！
之后我转头去学习svelte，开发环境这事就被搁置了。
如今回头再继续搭环境，发现windows虚拟机过期了😂，所以我才想着找个Ubuntu+Electron开发环境的虚拟机。在网上找了一圈，没发现有现成的，于是只能手搓了...
二. Step by Step【不需要蕃蔷】
2.1 创建 ubuntu 的虚拟机
用到的软件如下：
vmware player 免费版（https://www.vmware.com/products/workstation-player.html）
ubuntu server 22.04.4 LTS（https://cn.ubuntu.com/download/server/step1）
为了让虚拟机跑起来时占用资源少一些，我选择了server版，而非desktop版。
安装很简单，相关截图如下：
之后一路选择Done/Continue，按Enter就行。真正的安装大概10分钟，安装完成后，重启虚拟机。
注：虚拟机的网络默认使用了NAT模式，具体可以参考下面的“网络篇”。
2.2 配置 ubuntu terminal 【本步骤含2条命令】
为了让 terminal 稍微好用一点，稍稍配置一下。分别创建两个文件如下：
~/.inputrc：按上下方向键，匹配历史命令
"\e[A": history-search-backward
"\e[B": history-search-forward~/.vimrc：大段代码拷贝时，不会乱缩进
set nosmartindent
set noautoindent
set tabstop=4
set softtabstop=4
set shiftwidth=4
set number
set hlsearch2.3 安装 node 【本步骤含6条命令】
下面的步骤都是在没蕃蔷的情况下完成的，关于网络问题可以参考下面的“网络篇”。（github由于是间歇性被葑，有问题，多尝试）
根据官网提示来：https://nodejs.org/en/download/package-manager
按上面的步骤，安装完nvm后，直接运行 nvm install 20 会提示找不到nvm，需要：
source ~/.bashrcnvm install 20 结束后，设置源，确保在国内能顺畅的使用：
npm config set registry https://registry.npmmirror.com2.4 安装配置 electron 【本步骤含6条命令】
根据官网教程来：https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-f...
总结下来是这样：
mkdir my-electron-app && cd my-electron-app
npm init #【一路回车】
npm install electron --save-dev #【耗时约5分钟】
vim index.js #【写入：console.log('Hello from Electron !')】
vim package.json #【在"scripts"下，加入："start": "electron .",】
npm run start- npm init 中生成的入口是 index.js，但是 electron 官网说是 main.js，应该是版本差异。这里采用 index.js
- 运行 npm run start 后显示失败，如下。原因是使用的 ubuntu server，没有安装X服务，缺少部分 libs
2.5 安装X服务 【本步骤含3条命令】
如前所述，我采用了 ubuntu server 版以减轻运行虚拟机带来的负担，副作用就是没有安装图形界面。因此这里用一条命令弥补之。
运行 startx，系统会提示如下安装：
sudo apt install xinit
安装过程持续大约15-30分钟，若中途失败退出，重试即可。（不知道为什么都是cn的网站，也失败了好几次）
安装完后，在虚拟机中直接运行 startx，即可打开图形界面：
startx在图形界面中，重新运行 electron，可以看到 console 输出，证明运行正常：
2.6 显示 electron 窗口 【本步骤含3条命令】
2.4 只走完了 electron 教程的前半部分，显示了一行 log，下面完成教程的后半部分，分别编写 index.js 与 index.html。
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'" />
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
</body>
</html>index.js 内容如下：
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})在虚拟机的x窗口中运行 electron，运行后弹出了图形界面，结果如下：
三. 网络篇
虚拟机默认装机采用的是 NAT 模式，也就是说虚拟机会使用宿主机的网络配置，其中最重要的是 DNS（涉及到访问 github）。请配置宿主机（你的电脑）的 DNS，不要使用宽带商的默认 DNS，推荐：
223.5.5.5 【阿里】
8.8.4.4 【谷歌(使用前先确认可ping通)】
四. 虚拟机
本文的初衷其实就是想提供一个搭好环境的虚拟机，既然已经走到了这一步，那自然会分享出来：
https://pan.baidu.com/s/1VZSgNjraAgFphIcPBiCafA?pwd=mp3i
下载解压后，用 vmware player 打开时记得选"复制虚拟机"，vmware会自动重配网络：
ubuntu用户名：dev
ubuntu密码：123456
五. 结束
上述步骤搭好了环境并验证可用后，可以开始工作了。
在正式开始项目前，我会选一个合适的脚手架项目，帮助搭建项目的主体框架。毕竟对前端不是太熟悉。
下一篇见
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。