Vue+Typescript

[Javascript]

Vue+Typescript

主にこのページではVue3とTypescriptについて使い方を調べたものを書こうと思う。

最初にVue3+Typescriptの構成について知る必要のあることを書き出し、最後にそれを生成する方法を記載したい。

• 試行錯誤の記録 Electron

  ことはじめ

プロジェクト内部で以下を実行するといきなりVue3+Typescriptのいい感じのプロジェクトがDLできる

$ curl -fsSL https://github.com/robertcorponoi/electron-vue3-ts-quick-start/archive/refs/tags/v0.1.0.tar.gz  | tar -xz --strip-components 1

ビルドとRun

$ npm install
$ npm run build:dev:watch
$ npm run start

デバッグ準備

• TypeScriptで書いてwebpackでビルドしたjsファイルのエラーをわかりやすくする
  • source-map-support というものを使うと、エラーがわかりやすくなる

  ライブラリの追加方法

• 今回はjquery-uiを使いたかったので、以下のサイトを参考に追加する
  • Vue.js x TypeScriptのプロジェクトでjQuery UIを使う

jquery-uiは型定義ファイルがすでにあるので設定が楽

$ npm install jquery jquery-ui --save
$ npm install @types/jquery @types/jqueryui --save-dev

• TypeScriptのコンパイラーオプションのpathsにjquery-ui用の型定義ファイルを指定

// tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": [
        "src/*"
      ],
      "jquery-ui": [
        "node_modules/@types/jqueryui/index"
      ]
    },
    ...

あとは、jQuery UIを使う箇所で以下のようにimport

import $ from "jquery";
import "jquery-ui";

  コンポーネントの追加方法

エントリーポイント

Vue3でのエントリーポイントの書き方は以下のようになるみたいだ。

• プロジェクト直下のmain.js(main.ts)からVueのrootコンポーネントを呼び出す。
  • メインのViewはApp.vueに書かれている

'use strict'

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App)
  .use(store)
  .mount('#app');

コンポーネントの追加

• Vue 3 Tutorial (for Vue 2 Users)
• Vue + typescript について (vue-class-component, vue-property-decorator って何？)
  • 実は上記Qiitaは情報が古く、@Componentアノテーションは廃止されている https://github.com/vuejs/vue-class-component/issues/406

• vue-class-componentとは？
  • TypeScript（.tsファイル）でコンポーネントが書けるようになる。
  • Componentデコレータをつけて、Vueを継承したクラスとして書く。

今回はUIの基盤を作成したいので、空のコンポーネントをUIBaseとしておく

// src/components/BaseUI.vue
<script lang="ts">
import { Options, Vue } from 'vue-class-component'

export default class BaseUI extends Vue {}
</script>

BaseUIを読み込むようにする

// src/App.vue
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import UIBase from "./components/BaseUI.vue";

@Options({
  components: {
    BaseUI,
  },
})
export default class App extends Vue {}
</script>

これでnpm build:dev:watchするとHelloWorldのサンプルが消えて、真っ白になるがコンパイルは通る。

  BaseUIの見た目を置き換える

• A full page layout with resizable panes using jQuery UI
  • 上記Stackoverflowの情報ベースでリサイズ可能なUIを作成する

  コードの生成方法

$