在本教程中，我们将学习如何使用 Vue.js 技术封装一个简单的 Windows 可执行文件（exe）。这里的封装不是让 Vue.js 变成一个桌面应用程序，而是使用一个 Web 技术构建交互界面和展示数据的桌面应用程序。为了实现这个目标，我们将使用 Electron.js 这个框架。Electron.js 允许我们用 JavaScript, HTML 和 CSS 创建跨平台的桌面应用程序。
以下是详细的步骤：
1. 安装 Node.js：
首先，你需要安装 Node.js（一个开源的 JavaScript 运行时环境）在你的系统上。访问 Node.js 官网 (https://nodejs.org/) 下载 LTS（长期支持版本）并安装。
2. 创建 Vue.js 项目：
安装完 Node.js 后，打开命令提示符/终端，输入以下命令创建一个新的 Vue.js 项目：
```bash
npx create-vue-app my-vue-app
```
my-vue-app 是你的项目名。你可以根据需要更改它。项目创建完后，进入项目文件夹：
```bash
cd my-vue-app
```
3. 安装 Electron.js：
在项目文件夹中，运行以下命令安装 Electron.js：
```bash
npm install electron electron-builder --save-dev
```
这将安装 Electron.js 及其构建工具。
4. 创建主进程文件：
在项目文件夹下创建一个名为 “electron.js”的文件。这将是您的 Electron 主进程文件。np用以下命令创建：
```bash
touch electron.js
```
在刚刚创建的 electron.js 文件中，输入以下代码：
```javascript
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(`file://${__dirname}/dist/index.html`);
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
5. 修改 package.json 文件：
将以下代码添加到 package.json 文件中的 "scripts" 部分：
```json
"electron": "electron .",
"electron-build": "electron-builder"
```
现在你的 "scripts" 部分看起来应该是这样子：
```json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"electron": "electron .",
"electron-build": "electron-builder"
}
```
6. 测试：
运行以下两个命令分别构建 Vue 项目并启动 Electron 应用来尝试一下。
```bash
npm run build
npm run electron
```
如果一切顺利，您的 Vue.js 应用现在将以桌面应用程序的形式运行。
7. 构建 exe 文件：
为了构建 exe 文件，您需要运行以下命令：
```bash
npm run electron-build
```
构建完成后，会生成一个名为“dist”文件夹，里面包含了适用于 Windows 的可执行文件(.exe)。
8. 结论：
通过这个教程，你学会了如何利用 Vue.js 和 Electron.js 封装一个简单的 Windows 可执行文件（exe）。现在您可以通过 Vue.js 构建精美的界面，并将其封装成桌面应用程序。不仅限于 Windows，您还可以为 macOS 和 Linux 创建桌面应用程序。尝试实验不同的功能，构建一个功能丰富的应用程序，以满足用户需求。
