Electron-vue로 탭 브라우저를 만들었습니다.
단지 커스텀 앱이 아직(?) 같기 때문에, Electron 과 Vue 의 습작도 겸해 자작해 보았습니다.
다른 점은 URL을 입력하고 아이콘을 선택하는 방법이므로 도마이너 웹 응용 프로그램이나 Yahoo! 톱 페이지와 같은 웹 페이지를 등록 할 수 있습니다.


메커니즘
구조로서는, 서두에 쓴 것처럼 Electron-vue
로 만들고 있습니다.
브라우저는 <webview>
태그를 display:block;
와 display:none;
로 전환하고 있습니다.
electron-vue를 시작하는 방법
모든 디렉토리에서 쓰기를 실행합니다.project-name
의 부분은 임의 설정 가능.
vue init simulatedgreg/electron-vue project-name
? Application Name sample
? Application Id sample.com
? Application Version 0.0.1
? Project description sample
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-el
ectron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? packager
? author axcelwork
vue-cli · Generated "project-name".
---
All set. Welcome to your new electron-vue project!
Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.
Next Steps:
$ cd vue-electron-sample
$ yarn (or `npm install`)
$ yarn run dev (or `npm run dev`)
애플리케이션의 이름과 버전, Sass를 사용하거나 플러그인은 무엇을 사용하는지 등에 대답하면 프로젝트가 생성됩니다.
유용합니다 
창 크기 저장
응용 프로그램을 사용하고 있고 윈도우 크기를 저장하고 다음에 열 때도 같은 크기로 사용하고 싶네요.
이런 식으로 하면 윈도우 사이즈의 보존을 할 수 있습니다.
/src/main/index.jsconst path = require('path');
const fs = require("fs");
// 中略
// ウィンドウサイズを保存するファイル
let boundsFile = path.join(
app.getPath('userData'), 'bounds.json'
);
// 保存しておいたウィンドウサイズの取得
let bounds = null;
try {
bounds = JSON.parse(
fs.readFileSync(boundsFile, 'utf8')
);
} catch (e) {
bounds = { "width": 1024, "height": 768 };
}
function createWindow () {
mainWindow = new BrowserWindow(Object.assign(
bounds, {
useContentSize: true,
frame: false
}
));
mainWindow.loadURL(winURL)
const menu = Menu.buildFromTemplate(templateMenu);
Menu.setApplicationMenu(menu);
mainWindow.on('close', () => {
// ウインドウサイズを書き込む
fs.writeFileSync(
boundsFile, JSON.stringify(mainWindow.getBounds())
);
});
mainWindow.on('closed', () => {
mainWindow = null
})
}
설정 파일
등록한 페이지의 정보는 설정 파일로 저장하고 싶으므로 electron-json-storage
를 사용하고 있습니다.
npm install --save-dev electron-json-storage
사용법은 이런 느낌. 내용은 JSON.
획득
storage.get("config", function(error, data) {
console.log(data)
});
설정
storage.set("config", data, function(error) {
if (error) throw error;
});
삭제
storage.remove("config", function(error) {
if (error) throw error;
});
remove는 파일 자체가 삭제되므로 주의.
아이콘 만들기
Mac이라면 아이콘의 작성은 편하다. Windows는 조금 모릅니다 ... 실례합니다 
모든 디렉토리에 icon.iconset
디렉토리를 만들고 아이콘 이미지를 저장합니다.
저장하는 종류와 파일명은 다음과 같다.
파일 이름
해상도
icon_16x16.png
16x16
이콘_16x16@2x. pg
32x32
icon_32x32.png
32x32
이콘_32x32@2x. pg
32x32
icon_128x128.png
128x128
이콘_128x128@2x. pg
256x256
icon_256x256.png
256x256
이콘_256x256@2x. pg
512x512
icon_512x512.png
512x512
이콘_512x512@2x. pg
1024x1024
그래서이 모든 디렉토리로 이동하여 다음을 실행하십시오.
iconutil -c icns icon.iconset
이제 icon.icns
가 만들어지므로 /Users/xxxx/project/project-name/build/icons
에 저장됩니다.
Windows 용 패키지
Mac에서 Windows를 패키지하려면 Wine
가 별도로 필요합니다.
brew
에서 Wine
를 설치합니다.
brew install wine
다른 기사를 보고 있으면, 뭔가 실패한 것 같은 것이 쓰여졌습니다만, 제 경우에는 운이 좋았는지 한 번에 설치할 수 있었습니다.
이 상태에서, 미리 준비되어 있는 npm script
로부터 Windows 의 패키지를 실시하면(자) 순조롭게 패키징이 생겼습니다.
Github
axcelwork/ideal에 업로드했습니다.
releases에서 Windows와 Mac을 모두 사용할 수 있습니다.
향후 예정
vue init simulatedgreg/electron-vue project-name
? Application Name sample
? Application Id sample.com
? Application Version 0.0.1
? Project description sample
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-el
ectron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? packager
? author axcelwork
vue-cli · Generated "project-name".
---
All set. Welcome to your new electron-vue project!
Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.
Next Steps:
$ cd vue-electron-sample
$ yarn (or `npm install`)
$ yarn run dev (or `npm run dev`)
const path = require('path');
const fs = require("fs");
// 中略
// ウィンドウサイズを保存するファイル
let boundsFile = path.join(
app.getPath('userData'), 'bounds.json'
);
// 保存しておいたウィンドウサイズの取得
let bounds = null;
try {
bounds = JSON.parse(
fs.readFileSync(boundsFile, 'utf8')
);
} catch (e) {
bounds = { "width": 1024, "height": 768 };
}
function createWindow () {
mainWindow = new BrowserWindow(Object.assign(
bounds, {
useContentSize: true,
frame: false
}
));
mainWindow.loadURL(winURL)
const menu = Menu.buildFromTemplate(templateMenu);
Menu.setApplicationMenu(menu);
mainWindow.on('close', () => {
// ウインドウサイズを書き込む
fs.writeFileSync(
boundsFile, JSON.stringify(mainWindow.getBounds())
);
});
mainWindow.on('closed', () => {
mainWindow = null
})
}
npm install --save-dev electron-json-storage
storage.get("config", function(error, data) {
console.log(data)
});
storage.set("config", data, function(error) {
if (error) throw error;
});
storage.remove("config", function(error) {
if (error) throw error;
});
iconutil -c icns icon.iconset
brew install wine
axcelwork/ideal에 업로드했습니다.
releases에서 Windows와 Mac을 모두 사용할 수 있습니다.
향후 예정
Reference
이 문제에 관하여(Electron-vue로 탭 브라우저를 만들었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/axcelwork@github/items/655048399214f805f07d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)