本文作者:问几许

vue-electron 脚手架安装及说明

问几许 4年前 ( 2018-05-08 ) 2395 抢沙发
vue-electron 脚手架安装及说明摘要: 最近因为公司需求,在学习用electron开发桌面应用,因为之前一直用vue做项目,然后发现一个融合了vue-cli+electron的一种新的脚手架,省去许多繁琐配置,即vue-...

最近因为公司需求,在学习用electron开发桌面应用,因为之前一直用vue做项目,然后发现一个融合了vue-cli+electron的一种新的脚手架,省去许多繁琐配置,即vue-electron。


接着呢就说明一下安装和使用,首先你的电脑需要安装有nodeJs,并且全局装有vue-cli,如果没有装,就打开shellpower输入:

npm install --global vue-cli

按回车进行全局安装。


1、安装

新建文件夹,cd 到你将要安装的文件夹目录;

vue init simulatedgreg/electron-vue

接下来的步骤跟安装vue-cli很是相似

1395454-e89049d69daf3c4f.png

选择Y或Enter即可


2、npm install

这一步主要是安装依赖,耗时有点久。完毕后项目内多了node_modules 文件夹。

1395454-24c50acca7736784.png


3、npm run dev

1395454-babf40cd26785ecd.png


4、打包

先看看项目package.json文件截图:

1395454-9be82edc72e0ab66.png

scripts内各种打包命令,其中就包括Mac、Windows、Linux三大平台。例如我想在Mac上打包运行,$npm run build:darwin  就会在项目的build文件夹下生成一个应用程序,以此类推,,,$npm run build:win32 等

vue-electron脚手架最大好处就是我们不要在Vue项目里手动配置electron了,极好的融合了Vue-cli+electron ,省去开发者大把时间去配置。

另外不得不说一下,vue-electron主要业务逻辑都放在了src->renderer文件夹内去写,和之前的vue-cli搭建项目可以说是没有任何区别!

文章版权及转载声明

作者:问几许本文地址:https://wenjixu.com/blog/34.html发布于 4年前 ( 2018-05-08 )
文章转载或复制请以超链接形式并注明出处问几许

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,2395人围观)参与讨论

还没有评论,来说两句吧...