将现有Vue项目改为electron桌面端

零、前言

之前看了看electron-vue,感觉还是存在一些问题的,比如electon的版本特别特别低,不能忍受。且如果你是用vue搭建的项目,最后希望能够打包成桌面端,其实很简单。

一、基本步骤

(1)创建vue项目、并进行开发

vue create vueDemo

(2)突然一天我想打包成桌面程序了

// 进入项目目录
cd vueDemo

// 添加electron相关库
vue add electron-builder

 这时,他也会自动下载electron。

问题处理:如果最后报错说没有下载成功,那么删掉有问题的模块,使用cnpm进行下载。

cnpm install

二、运行

这里面有几行是执行了vue add electron-builder自动添加进来的。

运行vue的web端:

npm run serve

结果:

 

扫描二维码关注公众号,回复: 11449904 查看本文章

我这把vue的首页换掉了,所以是这样子:

 打包vue的web端:

文件列表:

 

运行electron搞的cs端:

npm run electon:serve

 

打包electron搞得exe:需要科学上网哦

npm run electron:build 

文件列表:

 

 四、结束

简单记录了下现有vue项目结合electon制作成cs客户端的方法,不会影响到vue的web端的相关执行,后续研究在此基础上结合electron进行开发。

猜你喜欢

转载自blog.csdn.net/qianlixiaomage/article/details/107070120
今日推荐