专注于
浏览器插件开发

【Node】vue项目整合electron的基本操作

1.VUE 2.x 介绍

vue就先不多说了,此段纯属凑字数。

2.electron 介绍

简单百度一下,前端开发桌面程序,目前主要是2个东西,NW.js 和 Electron。
挺有意思,但是都太会。要开始选择用哪个啦。
对比了一下两个工具的github Star,那就选择Electron吧。
Electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。Chromium是一个开源浏览器,与Chrome区别是不会自动更新,但是一些新特性会在Chromium先上。既然自带浏览器内核,这么的跨平台,终于不用考虑兼容性了,很爽有木有!

3.electron 安装

npm先安装好
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install
npm start

此时你就可以看到官方demo了。

再看看项目中的入口文件main.js
以下是createWindow函数中的部分:

// 此处设置窗口大小
mainWindow = new BrowserWindow({width: 1200, height: 1000})

// 此处设置入口页面
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, ‘index.html’),
protocol: ‘file:’,
slashes: true
}))
loadURL这部分是旧版的写法新版的改成了:
mainWindow.loadFile(‘index.html’);
于是我把它改成了:
mainWindow.loadFile(__dirname.replace(‘build’,’dist/index.html’));

接下来打包VUE,将打包后的文件放到这边来。
回到vue项目中。
打包前记得将config中的index.js进行修改,以免打包出来的js和css文件路径不对。将打包文件的绝对路径改为相对路径。

在新建项目package.json文件中增加一条指令

electron/package.json
“scripts”: {

“lint”: “eslint –ext .js,.vue src test/unit/specs test/e2e/specs”,
“build”: “node build/build.js”,
“electron_dev”: “npm run build && electron build/electron.js” //增加这条,JSON文件不支持注释,引用时请清除
},

执行npm run build 生成dist目录
执行npm run electron_dev 启动electron
即可看到生成的应用程序

 

未经允许不得转载:磁钉插件网 » 【Node】vue项目整合electron的基本操作
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!