diadia

興味があることをやってみる。自分のメモを残しておきます。

typescriptとvueの単一ファイルコンポーネントを使う

設定条件:

  • vue.js 2系(3系だと書き方が結構違うので困難だった。)
  • typescriptを使う
  • 単一ファイルコンポーネントを使う。単一ファイルコンポーネントではテンプレートとスタイルタグのみを記入し、スクリプトタグは.tsファイルの読込みのみ行う。

作ってみたファイル

1.単一ファイルコンポーネント MyButton.vue

~/Desktop/upload_images_by_js/frontend/src/components/MyButton.vueを作成。
このファイルが単一ファイルコンポーネントとなる。
なお、同ファイルscriptタグではtsファイルをインポートし、エクスポートする形を取るので、別途tsファイルを作成する。

<template>
<div>
<button id="myButton">MyButton.vueのボタン</button>
</div>
</template>
<script>
import MyButton from './MyButton.ts'
export default MyButton
</script>

2.単一ファイルコンポーネント MyButton.ts

~/Desktop/upload_images_by_js/frontend/src/components/MyButton.tsを作成。

import { Component, Vue} from 'vue-property-decorator';
@Component({})
export default class MyButton extends Vue{
    private sss = 'sss';
}

このファイルは、typescriptチックに書くためにvue-property-decoratorのComponent, Vueを使っている。これを使うことでVueの定義をvueらしく書くのではなくtypescriptの様式で書くことができると認識している。 なお、ここでクラスを定義してエクスポートする。エクスポートされたクラスを単一ファイルコンポーネントであるMyButton.vueが受け取り、template, script, styleタグが揃った状態になる。

3.ページ機能を担うviews SampleComponent.vue

~/Desktop/upload_images_by_js/frontend/src/views/SampleComponent.vueを作成。 こちらもtemplate, script, styleを書く。このファイルはページを表示するためのものでvue routerで呼び出されるファイルである。したがって後でrouter/index.tsにてこのファイルとpathを紐付ける作業を行う。

<template>
<div>
<p>Sample Component</p>
<my-button/>
</div>
</template>
<script lang="ts">
import SampleComponent from './SampleComponent'
export default SampleComponent
</script>

4.ページ機能を担うviews SampleComponent.ts

~/Desktop/upload_images_by_js/frontend/src/views/SampleComponent.tsを作成。 SampleComponent.vueでインポートするためのファイルである。

import { Component, Vue } from 'vue-property-decorator';
import MyButton from '../components/MyButton.vue';

@Component({ components: {MyButton}})
export default class SampleComponent extends Vue {

    created(){ console.log('created');}
    mounted(){ console.log('mounted');}
}

ここで注目したいのはSampleComponent.vueでmy-buttonタグを記述したが、ここでmy-buttonを使えるようにすることである。 そのためにComponentアノテーションでMyButton.tsをインポートして使う必要がある。
今回学んだのはここで、ページを表示するファイルのスクリプトタグ内でComponentを宣言しておけば単一ファイルコンポーネントを使えるようになる。また単一ファイルコンポーネントの名付け方があるのだろうけど、特にしない場合キャメルケースで作成したファイル名をケバブケースで記述するとhtmlで呼び出すことができるとも分かった。

5. パスとページファイルを紐付ける index.ts

~/Desktop/upload_images_by_js/frontend/src/router/index.tsを作成。

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import SampleComponent from '../views/SampleComponent.vue' 

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  // 以下を追加する
  {
    path: '/sample',
    name: "SampleComponent",
    component: SampleComponent
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

6. 新たなページに飛ばすアンカータグを設置 App.vue

~/Desktop/upload_images_by_js/frontend/src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/sample">Sample Component</router-link> |
    </div>
    <router-view/>
  </div>
</template>

結果

作成したボタンコンポーネントをページで表示する事ができた。

f:id:torajirousan:20201115155306p:plain

          ↓↓↓↓↓↓↓↓↓↓↓↓ f:id:torajirousan:20201115155259p:plain