electron的安装

1.我使用有两种方式进行安装

        a.使用vue-cli

        (1) 通过vue-cli创建vue项目

        (2) 使用npm run build 进行打包 （提前在config中配置打包的路径 如果是vue-vli3 以上的用户需要自行创建vue.config.js文件）

module.exports = {
  publicPath: "./", // 公共路径(必须有的)
  outputDir: "dist", // 输出文件目录
  assetsDir: "static", //静态资源文件名称
  lintOnSave: false,
  productionSourceMap: false, //去除打包后js的map文件
  devServer: {
    //启动项目在8080端口自动打开
    open: true,
    port: 8080,
    proxy: null,
  },
  //去掉console
  configureWebpack: (config) => {
    // 判断为生产模式下，因为开发模式我们是想保存console的
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer.map((arg) => {
        const option = arg.options.terserOptions.compress;
        option.drop_console = true; // 打开开关
        return arg;
      });
    }
  },
};

        (3) 然后安装electron

                如果使用npm无法成功安装 则使用cnpm

                1.安装cnpm            

npm install -g cnpm --registry=https://registry.npm.taobao.org

                2.安装electron

cnpm install -g electron

         (4) 成功安装之后我们需要在打包好的dist文件夹中配置 main.js 文件和package.json文件

// main.js文件
const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
  width:800,
  height:600
};//窗口配置程序运行窗口的大小
function createWindow(){
  win = new BrowserWindow(windowConfig);//创建一个窗口
  win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
  win.webContents.openDevTools();  //开启调试工具
  win.on('close',() => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

package.json

{
    "name": "demo",
    "productName": "项目名称",
    "author": "作者",
    "version": "1.0.4",
    "main": "main.js",
    "description": "项目描述",
    "scripts": {
        "pack": "electron-builder --dir",
        "dist": "electron-builder",
        "postinstall": "electron-builder install-app-deps"
    },
    "build": {
        "electronVersion": "1.8.4",
        "win": {
            "requestedExecutionLevel": "highestAvailable",
            "target": [
                {
                    "target": "nsis",
                    "arch": [
                        "x64"
                    ]
                }
            ]
        },
        "appId": "demo",
        "artifactName": "demo-${version}-${arch}.${ext}",
        "nsis": {
            "artifactName": "demo-${version}-${arch}.${ext}"
        }
    },
    "dependencies": {
        "core-js": "^2.4.1",
        "electron-packager": "^12.1.0",
        "electron-updater": "^2.22.1"
    }
}

        

b.使用electron-vue

        (1) 在使用electron-vue之前我们需要安装好vue-cli

npm install -g vue-cli

        (2) 接下来安装electron-vue模板 安装完成之后切换至我们新建项目的目录内

vue init simulatedgreg/electron-vue my-project

        (3) 然后进行npm install 或者 yarn

                  这时我们大概率会遇到一些报错 原文

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

npm install electron --electron_mirror=https://npm.taobao.org/mirrors/electron/

        (4) 此时我们再通过 npm run dev 运行