Electron（一）起步

cli3.0

npm install -g @vue/cli

查看版本

vue -v

增加cli2.0

npm install -g @vue/cli-init

现在，您需要安装electron。我们推荐的安装方法是把它作为您 app 中的开发依赖项，这使您可以在不同的 app 中使用不同的 Electron 版本。在您的app所在文件夹中运行下面的命令：

npm install --save-dev electron@2.0.2

npm install --save-dev electron-packager

package.json

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager . myApp --win --out ../myApp --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"
  },
  "dependencies": {
    "electron": "^7.1.1",
    "electron-packager": "^14.1.0"
  }
}

packer解释

“.”：需要打包的应用目录（即当前目录），

“myApp”：应用名称，

“--win”：打包平台（以Windows为例），

“--out ../myApp”：输出目录，

“--arch=64”：64位，

“--app-version=0.0.1”：应用版本，

“--electron-version=2.0.0”：electron版本

main.js

const {app, BrowserWindow} = require('electron');
const path = require('path');

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win;

function createWindow() {
    // 创建浏览器窗口。
    win = new BrowserWindow({
         800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    // 加载index.html文件
    // win.loadFile('index.html')
    // win.loadURL(`file://${__dirname}/index.html`);
    const modelPath = path.join("file://", __dirname, "index.html");
    // 去掉菜单栏
    win.setMenu(null)
    win.loadURL(modelPath);
    // 打开开发者工具
    // win.webContents.openDevTools()

    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = 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 (win === null) {
        createWindow()
    }
});

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

设置跨域请求

  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
     1000,
    webPreferences: {webSecurity: false},
  })

webSecurity是什么意思呢？顾名思义，他是设置web安全性，如果参数设置为 false，它将禁用相同地方的规则 (通常测试服), 并且如果有2个非用户设置的参数，就设置 allowDisplayingInsecureContent 和 allowRunningInsecureContent的值为true。（webSecurity的默认值为true）

allowDisplayingInsecureContent表示是否允许一个使用 https的界面来展示由 http URLs 传过来的资源。默认false。
allowRunningInsecureContent表示是否允许一个使用 https的界面来渲染由 http URLs 提交的html，css，javascript。默认为 false。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

使用electron-vue

https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

1、将electron-vue项目先下载下来
electron-vue国内码云地址，直接下载到本地。
https://gitee.com/mirrors/electron-vue
或通过git直接克隆到本地 git clone https://gitee.com/mirrors/electron-vue.git

2、安装样板代码
H:electronelectron-vue 是我下载下来后的项目路径(根据自己下载的位置自行调整)
之后根据如下代码，即可快速构建项目模板。
vue init H:electronelectron-vue myapp

问题：

yarn 错误There appears to be trouble with your network connection. Retrying...

yarn config set registry https://registry.npm.taobao.org

对node-sass镜像源进行设置

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

如果提示没有zip electron-v2.0.9-win32-x64.zip，找到 C:Users onleAppDataLocalelectronCache

https://github.com/electron/electron/releases/download/v2.0.9/electron-v2.0.9-win32-x64.zip

下载后放到目录里面