如何使用Electronjs打包vue页面(vue-cli)打包为桌面应用——第一节

    技术2024-10-18  25

    第一步:git下载Electronjs快速启动项目

    git clone git clone https://github.com/electron/electron-quick-start

    第二步:用vscode打开已下载的electron-quick-start项目,(并执行cnpm install(使用此命令要执行以下命令:npm install -g cnpm --registry=https://registry.npm.taobao.org)或者npm install)

    cnpm install

    第三步:启动项目:

    cnpm run start

    如下图

    第二部分:

    第一步:新建electron-vue文件夹,并用vscode打开,然后执行以下命令:

    npm install npm install electron --save-dev npm install electron-packager --save-dev

     

    第二步:见图操作:

    第三步:见图操作

    第四步:配置vue-electron项目package.json里scripts添加一行"e_dev": "npm run build && electron build/electron.js"如图:

    第五步:编译vue-electron项目

    cnpm run build

    第六步:启动vue-electron项目,

    cnpm run e_dev

    桌面应用预览如下图:

    Processed: 0.008, SQL: 9