如何使用Electronjs打包vue頁面(vue-cli)打包爲桌面應用——第一節

第一步：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

桌面應用預覽如下圖：