使用electron-vue框架快速开发桌面应用_JavaScript_全易-CSDN博客

安宇雨 - 随手采集
2020-02-28 11:36:36
随手采集
0000-未整理-等待研究

使用文档：https://simulatedgreg.gitbooks.io/electron-vue/content/en/renderer-process.html

在这里插入图片描述

搭建一个electron-vue的项目

打开cmd进入你要创建桌面项目的目录，然后执行命令：vue init simulatedgreg/electron-vue demo
如下：

Microsoft Windows [版本 10.0.17763.194]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\Administrator>e:
E:\>cd E:\My files\54651
E:\My files\54651>vue init simulatedgreg/electron-vue demo

然后一路回车，搭建完是这样的：

Microsoft Windows [版本 10.0.17763.194]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\Administrator>e:
E:\>cd E:\My files\54651
E:\My files\54651>vue init simulatedgreg/electron-vue demo
? Application Name my-project
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-el
ectron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? Yes
? Set up end-to-end testing with Spectron + Mocha? Yes
? What build tool would you like to use? builder
? author quanyi <quany@yunker.com.cn>

   vue-cli · Generated "demo".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

  $ cd my-project
  $ yarn (or `npm install`)
  $ yarn run dev (or `npm run dev`)


E:\My files\54651>|

此时看看你搭建的目录：
在这里插入图片描述

进入搭建好的这个目录，执行npm install安装vue的依赖文件

E:\My files\54651>cd demo
E:\My files\54651\demo>npm install

完事看看你的目录是不是多了个node_modules的文件夹呢？
在这里插入图片描述

至此已经搭建完事了，可以执行npm run dev启动看看效果了：

E:\My files\54651\demo>npm run dev

执行npm run dev后很快就会自动跳出你搭建的程序页面：
在这里插入图片描述
在这一步骤当中你可以在src里的renderer文件夹里进行完善编辑你的程序页面。
在你改代码后保存完代码，页面时自动刷新的：

和浏览器一样摁F12可以打开调试面板

完善完毕后打包就会形成 .exe的启动文件

终止批处理操作吗(Y/N)? y                                    //因为刚才的程序还在启动，所以我终止下再打包。

E:\My files\54651\my-project>npm run build                    //特别说明一下这里：如果是第二次以后的打包一定要执行npm run build:clear后再执行npm run build

E:\My files\54651\my-project>|

.exe的启动文件就在build文件夹里，双击它，就会安装并启动
在这里插入图片描述