electron 学习笔记（二）—— electron-vue

electron学习记录

第一章 基础知识点
第二章 electron-vue

---

---

一、electron-vue项目搭建

[electron-vue]是用vue-cli+electron框架搭建的项目架子。可帮助前端开发者，快速上手学习electron

官网地址
根据官网步骤搭建即可：

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

注意点：
electron-vue项目推出时间较早，似乎不再维护，代码更新是一年前。electron框架版本更新比较频繁，最新的都10以上了，electron-vue是基于electron2, vue-cli 2.x的版本。仅供入门学习。

二、启动常见错误

1.process is not defined

在index.ejs中用到了【process】变量：

解决方案

在[.electron-vue/webpack.web.config.js] 和[.electron-vue/webpack.renderer.config.js]中文件中的HtmlWebpackPlugin中配置process

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,   // 配置process
        };
      },
     ...
    }),