Electron+Vue项目搭建


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





举报

© 著作权归作者所有


0