electron vue3 项目搭建

一.vue项目搭建

安装electron 需要搭建vue项目，这里用的vue3项目。

1.安装 下载 node 这里用的16版本

https://nodejs.org/zh-cn/

2.设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

3.安装 vue-cli

npm install -g @vue/cli

4.创建vue项目

vue create project_name

选择vue3 版本 ，history路由模式，也可以自定义选择，根据实际情况操作选择即可，然后运行

npm run serve

在浏览器输入对应的网址就可以看到界面啦http://localhost:8080/
然后进行下一步操作

二、electron在vue3原基础上安装

1、直接添加electron-build集成插件，选择最新版本，目前13.0.0

vue add electron-builder

你会发现在原来的基础目录有些变化。

运行

npm run electron:serve

打包

npm run electron:build

首次运行的时候会比较慢，是因为项目中有个检查接口访问外网不通，所以会有一些卡顿，后面的话删掉就可以了，具体细节可以看下篇的项目优化。