Electron是一个使用JavaScript,HTML和CSS等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。

初始化项目

# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli
# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project

# 安装依赖
cd my-project
npm install # or yarn
# 进入开发模式
npm run dev # or yarn run dev

错误处理

electron-vue ReferenceError process is not defined

在使用electron-vue时候,运行npm run dev,会出现下面的错误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、最后重新编译就解决了(注意两个文件替换的内容是不一样的)

Unresolved node modules: vue

解决方法

先删除项目下的node_modules,再使用npm或yarn安装。

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install node-sass
yarn install