什么是Electron?

Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術(shù)創(chuàng)建原生程序的框架，可以一鍵生成在Window、Linux、Mac的桌面應用，他隔離了平臺之間的差異，抽象出一套通用的接口調(diào)用。Electron 基于 Chromium 和 Node.js, 讓你可以使用 HTML, CSS 和 JavaScript 構(gòu)建應用。
簡單講Electron可以使用Web技術(shù)讓你創(chuàng)建跨平臺的桌面應用，而Electron本質(zhì)則是一個Chromium內(nèi)核的瀏覽器，基本上Chrome瀏覽器能做的事情，你都可以實現(xiàn)。

Electron-Vue-Element-UI全家桶

Electron-vue 充分利用 vue-cli 作為腳手架工具，加上擁有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。Electron-vue很方便的將Vue.js的技術(shù)與electron相結(jié)合，讓我們可以更好的發(fā)揮Vue全家桶的加持。

做一個小Demo

爬坑Logs

報錯 Webpack ReferenceError: process is not defined

修改.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin，添加templateParameters，修改后如下：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),