VueでTypeScriptを使用する方法

# 1. Vue CLIがインストールされていない場合は、まずインストールします。npm install --global @vue/cli

|-- ts-vue
    |-- .browserslistrc # browserslistrc 設定ファイル (Autoprefixer をサポートするために使用)
    |-- .eslintrc.js # eslint 設定 |-- .gitignore
    |-- babel.config.js # babel-loader 設定 |-- package-lock.json
    |-- package.json # package.json の依存関係|-- postcss.config.js # postcss の設定|-- README.md
    |-- tsconfig.json # typescript 設定 |-- vue.config.js # vue-cli 設定 |-- public # 静的リソース (直接コピーされます)
    | |-- favicon.ico # ファビコンアイコン| |-- index.html # HTML テンプレート|-- src
    | |-- App.vue # エントリ ページ| |-- main.ts # コンポーネントの初期化などを読み込むエントリ ファイル| |-- shims-tsx.d.ts
    | |-- shims-vue.d.ts
    | |-- アセット # テーマフォントとその他の静的リソース（webpack によって読み込まれる）
    | |-- components # グローバル コンポーネント| |-- router # ルーティング| |-- store # グローバル vuex ストア
    | |-- style # グローバル スタイル| |-- views # すべてのページ|-- tests # テスト

'vue-property-decorator' から { Vue、Component、Inject、Provide、Prop、Model、Watch、Emit、Mixins } をインポートします。

'vuex-module-decorators' から { Module、VuexModule、Mutation、Action、MutationAction、getModule } をインポートします。

'vue-property-decorator' から { Component、Prop、Vue、Watch } をインポートします。

@成分
デフォルトのクラスTestをエクスポートし、Vueを拡張します。

}

'vue-property-decorator' から { Component、Prop、Vue、Watch } をインポートします。

@成分
デフォルトのクラスTestをエクスポートし、Vueを拡張します。
  プライベート名: 文字列;
}

@Prop({ デフォルト: false }) プライベート isCollapse!: boolean;
@Prop({ デフォルト: true }) プライベート isFirstLevel!: boolean;
@Prop({ デフォルト: "" }) プライベート basePath!: 文字列;

パブリッククリック関数(): void {
  console.log(この名前)
  コンソールログ(このメッセージ)
}

@Watch("$route", { 即時: true })
プライベート onRouteChange(ルート: ルート) {
  const query = route.query を Dictionary<string> として返します。
  if (クエリ) {
  this.redirect = クエリ.redirect;
  this.otherQuery = this.getOtherQuery(クエリ);
  }
}

パブリック get allname() {
  'computed ' + this.name を返します。
}

パブリック作成(): void {
  console.log('作成されました');
}

パブリックマウント():void{
  console.log('マウント済み')
}

'vue-property-decorator' から { Vue, Component, Emit } をインポートします。
@成分
デフォルトのクラスMyComponentをエクスポートし、Vueを拡張します。
  カウント = 0
  @エミット()
  addToCount(n: 数値) {
      this.count += n
  }
  @Emit('リセット')
  リセットカウント() {
      このカウント = 0
  }
  @エミット()
  戻り値() {
      10を返す
  }
  @エミット()
  入力変更(e) {
      e.target.value を返す
  }
  @エミット()
  約束（） {
      新しいPromiseを返します(resolve => {
      タイムアウトを設定する(() => {
          解決する(20)
      }, 0)
      })
  }
}

エクスポートデフォルト{
  データ（） {
      戻る {
      カウント: 0
      }
  },
  メソッド: {
      カウントを追加(n) {
      this.count += n
      this.$emit('add-to-count', n)
      },
      リセットカウント() {
      このカウント = 0
      this.$emit('リセット')
      },
      戻り値() {
      this.$emit('戻り値', 10)
      },
      入力変更(e) {
      this.$emit('on-input-change', e.target.value, e)
      },
      約束（） {
      const promise = 新しい Promise(resolve => {
          タイムアウトを設定する(() => {
          解決する(20)
          }, 0)
      })
      promise.then(値 => {
          this.$emit('promise', 値)
      })
      }
  }
 }

エクスポートデフォルト{
    名前空間:true、
    州：{
        :""
    },
    ゲッター:{
        getFoo(state) { state.foo を返す}
    },
    突然変異:
        setFooSync(状態、ペイロード){
            state.foo = ペイロード
        }
    },
    アクション:{
        setFoo({コミット},ペイロード){
            commot("getFoo",ペイロード)
        }
    }
}

輸入 {
  Vuexモジュール、
  突然変異、
  アクション、
  モジュールを取得、
  モジュール
} から "vuex-module-decorators" へ;

デフォルトクラス TestModule をエクスポートし、VuexModule を拡張します { }

@Module({ dynamic: true, store, name: "settings" })
クラス Settings は VuexModule を拡張し、ISettingsState を実装します {

}

@突然変異
プライベートSET_NAME(名前: 文字列) {
// ユーザー名を設定します this.name = name;
}

@アクション
パブリック非同期ログイン(userInfo: { ユーザー名: 文字列; パスワード: 文字列 }) {
  // ログインインターフェースとトークンの取得
  { ユーザー名、パスワード } = userInfo とします。
  ユーザー名 = ユーザー名.trim();
  const { data } = ログインを待機します({ ユーザー名、パスワード });
  setToken(data.accessToken);
  this.SET_TOKEN(data.accessToken);
}

エクスポート const UserModule = getModule(User);