什么是Electron?
Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,可以一键生成在Window、Linux、Mac的桌面应用,他隔离了平台之间的差异,抽象出一套通用的接口调用。Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。
简单讲Electron可以使用Web技术让你创建跨平台的桌面应用,而Electron本质则是一个Chromium内核的浏览器,基本上Chrome浏览器能做的事情,你都可以实现。
Electron-Vue-Element-UI全家桶
Electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。Electron-vue很方便的将Vue.js的技术与electron相结合,让我们可以更好的发挥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
}),