Vue2 + Electron搭建项目

electron的打包工具有很多，这里使用目前最流行的 electron-builder 打包并实现自动更新；

1.0> 安装nodejs和yarn，并确认 npm 和 yarn 源为国内镜像：

a>. 安装nodejs

b>. 安装yarn

npm install -g yarn

c>. 确认镜像

npm config get registry
yarn config get registry

2.0>. 添加electron镜像源（Mac/Centos）

修改 /etc/bashrc 文件

sudo vi /etc/bashrc
wq!

在 /etc/bashrc 文件中添加如下设置：

export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

wq! 修改保存之后，行一下 source命令使变量及时生效

source /etc/bashrc

注：Mac下，如何本机安装了zsh终端，则需要将信息写入到~/.zshrc， 并执行 source ~/.zshrc

2.1>. 添加electron镜像源（windows）

打开文件

C:\Users\YANGWW\.npmrc

添加如下内容：

registry=https://registry.npm.taobao.org
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

3.0>. 创建 Vue-cli 项目 - 确认vue版本

// 务必安装最新版Vue
vue -V

3.1>. 创建 Vue-cli 项目 - 创建

vue create electron-vue-helloworld

4.0>. 安装 electron-builder

vue add electron-builder

安装完成后会在src目录下生成background.js，并在 package.json 文件中修改main为"main": "background.js"

此步会添加 vue-cli-plugin-electron-builder 插件，此插件将electron-builder和vue结合；

5.0>. 运行程序

npm run electron:serve

详见：https://zhuanlan.zhihu.com/p/107590214

https://zhuanlan.zhihu.com/p/75764907

所有使用：https://zhuanlan.zhihu.com/c_1213109295430131712