Electron学习一：Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js的不同_electron和vue的区别_壹零Boy的博客

JavaScript语言

JavaScript是解释性脚本语言，具备动态性、弱类型、基于原型(面向对象）等特点；

JavaScript重要历史，从历史看语言功能和设计初衷：

1995年，网景在在浏览器Netscape中首次实现，目的是实现网页前端动态效果；随后微软等浏览器厂商均采用模仿实现;

1996，网景提交标准组织ECMA,1997年发布ECMA-262

结论这些技术，成就JavaScript大法，全面实现JavaScript语言在Web、桌面、移动、服务器等领域应用。JavaScript是一种脚本编程语言，常用在浏览器前端页面动态效果实现，而Node.js提供一整套服务器端JavaScript运行时环境，使JavaScript语言可以实现类似PHP的服务器端编程。Electron是跨平台的桌面应用开发框架，编程语言是JavaS

前端桌面应用-01.自定义组件模块移动最近公司准备开发一个桌面应用，前端技术选型是 electron + vue ，进行开发。其实整个项目是以 vue 进行开发，主要功能都是在 vue 上面，而 electron 就是一个壳子，将 vue 项目包起来，然后打包生成一个应用。模块移动功能实现基于整个项目而言，我们整体页面架构如下，绿色框为页面拖动的区域，紫色框为弹出框。我们将要对紫色框进行编写拖拽效果。 1.原理分析 / 通过 directive 进行创建 v-drop 命令行，通过绑定到DOM元素上去，获取

1.什么是 Electron Electron 可以让你使用纯 JavaScript 调用丰富的原生 API 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io. js 的一个变体。这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反， Electron 使用 web 页面作为它的 GUI，所以你能把它看作成.

1.现如今前端框架数不胜数，尤其是 angular 、 vue 吸引一大批前端开发者，在这个高新技术快速崛起的时代，自然少不了各种框架的结合使用。接下来是介绍 electron + vue 的结合使用。 2. Electron 是什么？对于我来说 Electron 相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持 node . js ，可以使用n...

``` javascript const { app, BrowserWindow } = require(' electron ') const NeteaseMusic = require('netease-music-sdk') let api = null app.on('ready', () => { // 创建 BrowserWindow 窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { node Integration: true // 在窗口中加载 Vue 应用 win.loadFile('index.html') // 创建 NeteaseMusic API 实例 api = new NeteaseMusic() // 向 Vue 应用中注入 API 对象 win.webContents.on('did-finish-load', () => { win.webContents.execute JavaScript (` window.api = ${ JS ON.stringify(api)} 在上面的代码中，我们在 Electron 的主进程中创建了一个 `NeteaseMusic` 的实例，并且将它注入到了 Vue 应用中。在 Vue 应用中，我们可以通过 `window.api` 获取到这个 API 对象，并且调用其中的方法： ```html <template> <div class="container"> <h1>网易云音乐 API 示例</h1> <button @click="login">登录</button> <button @click="logout">退出</button> </template> <script> export default { methods: { login() { window.api.login('username', 'password').then(result => { console.log(result) logout() { window.api.logout().then(result => { console.log(result) </script> 在上面的代码中，我们通过 `window.api.login` 和 `window.api.logout` 调用了 `NeteaseMusic` 实例中的方法。最后，我们需要通过 ` electron -builder` 将 Electron 应用打包成可执行文件。在 `package. js on` 文件中，加入以下配置： ``` js on "build": { "productName": "My App", "appId": "com.example.myapp", "directories": { "output": "build" "files": [ "dist/**/*", " node _modules/netease-music-sdk/**/*" "extraResources": [ "from": "public", "to": "." "mac": { "category": "public.app-category.music", "icon": "public/icon.icns" "win": { "target": "nsis", "icon": "public/icon.ico" "linux": { "target": "AppImage", "icon": "public/icon.png" 在上面的配置中，我们将 ` node _modules/netease-music-sdk` 目录下的文件打包进了可执行文件中。最后，运行以下命令进行打包： ```bash npm run build 打包完成后，在 `build` 目录中就可以找到生成的可执行文件了。