typescriptベースのvueプロジェクトの構築を教えてあげます

ユダは昨年9月にvueのtypescriptへのサポートを発表してから、箱を開けて試したいと思っていましたが、フロントエンドsrにとって、vueのスムーズさにtsのオブジェクト向けが加わり、とても素晴らしいと思っていました~やっと2ヶ月前に、vue+tsの組み合わせを試してみる機会を見つけました.開文はvueとtsの統合の旅と出会ったいくつかの穴を記録した.
vue
ほとんどの人がvueを知っているはずですが、今はvueがreactと肩を並べている存在なので、あまり紹介しすぎません.
vue中国語公式サイトのチュートリアルは最高の入門チュートリアルです
typescript
私は前のいくつかの文章でずっとtypescriptを宣伝して、簡単にtsの長所を列挙します

はJavaScriptから始まり、JavaScriptに帰属し、typescriptはJavaScriptのスーパーセットであるため、JavaScriptdコードを再利用してJavaScriptのライブラリ

を使用することができる

JavaScript用の利点はすべてあり、ブラウザ、オペレーティングシステムなどにまたがる

オブジェクト向けプログラミング思想、強力なタイプチェック

オープンソース大法好

短所としては、あまり小さな項目には向いていないということです.
これらの長所だけで、私たちが楽しく遊ぶのに十分です.
tsインストール
nodeをインストールし、npmでtsのパッケージをインストールします.npm install -g typescript tsc -v tsのバージョン番号を表示
プロジェクトの作成
公式に提供されている足場vue-cliでプロジェクトを作成します
足場の取り付けとプロジェクトの作成

インストールコマンド

を実行する.npm install -g @vue/cli
インストールが完了すると、vue createによって新しいプロジェクトの足場を迅速に作成したり、vue serveによって新しいアイデアのプロトタイプを直接構築したりすることができます.

作成プロジェクトvue create vue-ts vue-tsは私たちのプロジェクト名で、実行後は以下の

xiaoliというオプションは私が前に作成したもので、後で紹介します.defaultという後ろにbabel eslintと書いてあり、これを選択するとbabelとealintしか導入されないことを示しています.manually select features名前の通り、私たちが望んでいるものを選択します.では3つ目を選びます
リストには多くの選択肢があり、vue+tsを主としているので、babel typescript router vuexといういくつかを選択し、選択が終わったら、次のようにします.
次はいくつかのyes or noのオプションがあります.皆さんは自分のプロジェクトの必要に応じて選択すればいいです.最後のステップ、Save this as a preset for future projects? yesを選択すれば、私たちの前の選択を保存し、プリセットオプションとして、後続のキーで新しいプロジェクトを作成するのに便利です.すべてのステップを選択し、車に戻ると、プロジェクトファイル構造の作成とnpmパッケージの引き出しを開始します.
プロジェクト構造
プロジェクトの構成は以下の通りです.
public:静的ファイルを格納するために使用されます.index.htmlエントリファイルは中に入っていて、このフォルダの下のファイルはwebpackのパッケージに含まれません.
src:vueプロジェクトエンジニアリングファイルを保存し、routerとvuexを関連付けるのに役立ちました.ファイル構造は非常に簡潔です.
その他:webpack、babelなどのプロファイル
typescriptと服用
プロジェクトは構築中で、tsのサポートのためにvue-class-componentを導入したり、vue-property-decoratorを使用したりしています.このライブラリは以前のものに基づいて拡張されています.
以下にtsvueの書き方の様々な変化を列挙する
コンポーネント宣言
コンポーネントの作成方法は次のようになります.

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Test extends Vue {

}

dataオブジェクト
コンストラクション関数によるdata内のデータの作成

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Test extends Vue {
    private name: string;
    constructor() {
        super();
        this.name = 'xiaoli';
    }
}

dataのデータの使い方は以下の通りです

public getName(){
    return this.name
}

Prop宣言

@Prop() public msg: string;
@Prop({ default: 'default value' }) propB: string
@Prop([String, Boolean]) propC: string | boolean

ライフサイクル関数の使用

public created(): void {
    console.log('created');
}

public mounted():void{
    console.log('mounted')
}

カスタムメソッド
jsの下ではmethodオブジェクトにメソッドを宣言する必要がありますが、次のようになります.

public clickFunc(): void {
    console.log(this.name)
    console.log(this.msg)
}

Watchリスニング属性

@Watch('name',{ immediate: true, deep: true })
public onChildChanged(val: string, oldVal: string) {
    console.log('watch new name=' + val);
}

computed計算プロパティ

public get allname() {
    return 'computed ' + this.name;
}

allnameは計算された値であり、nameはリスニングされた値である
Emitイベント

@Emit()
  addToCount(n: number) {
    this.count += n
  }

  @Emit('reset')
  resetCount() {
    this.count = 0
  }

1つ目のイベント名はadd-to-countであり、nは伝達されたパラメータである.2番目のイベント名はreset-countで、パラメータは空です.
コマンドとフィルタ
---------------------------------------
コマンドとフィルタのtsの下の書き方を聞いた仲間がいて、前に漏らしてしまったので、今補充します.
試してみると、前にエントリファイルに直接命令やフィルタを導入する方法が役に立たなかったことに気づきました.tsを使った後、コンポーネントの役割ドメインが以前とは違ったので、公式issueを探して、次のようにスクリーンショットしました.
著者は4月11日の返信で、この問題を認めたが、具体的にいつ指令とフィルタの声明を加えるかは不明だが、著者はissueで解決策を示した.簡単な栗を書きます
カスタムコマンド

// ./directive/index.ts
export const focus = {
    //            DOM   ……
    inserted: function (el:HTMLElement) {
        //     
        el.focus()
      }
}

1つのフィルタ

// ./filter/index.ts
export const capitalize = function (value:string) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
}

コンポーネントでの使用

import { capitalize }from '@/filter/index'
import { focus } from '@/directive/index'
@Component({
    filters:{capitalize},
    directives:{focus}
})
export default class Test extends Vue {}

<div>
    <input v-focus v-model="modelData">
    <div>{{modelData | capitalize}}div>
div>

これは局部引用であることがわかりますが、全局引用はまだ方法を見つけていません.解決策のあるパートナーの指導を歓迎します.
vuexとtsの混在
vuexはオプションなので、単独で列挙します.まずvuex-classライブラリを参照する必要があります.このライブラリには次のモジュールがあります.

import {
    namespace,
    Action,
    Getter,
    Mutation,
    State
} from 'vuex-class';

それぞれvuexのaction、getter、mutationなどに対応し、tsを用いたvuexへの影響は主にコンポーネントのvuexへの呼び出しにあり、vuexの定義は以前の書き方に従えばよい.

@State('foo') stateFoo
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@Action('foo') actionFoo
@Mutation('foo') mutationFoo
@someModule.Getter('foo') moduleGetterFoo

// If the argument is omitted, use the property name
// for each state/getter/action/mutation type
@State foo
@Getter bar
@Action baz
@Mutation qux

vuexで定義したメソッド名を使用したくない場合は、現在のthisに定義されているため、this呼び出しを直接使用してプロパティ名をカスタマイズできます.

this.getterFoo // -> store.getters.foo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })

小結
完成したら、バックエンドのようにフロントエンドを引っ張ることができます.