「これからはじめるVue.js実践入門」の感想・備忘録5

スポンサーリンク
「これからはじめるVue.js実践入門」の感想・備忘録4の続き

Vue CLI

Vue CLIの基本

  1. npm install @vue/cli
  2. npx vue create my-cli(defaultを選択)
  3. cd my-cli
  4. npm run serveで実行、npm run buildでビルド

Vue CLIはメンテナンスモードに入っていて、Vue.js3プロジェクトの作成はcreate-vueの利用が推奨されている。
https://github.com/vuejs/vue-cli

Vue CLIのサブコマンド

vue add

  • npx vue add xxxでプラグインを追加することができる。
    (プラグインはプロジェクト作成時のウィザードで選択するか、vue addで追加する)
    ex) npx vue add @vue/unit-jest
    ex) npx vue add element(内部的にはvue-cli-plugin-elementがインストールされる)
  • 接頭辞に@vue/がないものはサードパーティのプラグイン。
    正確にはプラグインではないがVue RouterやVuexをnpx vue add routernpx vue add vuexで追加することができる。

vue serve

  • プロジェクトを作成せずに、.vueファイルを単体で実行することができる。
  • @vue/cli-service-globalアドオンをインストールする必要がある。
    npm install @vue/cli-service-global
    npx vue serve Hoge.vue

2022/03/08時点では、Vue CLI5では動作しなかった。
npm install @vue/cli@4 npm install @vue/cli-service-global
npx vue serve Hoge.vue
のように、Vue CLI4では正常に実行することができた。

$mountメソッド

  • 生成されたmain.jsでは$mountメソッドを使ってマウントしている。
    Vueオブジェクトをインスタンス化する際に「elオプションで指定した要素がまだ存在しない」場合(マウント先の要素をAjax通信で生成する場合など)、new Vue()をelオプションなしで実行し、Vueインスタンスの$mountメソッドでマウントを実行する。
<script>
const app = new Vue({ data: { name: 'hoge' } });
// ここにマウント要素生成処理が入る
app.$mount('#app');
</script>

TypeScript

TypeScriptの導入

  • npx vue create my-typescript
    • Please pick a preset: Manually select features
    • Check the features needed for your project: Babel, TS, Linter
    • Choose a version of Vue.js that you want to start the project with: 2.x
    • Use class-style component syntax? Yes
    • Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
    • Pick a linter / formatter config: Basic ESLint with error prevention only
    • Pick additional lint features: Lint on save
    • Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

Use class-style component syntaxの意味

vue-class-componentまたはvue-property-decoratorをimportしてコンポーネントを定義する方法で、Vue 2では一般的。
Vue 3ではclass-styleではなくComposition APIという新しい書き方がスタンダードになるので、不要になると思われる。
https://qiita.com/jesus_isao/items/0b305c7d90c45ad66c1b

TypeScriptの形式のコンポーネント

  1. script要素のlang=”ts”でTypeScriptを宣言
  2. Vueクラスを継承する
  3. @Componentデコレーターを付与する
    ※デコレーターとはクラスやメソッドなどに情報を付与するもの。
    JAVAのアノテーションと同じ。
  4. dataもpropsもクラスプロパティとして扱うことができ、propsの場合はデコレーターで宣言する。
<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>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

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

Vue 3では以下のようになる。過渡期なので少し時期を待った方がいいかもしれない

import { Options, Vue } from 'vue-class-component';
@Options({
  components: {
    HelloWorld,
  },
})

コンポーネントの主な構成要素

メソッドおよびライフサイクルメソッド

  • クラスのメソッドとして定義する。
private concat(str1: string, str2: string): string {
  return `${str1}${str2}`;
}

算出プロパティ

  • ゲッターとして定義する。
get msgAndHoge(): string {
  return `${this.msg}hoge`
}

カスタムイベント

  • this.$emitメソッドで発生させていたイベントは@Emitデコレーターで表す。
    ※ @Emitの引数を省略した場合は、メソッド名のケバブケースがイベント名となる
import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
// 〜省略〜
@Emit('alert')
private handleClick() {
  return this.msgAndHoge;
}

ウォッチャー

  • @Watchデコレーターで表す。
@Watch('num')
private handleNumChange(newValue: number, oldValue: number): void {
  console.log(`${oldValue}⇒>${newValue}`)
}

コメント