最近、プロジェクトでは、ts を使用して元の vue プロジェクトを変換する必要があります。これは、中規模および大規模プロジェクトの開発トレンドになるはずです。私は優れた入門チュートリアルを見て、それをいくつかの拡張レコードと組み合わせました。インストールからVueコンポーネントの記述まで解説した記事なので、入門に最適です。 1. Typescriptの紹介npm インストール vue-class-component vue-property-decorator --save npm で ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev をインストールします。
2. 設定ファイル webpack 設定設定場所はプロジェクトによって異なります。プロジェクトが vue cli 3.0 で作成された場合は、vue.config.js で設定する必要があります。3.0 未満のバージョンの場合は、webpack.base.conf で設定する必要があります。 (以下の手順はwebpack.base.confファイルで変更します) .ts をresolv.extensionsに追加すると、.ts サフィックスを記述せずに ts ファイルをコードに導入できます。 解決する: { 拡張子: ['.js', '.vue', '.json', '.ts'], エイリアス: {} } module.rulesにtsルールを追加する モジュール: { ルール: { テスト: /\.ts$/, 除外: /node_modules/、 強制: 'pre'、 ローダー: 'tslint-loader' }, { テスト: /\.tsx?$/, ローダー: 'ts-loader', 除外: /node_modules/、 オプション: 追加Tsサフィックス: [/\.vue$/] } } ] } tsconfig.json 設定 { // コンパイラオプション "compilerOptions": { // 出力ディレクトリ "outDir": "./output", // デバッグに使用できるソースマップを含めるかどうか "ソースマップ": true, // 厳密モードで解析する "strict": false, // 使用されるモジュールシステム "module": "esnext", // モジュールの処理方法 "moduleResolution": "node", // ターゲット ES バージョンをコンパイルして出力します "target": "es5", // デフォルトのエクスポートを設定していないモジュールからのデフォルトのインポートを許可する "allowSyntheticDefaultImports": true, // 各ファイルを個別のモジュールとして扱う "isolatedModules": false, // デコレータを有効にする "experimentalDecorators": true, // デザインタイプメタデータを有効にする(リフレクション用) "emitDecoratorMetadata": true、 // エラー "noImplicitAny": false、式と宣言に暗黙の any 型がある場合 // 関数のすべての戻りパスが値を返すわけではないため、エラーが報告されます。 "noImplicitReturns": true、 // tslib から外部ヘルパーライブラリをインポートします: __extends、__rest など。"importHelpers": true, // コンパイル中にファイル名を印刷する "listFiles": true, // コメントを削除する "removeComments": true, "suppressImplicitAnyIndexErrors": true、 // JavaScript ファイルのコンパイルを許可する "allowJs": true, // 非相対モジュール名を解析するためのベースディレクトリ "baseUrl": "./", //特殊モジュールのパスを指定する "paths": { "jQuery": [ 「node_modules/jquery/dist/jquery」 ] }, // コンパイル時に導入する必要があるライブラリファイルのリスト "lib": [ 「ドム」、 "es2015", 「es2015.約束」 ] } } tslint.json 構成は、ディレクトリに新しい tslint.json ファイルを追加します。以前に tslint-config-standard をインストールしたので、tslint-config-standard のルールを直接使用できます。ファイルは次のとおりです。 { "拡張": "tslint-config-standard", 「グローバル」: { 「必須」: 真 } } 3. プロジェクトに.tsを認識させるTypeScriptはデフォルトでは*.vueサフィックスを持つファイルをサポートしていないため、vueプロジェクトに導入する場合はvue-shim.d.tsファイルを作成し、ルートディレクトリに配置する必要があります。 モジュール '*.vue' を宣言します。 'vue' から Vue をインポートします。 デフォルトの Vue をエクスポートします。 } 4. Vueコンポーネントの記述vue コンポーネントのほとんどのメソッドは、ng のインジェクションと同様に、現在定義されているデータを示すために @xxx (デコレータ) を使用するように変更されています。ビジネスロジックの js 部分は ts で直接記述できます。 基本的な書き方
<script lang="ts"> 「vue-property-decorator」から Component、Vue をインポートします。 @成分 デフォルトのクラスTestをエクスポートし、Vueを拡張します。 }; </スクリプト>
data() でデータを定義するdata内のデータは、元の デフォルトのクラスTestをエクスポートし、Vueを拡張します。 公開メッセージ1: 文字列 = "heimayu"; public message2: string = "本当に美しいですね"; } 小道具Propsは、次のように記述できるデコレータを使用する必要があるため、データほど快適ではありません。 @プロパティ() propA:文字列 @プロパティ() propB:数値 $emit値 パラメータなし // 元の記述: this.$emit('bindSend') // ここで this.bindSend() と記述します // 複数の定義 @Emit() bindSend():文字列{ このメッセージを返す } パラメータ付きメソッド // 元の記述: this.$emit('bindSend', msg) // 直接書きます: this.bindSend(msg) // @Emit() の下に複数の定義があります bindSend(メッセージ:文字列){ // 何かをする } パラメータ付きで発行する // ここで、test はコンポーネント参照を変更する @ イベント名です。この場合、@bindSend2 の代わりに @test と記述する必要があります。 @Emit('テスト) プライベートbindSend2(){ } 観測データを見る //原文を見る:{} @Watch('propA',{ 深い:本当 }) テスト(新しい値:文字列、古い値:文字列){ console.log('propA の値が変更されました' + newValue); } 計算されたプロパティ パブリック get computedMsg(){ return '計算されたプロパティはここにあります' + this.message; } パブリックセットcomputedMsg(メッセージ: 文字列) { } 完全なコード例<テンプレート> <div class="テストコンテナ"> {{メッセージ}} <input type="button" value="クリックして親メソッドをトリガー" @click="bindSend"/> <input type="button" value="クリックして親メソッドをトリガー" @click="handleSend"/> <input type="button" value="クリックして親メソッドをトリガー" @click="bindSend2"/> <!-- <こんにちは></こんにちは> --> </div> </テンプレート> <script lang="ts"> 「vue-property-decorator」から { Component、Prop、Vue、Watch、Emit } をインポートします。 「./HelloWorld.vue」からHelloをインポートします。 // このクラスがvueコンポーネントであることを示す @Component({ コンポーネント: こんにちは } }) デフォルトのクラスTestをエクスポートし、Vueを拡張します。 // 元のデータのデータが展開され、ここに書き込まれます public message: string = "asd"; //元のプロパティのデータを展開して、@Prop({ タイプ: 数値、 デフォルト: 1, 必須: false }) propA?: 数字 @プロパティ() propB:文字列 //元の計算値 パブリック get computedMsg(){ return '計算されたプロパティはここにあります' + this.message; } パブリックセットcomputedMsg(メッセージ: 文字列) { } //元のウォッチ属性 @Watch('propA',{ 深い:本当 }) パブリックテスト(新しい値:文字列、古い値:文字列){ console.log('propA の値が変更されました' + newValue); } // 以前は、親に値を渡す必要がある場合、メソッド内でのみemitを使用できました。現在は@Emit()を処理するためにemitを使用する必要があります。 プライベートbindSend():文字列{ このメッセージを返す } @エミット() プライベートbindSend1(msg:文字列,love:文字列){ // 処理したくない場合は、次のように記述する必要はありません。パラメータは自動的に返されます // msg += 'love'; // メッセージを返します。 } //メソッド内の元のメソッドがレイアウトされます public handleSend():void { this.bindSend1(this.message、'love'); } // ここでのemitのパラメータは、前の$emit('parent defined method')と同様に、親が受け入れるものを示します。 @Emit('テスト') プライベートbindSend2(){ 'これはテストで受け入れられます' を返します。 } } </スクリプト> これで、vue プロジェクトで ts (typescript) を使用するための入門チュートリアルに関するこの記事は終了です。より関連性の高い vue typescript 入門コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker 経由で wsl の tar ファイルを作成する方法
>>: テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます
具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...
目次JavaScript のプライベート クラス フィールドとプライバシーの必要性JavaScrip...
Alibaba Cloud サーバーを購入した後、新しいインスタンスが正常に動作できるようにするには...
1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...
1. 仮想環境virtualenvのインストール1. virtualenvをインストールするpip3...
1. ダウンロード1. MySQL msi 公式 Web サイトから最新のダウンロードをクリックす...
目次要件の説明問題の説明問題分析問題解決質問の拡張要件の説明このプロジェクトでは、まずユーザーが質問...
おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...
1. テーブルAのデータを使用してMySQLのテーブルBの内容を更新するたとえば、データ テーブル内...
目次01 アトミックDDLの紹介02 一部のDDL操作の実行動作の変更03 DDL 操作のログを表示...
注: このデモはミニプログラム環境でテストされており、他の h5 および pc Web ページにも適...
1. /etc/init.dディレクトリに新しいrabbitmqを作成します。 [root@loca...
react-routerでは、コンポーネント内のジャンプは<Link>で使用できます。し...
Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...
私は最近、YouTube の CSS アニメーション効果チュートリアル シリーズをフォローしています...