Electron + vue 新建项目

最近想学一下桌面端的开发，所以选择使用 electron + vue 框架
话不多说直接上代码

1 安装node环境

这个我就不多说了

3 创建electron vue 项目

//0.如果没有安装vue-cli 请全局安装vue cli
//npm install @vue/cli -g
//1.安装使用vue-cli 脚手架模板 simulatedgreg/electron-vue
vue init simulatedgreg/electron-vue  你的项目名
//2.下载依赖
npm install
//3.重新下载electron依赖，不重新下载可能会报错
npm i electron -D
//4.运行
npm run dev

如果报错： process is not defined

下面内容转自：知乎：electron-vue ReferenceError process is not defined
1、找到根目录下的.electron-vue目录

2、找到该目录下的webpack.renderer.config.js文件，找到这段代码：

new HtmlWebpackPlugin({
  // ...
})

3、用下面的代码将这段代码替换：

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

4、再找到该目录下的webpack.web.config.js文件，找到这段代码：

new HtmlWebpackPlugin({
  // ...
})

5、用下面的代码将这段代码替换：

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
}),

6、最后重新编译就解决了（注意两个文件替换的内容是不一样的）

启动

npm run dev