FreeStyleWiki

Vue+Typescript

このエントリーをはてなブックマークに追加

[Javascript]

Vue+Typescript

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

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

  ことはじめ

プロジェクト内部で以下を実行するといきなり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

デバッグ準備

  ライブラリの追加方法

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-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の見た目を置き換える

  コードの生成方法

$