electron + vue 协作开发桌面端项目

自从eclectron出现,到现在已经很久了,在这里,历史就不谈了,直接上干货。

本人也是刚开始接触electron,只是对前端也能实现桌面开发有点好奇,就玩了一下,刚开始看electron的文档一脸懵,耐着性子看完了。

着手写一个简单的项目,如果你着手写一个electron的项目,只需要具备两个条件,第一个你仔细阅读了electron

的文档,并有了一定的了解和看法,第二你的js很熟练。所以相对于实现一个electron的项目而言,难的并不是实现,而是实现  的过程,还有electron项目的打包,这中间会有各种坑,特别对于我们这些刚接触electron的人来说。

这次介绍一个第三方库electron-vue,看名字就知道了,他是electron和vue的结合体,很轻松的就可以把你的vue项目转化为桌面项目。文档:https://simulatedgreg.gitbooks.io/electron-vue/content/en/renderer-process.html

下面开始讲解项目的实现过程,不过再讲解之前,需要一些准备工作,当然说到vue,node是必不可少的,还有vue的脚手架vue-cli,这两个安装完毕,就可以开始写项目了。

1.首先创建一个electron-vue的项目

vue init simulatedgreg/electron-vue my-project


我是之前已经创建过这个项目,所以他提示我是否继续创建,不过没什么影响,一路继续就好了,和vue的创建很像。

2.进入项目目录

cd my-project

这里还有一点和vue不太一样,vue在创建的时候就会自动安装依赖,但是electron-vue不会,需要你手动安装依赖

npm i (这里需要说明一下,虽然用cnpm安装会更快,但是这里还是推荐用npm,不然后面可能会出现一些莫名的坑)

安装完成,下方就是electron-vue的目录


.electron-vue:webpack和electron的一些配置

build:项目打包后的文件

src:里面有两个文件夹


      main:看过electron的都知道electron项目里有一个main.js的文件,这个文件和main.js是同样的功能

      renderer:是vue的代码文件,按vue的实现方法写就可以,在这里尽情的写vue代码吧

package.json:这个就不需要我多说了吧(会vue的都知道)

3. 执行看一下效果

npm run dev


ok,完美显示

4.试试打包,毕竟桌面端,怎么可以没有.exe文件

electron-vue有内置的打包,你只需要执行 npm run build就可以了

每次重新打包前,执行一下npm run build:clean 清楚之前打包的代码,在执行打包。

开始打包

不报错,就说明打包完成,点击build文件下的.exe文件,看下效果


可以了,下面去放心实现你的桌面项目吧。

我也是刚接触electron,大家一起交流,有问题欢迎指出。

猜你喜欢

转载自blog.csdn.net/mnhn456/article/details/80683418