Electron+Vue手动搭建(非electron-vue方式)

        以往的electron-vue框架搭建比较便捷，但是在打包时会出现一些报错。不知道是不是我的问题，所以我这次想手动搭建，使用electron比较新的版本+Vue2.x版本(由于3.x还没有着手在项目中实践故没有用)。本次博客不同以往，现在网上对electron的资料偏少，我想用更多的文字+代码把搭建描述清楚。

废话不说先上环境（nodejs版本16.13.0目前最新版本16.14.0，npm版本8.1.0）

 环境搭建

        我们希望使用yarn进行依赖管理，所以我先进行了yarn的安装

npm install -g yarn
yarn --version
# 我的版本是：1.22.17

        yarn 安装后我们再使用npm进行Vue的脚手架安装

npm install -g @vue/cli
vue --version
# 我的版本是：@vue/cli 4.5.15
# 为了使用最新的vue脚手架我通过yarn global add @vue/cli 将脚手架更新到了@vue/cli@5.0.1
yarn global add @vue/cli
# 接下来我再次进行vue --version
vue --version
# 我的版本是：@vue/cli 5.0.1

        以上这几步骤如果之前做过前端开发应该都有使用过，下面开始咱们的项目搭建

创建Vue工程项目

vue create <projectName>
#<projectName>是你的项目名称

        回车后弹出以下内容：

Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  
# 由于我希望使用Vue2.x所以我选择了第二项 Default ([Vue 2] babel, eslint)
# 这里使用上下键回车即可选择

        结束后弹出内容：

Vue CLI v5.0.1
✨  Creating project in /Users/jackmeng/Desktop/<projectName>.  #这里<projectName>是你的项目名称
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 18.44s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 5.75s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project api_recorder.
👉  Get started with the following commands:

 $ cd <projectName>.  #这里<projectName>是你的项目名称
 $ yarn serve

        为了验证vue的创建成功我们可以先进入项目目录

cd <projectName> #这里<projectName>是你的项目名称
ls
#以下是返回内容
#README.md	jsconfig.json	package.json	src		yarn.lock
#babel.config.js	node_modules	public		vue.config.js
yarn serve
#以下是返回内容
#DONE  Compiled successfully in 5114ms                              上午10:24:50
#
#
#  App running at:
#  - Local:   http://localhost:8080/
#  - Network: http://192.168.43.237:8080/
#
#  Note that the development build is not optimized.
#  To create a production build, run yarn build.

        在这里启动后，通过http://localhost:8080我在chrome上可以看到vue的经典页面。这里证明vue的环境已经搭建完成。

使用electron-builder插件

        如果按照上面的步骤我们应该就在你的项目目录下，若不在你的项目目录下请手动cd到你的项目目录下

cd <projectName> #这里<projectName>是你的项目名称

        接下来开始在目录下引入插件

vue add electron-builder

        在依赖安装成功后，弹出以下内容

? Choose Electron Version (Use arrow keys)
  ^11.0.0
  ^12.0.0
❯ ^13.0.0
# 由于我就是本着最新版本的electron去的，于是我先登录了electron的官网(https://www.electronjs.org/)
# 我看electron的最高版本是17.x bulider返回的版本是13.0.0 在官网显示13.0.0版本是9个月前的版本
# 最终觉得不换了(其实是不知道electron的版本规则，13.x的最新版本是4周前，17.x的最新版本是4天前。这几周怎么更新了这么多版本？)

        选择后进行依赖的安装,安装成功后检查package.json文件

vi package.json
#以下仅为package.json的部分内容
#scripts": {
#    "serve": "vue-cli-service serve",
#    "build": "vue-cli-service build",
#    "lint": "vue-cli-service lint",
#    "electron:build": "vue-cli-service electron:build",
#    "electron:serve": "vue-cli-service electron:serve",
#    "postinstall": "electron-builder install-app-deps",
#    "postuninstall": "electron-builder install-app-deps"
#  },
# 可以看到script里有electron:serve命令，于是执行了下yarn run electron:serve
yarn run electron:serve

        执行后则展示出：

        以上开发运行已经没问题，接下来我们尝试打包        

yarn run electron:build

        发现返回有报错：(由于报错信息比较长，这里就只取了部分信息)

⨯ Get "https://github.com/electron/electron/releases/download/v13.6.9/electron-v13.6.9-darwin-x64.zip": EOF

#下面包含一个报错
code: 'ERR_ELECTRON_BUILDER_CANNOT_EXECUTE'
#我通过上面的步骤，加上卡顿的时间较长初步判断是由于yarn的源可能链接不上或者链接比较慢导致的

         我通过以上步骤，通过判断初步觉得是源的问题，于是立刻设置了yarn的源

yarn config set registry https://registry.npm.taobao.org
# 返回内容如下：
# yarn config v1.22.17
# success Set "registry" to "https://registry.npm.taobao.org".
# ✨  Done in 0.04s.
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
# 返回内容如下：
# yarn config v1.22.17
# success Set "electron_mirror" to "https://npm.taobao.org/mirrors/electron/".
# ✨  Done in 0.04s.

         再次执行yarn run electron:build

yarn run electron:build

        等待数秒终于完成了build

# 以下为返回的部分
# DONE  Build complete!
#✨  Done in 74.87s.

         由于我是mac，我可以在dist_electron目录下看到dmg文件，打开dmg文件可以看到我们打包的程序。

        由此，electron和vue的手动搭建完成。

        后续可在里面继续集成路由、axios、elementui、iview等等。

        如有问题，希望大佬指正。