## **Electron 介绍** Electron是一个基于node.js的跨平台桌面应用 它最大的有点在于可以使用JavaScript 和 HTML来构建跨平台的桌面应用。 我们常见的文本编辑器 atom，vscode就是基于Electron开发的。  ## **Electron-vue** 该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用`vue-cli`作为脚手架工具，加上拥有`vue-loader`的`webpack`、`electron-packager`或是`electron-builder`，以及一些最常用的插件，如`vue-router`、`vuex`等等。 ## **安装** 本项目需要使用`node@^7`或更高版本。electron-vue 官方推荐yarn作为软件包管理器，因为它可以更好地处理依赖关系，并可以使用`yarn clean`帮助减少最后构建文件的大小。 ***** ~~~bash # 安装yarn，切换淘宝源 npm install --global yarn yarn config set registry https://registry.npm.taobao.org # 安装 vue-cli yarn global add vue-cli # 或者 npm install -g vue-cli # 初始化脚手架样板代码（project-name是项目名称，你可以任意更换） # 最好不要选择eslint vue init simulatedgreg/electron-vue project-name # 切换到项目目录下，安装依赖 cd project-name yarn # 或者 npm install # 运行你的程序 yarn run dev # 或者 npm run dev ~~~ 运行结果如下:  ## **目录结构介绍**  .electron-vue是Webpack 配置 build文件里有一个icons存放图标的文件，打包后的文件也在这个目录下 dist文件夹不用管 src/main是主线程 src/renderer是渲染线程,里面的结构就是正常的vue src/index.ejs就是vue-cli的index.html static文件存放静态文件 package.json 定义了这个项目所需要的各种模块，以及项目的配置信息 ## **用户注意事项** **可能遇到的问题：** 1.启动Electron-vue报错Webpack ReferenceError:process is not defined **解决方案：** 修改.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin，添加templateParameters，修改后如下： ~~~css 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 }), ~~~