Electron--使用前端技术来构建桌面端应用

是什么？

Electron能够让你使用JavaScript调用丰富的原生APIs来创造桌面应用，可认为是一种运行环境库。

具体怎么运行起来以及打包

• 运行        第一步：先将vue项目build打包

       第二步：在一个新的文件夹克隆项目 地址：git clone github.com/electron/el…

       第三步：进入electron-quick-start文件夹nom install安装依赖

       第四步：将第一步build的包放入第三步的文件夹里面

       第五步：修改main.js入口文件

	// 这是修改之前的&&&&&&&&&&&&&&&：
  	// mainWindow.loadFile('index.html')
  	// 这是修改之后的&&&&&&&&&&&&&&&：
  	mainWindow.loadFile('educationalManagement/index.html')

       第六步：npm run start 启动，你可以看到效果了

• 打包：

  • 方式一：electron-packager （因为依赖还环境问题 现在只能打出window 版本 MAc版本需要使用另一种方式）

         第一步：npm install electron-packager --save-dev

         第二步：修改package.json文件：

  "scripts": {
  "start": "electron .",
  "packager": "electron-packager ./ educationalManagement --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite"
  }
  

         第三步： npm run packager进行打包

  • 方式二： electron-build        第一步：yarn add electron-builder --save-dev

         第二步：修改package.json文件：

  "build": {
  	"appId": "com.xxx.app",
  	"copyright":"LEON",
  	"productName":"这是测试打包呀", 		打包完成后的名称
  	"mac": {"target": ["dmg","zip"]},	环境
  	"win": {"target": ["nsis","zip"]}	环境
  },
  "scripts": { 
  	"start": "electron .",
  	"packager": "electron-packager ./educationalManagement --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite", 
  	"distWin": "electron-builder --win --x64",
  	"distMac": "electron-builder --mac --x64",
  	"dist": "npm run distWin && npm run distMac"
  }
  

         第三步：npm run dist进行打包

利用electron-forge搭建一个electron项目

它相当于就是一个脚手架，可以方便我们创建，运行，以及打包electron项目。 地址：(github.com/electron-us…)

第一步：创建项目：
	npx create-electron-app my-new-app或者yarn create electron-app my-new-app
第二步：运行起来：
	cd my-new-app	
	npm start

或者像下面这样：（上面使用npx是不需要全局这样安装的）
npm install -g @electron-forge/cli
electron-forge init my-new-app
cd my-new-app
npm start