QuasarFrameworkのメモ

つまづいたところをメモしておきます。

インストール

node.js 入ってる？

node -v
npm -v

yarn入れといたら

npm install -g yarn

つづりにはAが2つ quAsAr

yarn add quasar

編集

index.vue にデータやメソッドを書いていく (src/pages/index.vue)

vue.js

export default defineComponent({
  name: 'IndexPage',
  components: { ExampleComponent },
  data: () => ({
    // text: 'abc',
  }),
  methods: {
    // abc: () => {},
  },
  mounted() {
     // document.addEventListener
     // window.addEventListener
  },
  beforeUnmount() {
     // document.removeEventListener
     // window.removeEventListener
  },
  setup() {
   return { todos, meta };
  }
}

Eventはinterfaceでカスタムイベント型を定義して使う

vue.js

interface KeyEvent extends Event {
  keyCode: number;
  key: string;
}
export default defineComponent({
  ...
  methods: {
    getKey(event: KeyEvent) {

型付きの変数はexport default の上で定義してdataで使う

vue.js

const keyList: { [index: string]: any } = {};
const downKeys: string[] = [];
export default defineComponent({
  ...
  data: () => ({
    keyList: keyList,
    downKeys: downKeys,

electron 作業

electronモードの追加

yarn quasar mode add electron

electron メインファイルに設定追加 (src-electron/electron-main.js)

node.js

  mainWindow = new BrowserWindow({
    ...
    webPreferences: {
      contextIsolation: true,
      // More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),
      sandbox: false,  // <--- これを追加
    },
  });

electron で myAPI メソッドを事前ロード (src-electron/electron-preload.js)

node.js

import { contextBridge } from 'electron';
contextBridge.exposeInMainWorld('myAPI', {
  doAThing: () => {
    const fs = require('fs');
    const path =
      'C:/Prog/-----.txt';
    const data = fs.readFileSync(path, { encoding: 'utf8', flag: 'r' });
    return data;
  },
});

indexPage.vueでmyAPIメソッドを呼び出す(src/pages/indexPage.vue)

node.js

  setup() {
    const fileData = myAPI.doAThing().split('\r\n');