これからはじめるVue.js実践入門
posted with ヨメレバ
山田 祥寛 SBクリエイティブ 2019年08月23日頃
Vue CLI
Vue CLIの基本
- npm install @vue/cli
- npx vue create my-cli（defaultを選択）
- cd my-cli
- 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 routerやnpx 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の形式のコンポーネント
- script要素のlang=”ts”でTypeScriptを宣言
- Vueクラスを継承する
- @Componentデコレーターを付与する
※デコレーターとはクラスやメソッドなどに情報を付与するもの。
JAVAのアノテーションと同じ。 - 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}`)
}