[Day5] Vue.js × TypeScript 入門 ①

そうだVue.jsを書こう!（現実逃避）

なんか唐突にサーバサイド書くの飽きた(錯乱)

ということで環境構築

vue.js用のcliがあるのでグローバルに保存しときます。
npm install -g @vue/cli

こんな感じでバージョン出たらOK

$ vue --version
3.0.3

$ vue create sample
  default
> Manually select features 

その後TypeScriptを選択する(spaceキーで選択できる)

cd sample
npm run serve

テストページが表示されたらOK

実際に書いてみよう

/src配下に編集用のファイルがあるのでいじってみる。

編集前
App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ん？ 独特すぎてよくわからんぞ。。。

なんとなく、画面の部品毎にvueファイルを作ってるぽいことが分かったので、
適当なファイルを作成してみる。

GoodBye.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ msg2 }}</h2>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class GoodBye extends Vue {
  @Prop() private msg!: string;
  @Prop() private msg2!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <GoodBye msg="test" msg2="sample"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
import GoodBye from './components/GoodBye.vue';

@Component({
  components: {
    HelloWorld,
    GoodBye,
  },
})
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

実行結果

感想

パーツ毎に画面作れるの面白いし、メンテナンスしやすそう。
cssは埋め込まれてたけど、別ファイル化すべきな気がする。