electron+vue建立桌面级应用入门这一篇文章就够了

何处锦绣不灰堆 2020-11-13 12:56:26
vue electron 桌面 建立 electron+vue


写在前面

写这篇文章的时候已经是深夜十二点了,但是还是想写下来,因为我这个人有个毛病,就是当我发现一个新的好用的东西的时候常常会激动的睡不着觉,不记录下来根本睡不着,而且程序员晚睡不应该是标配吗?废话说了几句,说一下今天的主角,electron

做个自我介绍:

大家好,我叫electron,我是一个穿着Web衣服,拥有着js思想的精简版的Chromium浏览器,当你使用我的时候,你可以使用我的思想也就是使用js调用丰富的原生api来创造桌面应用,你可以可以把我看作是nodejs的变异体,只是我专注的是桌面应用,而nodejs专注的是web服务端。

怎么使用我?

使用我之前首先要明白我本质上是什么,如果经常使用nodejs的人,那么恭喜你,你在使用我的时候将会十分的得心应手,因为本质上来说,我就是一个nodejs的应用程序,只不过应用的入口文件是package.json文件,我的样子是这样的:

your-app/
├── package.json
├── main.js
└── index.html
  • 这里不让他说了,我这里简单的说一下,就是关于怎么创建一个package.json文件,这个我之前的文章不止一次的说过,包括之前写的nodejs的文章中也说过一次,我们可以直接npm init 就可以了,下面让他接着说

安装我

  • 您可以选择全局安装我,也可以选择项目中具体使用的时候安装我,这个看您个人的需求,具体怎么区分,相信我的主人已经在别的文章中提到过,这里全局安装:
npm install --save-dev electron

如果安装的过程失败了,有两个原因,第一个是网速不行,第二个是你使用的mac没权限,解决办法如下:

  • 安装淘宝镜像并最高权限使用:
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

如下图:
在这里插入图片描述

我怎么和vue配合

下面让我的主人直接写一个完整的例子给大家,相信大家看的更加的清楚:

先看一下运行的效果:

效果图
ok这个是最终呈现的一个效果,当然这里没有展示动态的, 需要源码的可以直接到我的github里面clone,项目源码,这里不做gif了,着实不好整,QQ的gif生成器我已经不想吐槽了,具体什么效果呢?这个是一个帖子上面别人出的题目看,就是说利用vue的双向绑定的原理实现一个卡片的基本功能,下面输入什么,上面就展示什么,不符合规则的,还回复到之前的信息,具体你们下载下来运行就可以了。下面我分几步给大家说一下怎么实现这个html在electron下面进行改为桌面级的应用。

新建vue项目

这里直接给大家看我新建好的项目吧:
项目描述
就是一个非常简单的vue项目,怎么新建vue项目?好吧,简单的说一下:(不想新建项目的直接clone我的项目运行就可以了。)

  • 安装nodejs 下载即可
  • 安装vue脚手架 :npm install vue-cli -g
  • 新建项目:vue init webpack ”项目名称“
  • 安装插件:npm install
  • 运行:npm run dev

觉得写的太过简单的,可以直接看我之前的帖子:安装nodejsvue项目搭建,这里就不占篇幅了。

打包vue项目
  • 在我们写好的项目文件夹中运行
 npm run build

结束以后在我们的项目中多出来一个dist的文件包,那么这个就是我们打包结束的文件,我们可以直接运行里面index.html文件。

新建main.js
  • 在我们dist文件夹下面我们新建一个main.js,里面我们引入electron
const {
app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {

width:800,
height:600
};//窗口配置程序运行窗口的大小
function createWindow(){

win = new BrowserWindow(windowConfig);//创建一个窗口
win.loadURL(`file://${
__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
//win.webContents.openDevTools(); //开启调试工具
win.on('close',() => {

//回收BrowserWindow对象
win = null;
});
win.on('resize',() => {

win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {

app.quit();
});
app.on('activate',() => {

if(win == null){

createWindow();
}
});
新建package.json
  • 同样的位置,我们新建一个package.json文件
{

"name": "clearlove",
"productName": "card",
"author": "clearlove",
"version": "1.0.0",
"main": "main.js",
"description": "csdndemo",
"scripts": {

"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {

"electronVersion": "1.8.4",
"win": {

"requestedExecutionLevel": "highestAvailable",
"target": [
{

"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "clearlove",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {

"artifactName": "demo-${version}-${arch}.${ext}"
}
},
"dependencies": {

"core-js": "^2.4.1",
"electron-builder": "^20.44.4",
"electron-package": "^0.1.0",
"electron-updater": "^2.22.1"
}
}
运行electron项目
  • 最后我们直接运行该项目:
electron .

到此vue+electron的结合使用基本就结束了,效果就是前面看到的那样,至于说怎么打包成exe文件,下篇文章我们接着说,总之这个技术还是比较实用的,我这篇文章的篇幅不长,我看过别人写的,也总结了一下,归纳了别人的优点,但是很多都是通篇长论,我觉得意义不大, 怎么新建一个vue项目这样的东西一带而过我觉得很合适,毕竟文章真正的重点不是这里。

说明:

  • 如果您是直接clone我的源码,直接打包的话,会出现空白页面的情况,解决办法如下:
    在这里插入图片描述
  • 出现图片不出现的情况,解决办法如下:
    在这里插入图片描述

如果还有别的问题,可以直接左侧微信联系我,感谢阅读!

版权声明
本文为[何处锦绣不灰堆]所创,转载请带上原文链接,感谢
https://clearlove.blog.csdn.net/article/details/104242905

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple