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を使いたかったので、以下のサイトを参考に追加する
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を作成する
コードの生成方法
$