Electron + VUE 快速构建桌面应用

第一步 安装Nodejs

安装成功之后在cmd 输入node -v 可以查看到版本号 即代表安装成功

第二步 搭建VUE开发环境

安装脚手架工具vue-cli （可自行百度安装）

npm install -g @vue/cli
或者
cnpm install -g @vue/cli

第三步 安装Electron

使用一下任意一种即可

npm install -g electron
或者
cnpm install -g electron

第四步 使用vue-cli脚手架工具来创建项目

vue init simulatedgreg/electron-vue test

建议按照以上方式，打包工具选择electron packager

第五步 使用yarn安装依赖

小伙伴们也可以用npm,cnpm安装依赖 我习惯性用yarn 时间较长

yarn
npm install
cnpm install

第六步 启动项目

yarn run dev
npm run dev
cnpm run dev

第七步 打包

yarn build
npm run build
cnpm run build

其他问题：

1.安装慢

可以将源改为淘宝源

yarn config get registry   //查看使用的源
yarn config set registry 'https://registry.npm.taobao.org'  //设置源

npm config get registry   //查看使用源
npm config set registry https://registry.npm.taobao.org  //设置源

2.Html Webpack Plugin

修改.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中的

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

参考转载：https://blog.csdn.net/Gabriel_wei/article/details/92785089