用Electron + vue 开发桌面应用

vue-cli3.0+electron的文章已更新 

使用vue-cli-plugin-electron-builder开发vue-cli3.0+Electron桌面开发应用

以及对应的生成安装程序的文章

在vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的两种方法

Electron 开发桌面应用系列教程持续更新中,采用vue/cli@3.0 + electron-builder + element-ui

vue-cli@3 + electron开发一款本地小说阅读器(一)

vue-cli@3 + electron开发一款本地小说阅读器(二)

vue-cli@3 + electron开发一款本地小说阅读器(三)

vue-cli@3 + electron开发一款本地小说阅读器(四)


第一步 检查安装环境,自行百度

环境:

系统:window

node: v10.16.0

git:安装

第二步 安装electron-forge

npm i -g electron-forge

注意:为了加快安装速度,npm切换成淘宝镜像,自行百度。

第三步 初始化electron-vue项目

进入你要安装项目的所在文件夹,运行

electron-forge init my-electron-vue --template=vue

此处需要一段时间。。。

此处有坑:

如果出现如下界面

it looks like you are missing some dependencies you need to get Electron running.

Make sure you have git installed and Node.js version 6.0.0+

解决方案:

1、进入你要安装项目的所在文件夹,点击鼠标右键,选择Git Bash Here


2、在打开的命令行工具里,重新执行代码

electron-forge init my-electron-vue --template=vue


3、回车,然后等运行完毕,完成初始化的界面如下:


第四步:运行

进入项目目录,运行

cd my-electron-vue

electron-forge start

效果如下:


启动后的应用如下图:


第五步:修改内容测试一下

打开代码编辑器,目录结构如下:


修改一下index.html内容:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>

    <div id="test"></div>

  </body>

  <script>

  import Vuefrom 'vue';

  import Testfrom './test';

  const app =new Vue(Test).$mount('#test');

  app.text ="World!";

  </script>

</html>

保存后,会发现应用桌面会自动渲染:



注意:此时你的命令行应该出现如下界面:


具体的问题我也不知道,如果有人知道可以留言,简单的理解就是现在没有问题,以后就不好说了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容