Vue + Electron 开发环境初始化

本文简要介绍了如何配置和初始化 Vue + Electron 开发环境，涵盖了 Node.js、npm、Yarn、Vue 环境的安装与配置，以及如何创建第一个 Electron 应用。此外，还介绍了如何通过 nvm 管理 Node.js 版本，并使用 nvm 安装指定版本的 Node.js。

1. 安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，内置了 npm 包管理工具。通过 Node.js，JavaScript 可以运行在服务器端。安装 Node.js 后，npm 可用于管理 JavaScript 库和工具。

1.1 安装 nvm 并通过 nvm 安装 Node.js

Node 版本管理器（nvm） 是一个管理和切换不同版本 Node.js 的工具。通过 nvm 安装 Node.js 是推荐的方式，因为它可以灵活地管理多个 Node.js 版本。

1.1.1 安装 nvm

nvm 可以在不同的操作系统上安装。

Windows 系统

1. 访问 nvm-windows GitHub 页面 (opens new window) 下载最新版本的 nvm-setup.zip 安装包。
2. 解压并运行安装程序，按照提示完成安装。

macOS / Linux 系统

对于 macOS 和 Linux 用户，可以通过以下命令使用 curl 或 wget 安装 nvm。

• 使用 curl 安装：

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  

• 使用 wget 安装：

  wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  

安装完成后，重新启动终端，或者通过以下命令使 nvm 配置生效：

source ~/.bashrc   # 对于 bash 用户
source ~/.zshrc    # 对于 zsh 用户

1.1.2 使用 nvm 安装 Node.js

安装完成 nvm 后，可以使用它来安装指定版本的 Node.js。

• 查看可用的 Node.js 版本：

  nvm ls-remote
  

  该命令将列出所有可用的 Node.js 版本。

• 安装特定版本的 Node.js：

  例如，安装 16.15.0 版本：

  nvm install 16.15.0
  

  nvm 会自动设置所安装的版本为默认版本，也可以不指定具体版本号，直接输入 nvm install 16 即可安装指定大版本的最新版本。

• 使用指定版本的 Node.js：

  切换到安装的版本：

  nvm use 16.15.0
  

  该命令将切换到指定版本的 Node.js。

• 查看当前使用的 Node.js 版本：

  nvm current
  

• 列出所有已安装的 Node.js 版本：

  nvm ls
  

1.2 验证 Node.js 安装

安装完成后，可以使用以下命令验证 Node.js 和 npm 是否正确安装：

node -v
npm -v

此命令将显示当前安装的 Node.js 版本和 npm 版本。

2. 配置 npm 镜像源

npm 是 Node.js 默认的包管理工具，负责安装和管理项目的依赖。

2.1 配置 npm 使用淘宝镜像源

为了提高 npm 包的下载速度，特别是在中国大陆地区，建议使用淘宝镜像源。

• 更改 npm 镜像源为淘宝镜像：

  npm config set registry https://registry.npmmirror.com/
  

2.2 修改 npm 配置文件

npm 的配置文件 .npmrc 存储了 npm 的配置选项。可以手动编辑该文件来更改镜像源或配置其他代理设置。

• 配置文件路径：
  • Windows：C:\Users\<用户名>\.npmrc
  • Linux/macOS：~/.npmrc

2.3 配置网络代理

npm 支持通过 .npmrc 文件配置 SOCKS5 或 HTTP 代理。

• 配置 SOCKS5 代理：

  proxy=socks5://127.0.0.1:1080
  https-proxy=socks5://127.0.0.1:1080
  

• 配置 HTTP 代理：

  proxy=http://127.0.0.1:8080
  https-proxy=http://127.0.0.1:8080
  

3. 安装 Yarn

Yarn 是一个替代 npm 的 JavaScript 包管理工具，旨在提高安装速度并提供更可靠的包锁机制。npm 和 Yarn 二选一即可。

3.1 安装 Yarn

通过 npm 安装 Yarn：

npm install -g yarn

3.2 配置 Yarn 使用淘宝镜像源

与 npm 一样，可以将 Yarn 的镜像源更改为淘宝镜像，以提高下载速度。

