用electron+vue写一个悬浮窗天气挂件

electron介绍

基于node.js chrominum v8引擎的一项跨平台工具,使用Javascript语言来编写代码,让JS通吃桌面客户端,APP应用,Web端。码农界里大名鼎鼎的VS Code编辑器,就是基于这个开发的。它的同类工具还有NW.js,基于它开发的应用有,阿里钉钉客户端,微信开发者工具。自己开下脑洞,开发一个新浪博客客户端也不是不可以。

安装环境依赖

没有安装node.js环境的,需要先安装node.js,https://nodejs.org/

  1. 全局安装electron

npm install electron -g

2.全局安装vue-cli

npm install vue-cli

初始化工程

vue init simulatedgreg/electron-vue my-project

控制台出现downloading template,在等上几分钟之后,回答初始化要的配置就好了。

? Application Name my-project
? Application Id net.it577.weather
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? No<

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
1. 首先需要安装Node.js和npm。 2. 创建一个空文件夹,并进入文件夹。 3. 在命令行中输入以下命令,初始化一个新的npm项目: ``` npm init -y ``` 4. 安装electron: ``` npm install electron --save-dev ``` 5. 安装vue: ``` npm install vue ``` 6. 安装vue-cli: ``` npm install -g @vue/cli ``` 7. 创建一个新的Vue项目: ``` vue create my-project ``` 8. 进入Vue项目的根目录,安装必要的依赖: ``` cd my-project npm install --save-dev electron-builder vue-cli-plugin-electron-builder ``` 9. 创建一个新的electron主进程文件: ``` mkdir src/electron touch src/electron/index.js ``` 10. 在`src/electron/index.js`中添加以下内容: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, } }) // 加载应用的 index.html win.loadFile('dist/index.html') // 打开开发者工具 win.webContents.openDevTools() } // Electron 会在初始化完成并准备好创建浏览器口时调用这个方法 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(createWindow) // 当全部口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持活动状态。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上,当单击 dock 图标并且没有其他口打开时, // 通常在应用程序中重新创建一个口。 if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` 11. 修改`package.json`文件,添加以下内容: ```json "main": "src/electron/index.js", "scripts": { "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" }, "build": { "productName": "My App", "appId": "com.example.myapp", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "src/electron/**/*" ], "extends": null, "extraResources": null }, "devDependencies": { "electron": "^13.2.1", "electron-builder": "^22.11.7", "vue-cli-plugin-electron-builder": "^2.0.0-rc.6" } ``` 12. 在命令行中运行以下命令,启动electron应用: ``` npm run electron:serve ``` 13. 如果一切正常,electron应用将会启动并显示出Vue应用的界面。现在可以开始开发Electron + Vue应用了。若要打包应用,请运行以下命令: ``` npm run electron:build ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值