# :-: Electron # :-: vscode 和nativefier的区别： 可以使用Electron API 不再是套壳那么简单 可以调用windows API 1、安装 ``` npm install electron \--save-dev --save-exact ``` 2、推荐vue-electron ``` vue init simulatedgreg/electron-vue my-project ``` 3、推荐yarn 4、构建工具：[`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools) 5、自带以下插件 * [axios](https://github.com/mzabriskie/axios)(网络请求) * [vue-electron](https://github.com/SimulatedGREG/vue-electron)(将 electron API 附加到 Vue 对象) * [vue-router](https://github.com/vuejs/vue-router)(单页应用路由) * [vuex](https://github.com/vuejs/vuex)(flux 启发的应用程序架构) 6、vue-electron 将 electron API 附加到 Vue 对象的 vue 插件，使所有组件可以访问它们。 ###### 一个可以轻松通过`this.$electron`访问 electron API 的简单的`vue`插件，不再需要将`electron`导入到每一个组件中。 ７、目录 ``` demo ├── package.json ├── main.js（index.js） └── index.html ``` 初始化mainjs ``` const electron = require('electron'); const { app, // 控制应用生命周期的模块 BrowserWindow, // 创建原生浏览器窗口的模块 } = electron; // 保持一个对于 window 对象的全局引用，如果不这样做， // 当 JavaScript 对象被垃圾回收， window 会被自动地关闭 let mainWindow; function createWindow() { // 创建浏览器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加载应用的 index.html。 // 这里使用的是 file 协议，加载当前目录下的 index.html 文件。 // 也可以使用 http 协议，如 mainWindow.loadURL('http://nodejh.com')。 mainWindow.loadURL(`file://${__dirname}/index.html`); // 启用开发工具。 mainWindow.webContents.openDevTools(); // 当 window 被关闭，这个事件会被触发。 mainWindow.on('closed', () => { // 取消引用 window 对象，如果你的应用支持多窗口的话， // 通常会把多个 window 对象存放在一个数组里面， // 与此同时，你应该删除相应的元素。 mainWindow = null; }); } // Electron 会在初始化后并准备 // 创建浏览器窗口时，调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', createWindow); // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 在 macOS 上，当点击 dock 图标并且该应用没有打开的窗口时， // 绝大部分应用会重新创建一个窗口。 if (mainWindow === null) { createWindow(); } }); ``` ***** :-: 切记一个点！ 不要使用任何CND线上加载的资源