## **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 }), ~~~