• 更改 Yarn 镜像源为淘宝镜像：

  yarn config set registry https://registry.npmmirror.com/
  

3.3 修改 Yarn 配置文件

Yarn 的配置文件 .yarnrc 存储了 Yarn 的配置信息，可以手动编辑该文件来修改镜像源或设置代理。

• 配置文件路径：
  • Windows：C:\Users\<用户名>\.yarnrc
  • Linux/macOS：~/.yarnrc

3.4 配置网络代理

Yarn 支持通过 .yarnrc 文件配置 SOCKS5 或 HTTP 代理。

• 配置 SOCKS5 代理：

  proxy "socks5://127.0.0.1:1080"
  https-proxy "socks5://127.0.0.1:1080"
  

• 配置 HTTP 代理：

  proxy "http://127.0.0.1:8080"
  https-proxy "http://127.0.0.1:8080"
  

4. 初始化 Vue 环境

Vue.js 是一个用于构建用户界面的渐进式框架。通过 Vue CLI，可以方便地创建和管理 Vue 项目。

4.1 安装 Vue CLI

使用 npm 或 Yarn 全局安装 Vue CLI：

npm install -g @vue/cli

# 或者
yarn global add @vue/cli

4.2 创建 Vue 项目

使用 Vue CLI 创建新项目：

vue create my-project

# 如果在当前目录下直接创建则执行
vue create .

根据提示选择默认配置或自定义配置，完成项目创建。此处注意项命名规则，不允许使用大写字母

4.3 启动 Vue 项目

进入项目目录并启动开发服务器：

cd my-project
npm run serve

# 或者使用 yarn
yarn serve

此时，Vue 应用将在 http://localhost:8080 启动，可以在浏览器中访问。

5. 创建第一个 Electron 应用（Hello World）

Electron 是一个用于构建跨平台桌面应用的框架，基于 Chromium 和 Node.js。

5.1 安装 Electron

通过 npm 安装 Electron：

npm install electron --save-dev

# 或者使用 yarn
yarn add electron --dev

5.2 创建 Electron 应用

在 src 文件夹创建 electron-main.js 作为 Electron 应用的入口文件：

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

let win

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

  win.loadURL('http://localhost:8080')  // Vue 应用地址
}

app.whenReady().then(createWindow)

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

5.3 配置 Electron 启动命令

在 package.json 中指定启动文件，并添加 Electron 启动命令：

"main" : "src/electron_main.js", 
"scripts": {
  "serve": "vue-cli-service serve",
  "electron": "electron ."
}

5.4 启动应用

首先启动 Vue 开发服务器，可以通过浏览器访问 Vue 页面：

npm run serve

# 或者使用 yarn
yarn serve

在 Vue 开发服务器启动的情况下，再启动 Electron 应用：

npm run electron

# 或者使用 yarn
yarn electron

此时，应该能够看到一个 Electron 窗口加载 Vue 应用。

注意事项

• Node.js 版本兼容性：Electron 对 Node.js 版本有兼容性要求，通常不支持 Node.js 18 版本。为了避免兼容性问题，建议使用 Node.js 17.x 或更低版本；
• 因为在构建 electron 时还会访问 github 库，所以在未配置代理的情况下，无论是否换源，都无法安装成功，所以构建 electron 时建议配置代理服务器；
• 首次构建 vue 项目会询问使用 npm 还是 yarn，后续再次构建则不会提示，使用上次的默认值，如要重新选择，则删除 user 目录下的 .vuerc 文件即可。

6. Vue + Electron 项目中的关键文件及作用

6.1 main.js

main.js 用来启动 Vue 应用并配置一些全局的设置，比如插件注册、全局组件的引入、路由配置、状态管理等。

6.1 electron-main.js

electron-main.js 是 Electron 应用的主进程文件，负责创建浏览器窗口并加载应用。通常在该文件中配置 Electron 的启动参数、窗口设置等。

6.2 index.html

index.html 是 Vue 应用的入口文件，Electron 会加载此文件并呈现应用界面。

6.3 package.json

package.json 用于管理项目的依赖、脚本命令等。在 Vue + Electron 项目中，package.json 文件包含了 Vue 和 Electron 的配置，并定义了启动脚本。