Electron + Vue.js + Bootstrap で環境構築

11205 ワード
Vue.js 環境構築 bootstrap4 Electron 環境構築 テキストリンク

今からやること

Electronとシェルスクリプトを使ったradiko再生プログラムを作成する。

環境

macOS Big Sur
Visual Studio Code
node v14.0.0

インストール項目

Vue 2.6.11
Electron 6.0.0 (electron-builder 1.4.6)
Bootstrap 4.0

構築

Homebrewをインストール
terminal
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Node.jsをインストール
terminal
$ 省略
Vueの環境を構築
terminal
$ npm install -g @vue/cli
$ vue create my-app
terminal
Vue CLI v4.5.11
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

→ プロジェクト名は小文字のみ
→ Vue 3はBootstrapに対応していないのでVue 2を選択

Electronの環境を追加
my-app
$ vue add [email protected]
my-app
? Choose Electron Version (Use arrow keys)
  ^4.0.0 
  ^5.0.0 
❯ ^6.0.0

バージョンをビルダーは1.4.6、Electronは6.0.0に指定
→シェルスクリプト等のコードが動かない

ルーターの追加

ルーター：複数のページを管理したりコンポーネントを管理するために便利な機能

my-app
npm install vue-router

初期設定〜起動

Bootstrapの環境を追加
my-app
$ npm install bootstrap-vue
メインの基盤となるmain.jsにルータの記述を追加
src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router' //added

new Vue({
    router, //added
    render: h => h(App),
}).mount('#app')
router.jsを新規作成
src/router.js
import Vue from 'vue'
import Router from 'vue-router'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(Router)
Vue.use(BootstrapVue)

export default new Router({
    mode:'history',
    base: process.env.BASE_URL,
    router:[]
})
アプリを起動

ここまでできたら起動してみる

my-app
$ npm run electron:serve
アプリをビルド
my-app
$ npm run electron:build

応用

アイコンの設定

プロジェクトルートにvue.config.jsを作成し、指定した場所(src/assets/)にアイコンを格納。サイズは512×512のみ

vue.config.js
module.exports = {
    pluginOptions: {
      electronBuilder: {
        builderOptions: {
            productName: "my-app",
          mac: {
            icon: 'src/assets/icon.icns',
          },win: {
            icon: 'src/assets/icon.icns',
          },
        }
      }
    }
  }
ウィンドウサイズの固定・変更
src/background.js
/*

*/
async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
   titleBarStyle: "hidden",
   width: 1080, height: 600,
   resizable:false,
   webPreferences: {
    nodeIntegration: true,
    webSecurity: false, //ここ大事
    webviewTag: true,
   }
  })
/*

*/

詳しい情報はここに載っています
Electron ドキュメント：https://www.electronjs.org/docs/api/browser-windo

結果

Electronのバージョンを上手く合わせないと中々、シェルスクリプトが動かなかった

参考サイト
GitHub：https://github.com/uru2/rec_radiko_ts
→ここのシェルスクリプトを参考にしました
Download FFmpeg：https://ffmpeg.org/download.html
→Gitのコマンドを打って手動でダウンロード

参考サイト2
npmのuninstallコマンドを忘れがちなのでメモ