Vue と Typescript のビルド プロジェクト
今回は Vue と Typescript の構築プロジェクトについて説明します。Vue と Typescript の構築プロジェクトの 注意事項 は何ですか? 実際のケースを見てみましょう。
Typescript はフロントエンド界隈で徐々に普及してきており、Vue 2.5.0 では型宣言が改良され、TypeScript にさらに親しみやすくなりました
ただし、プロジェクト内で TypeScript を直接使用したい場合は、引き続き次のことを行う必要があります。プロジェクトにいくつかの変更を加えました
PS: 開発にはVisual Studio Codeを使用することをお勧めします
1. 依存関係をインストールします
まず、vue-cliを使用してプロジェクトを生成します
vue init webpack demo
次に、必要な依存関係をインストールします: typescript、ts-loader、vue-class-component
npm install typescript vue-class-component -D
npm install ts-loader@3.3.1 -D
上記の ts-loader をインストールするときに、バージョン 3.3.1 が指定されました
これは、このブログを書いているときの理由です(2018- 03-14)、最新バージョンの ts-loader がインストールされました 4.0.1 の場合、プロジェクトを開始するとエラーが報告されます
オンデマンドで導入できるいくつかのライブラリもあります:
tslint: ts コードを標準化し、tsllint-loader と一緒に使用する必要があります。 tslint-config-standard を追加するのが最適です。
vue-property-decorator: vue-class-component の拡張機能。 Vue の機能を組み合わせるいくつかのデコレータ (@Emit、@Prop など) を追加します。
vuex -class: vue-class-component に基づいて vuex のサポートを強化します。
2. Webpack を設定します
次に、./build/webpack.base.conf.js ファイルを変更します:
そうする必要がないように、resolve.extension に「.ts」を追加します。 ts ファイルの .ts suffix をインポートするときに書き込みます
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}module.rules に webpack の ts ファイルの解析を追加します
3. その他の設定
プロジェクトのルート ディレクトリに tsconfig.json ファイルを作成します。
// tsconfig.json{ "compilerOptions": { // 与 Vue 的浏览器支持保持一致
"target": "es5", // 这可以对 `this` 上的数据属性进行更严格的推断
"strict": true, // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015", "moduleResolution": "node"
}
}// vue-shim.d.tsdeclare module "*.vue" {
import Vue from "vue";
export default Vue;
}Four。ファイル変換
src ディレクトリの .vue ファイルを変更します。 すべての js ファイルのサフィックスを .ts
.vue ファイルを導入するときは、.vue サフィックスを手動で追加する必要があります
すべての .vue ファイルは、
リアルなヌード写真を作成する AI 搭載アプリ 写真から衣服を削除するオンライン AI ツール。 脱衣画像を無料で AI衣類リムーバー 完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。 使いやすく無料のコードエディター 中国語版、とても使いやすい 強力な PHP 統合開発環境 ビジュアル Web 開発ツール 神レベルのコード編集ソフト（SublimeText3）
ホットAIツール
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
Video Face Swap
人気の記事
ホットツール
メモ帳++7.3.1
SublimeText3 中国語版
ゼンドスタジオ 13.0.1
ドリームウィーバー CS6
SublimeText3 Mac版
ホットトピック
7697
15
1640
14
1393
52
1287
25
1229
29
AIはフェルマーの最終定理を克服できるか?数学者は100ページの証明をコードに変えるために5年間のキャリアを放棄した
Apr 09, 2024 pm 03:20 PM
フェルマーの最終定理、AIに征服されようとしている？そして、全体の中で最も意味のある部分は、AI が解決しようとしているフェルマーの最終定理は、まさに AI が役に立たないことを証明するものであるということです。かつて、数学は純粋な人間の知性の領域に属していましたが、現在、この領域は高度なアルゴリズムによって解読され、踏みにじられています。画像 フェルマーの最終定理は、何世紀にもわたって数学者を悩ませてきた「悪名高い」パズルです。それは 1993 年に証明され、現在数学者たちはコンピュータを使って証明を再現するという大きな計画を立てています。彼らは、このバージョンの証明に含まれる論理的エラーがコンピュータによってチェックできることを望んでいます。プロジェクトアドレス: https://github.com/riccardobrasca/flt
PyCharm プロジェクトをパッケージ化する簡単な方法を共有する
Dec 30, 2023 am 09:34 AM
シンプルでわかりやすい PyCharm プロジェクトのパッケージ化方法を共有する Python の人気に伴い、Python 開発のメイン ツールとして PyCharm を使用する開発者が増えています。 PyCharm は、開発効率の向上に役立つ多くの便利な機能を提供する強力な統合開発環境です。重要な機能の 1 つはプロジェクトのパッケージ化です。この記事では、PyCharmでプロジェクトをパッケージ化する方法をシンプルかつ分かりやすく紹介し、具体的なコード例を示します。プロジェクトをパッケージ化する理由Pythonで開発
PyCharm を詳しく見る: プロジェクトを簡単に削除する方法
Feb 26, 2024 pm 04:21 PM
タイトル: PyCharm の詳細: プロジェクトを削除する効率的な方法 近年、Python は強力で柔軟なプログラミング言語として、ますます多くの開発者に支持されています。 Python プロジェクトの開発では、効率的な統合開発環境を選択することが重要です。 PyCharm は、強力な統合開発環境として、プロジェクト ディレクトリを迅速かつ効率的に削除するなど、多くの便利な機能とツールを Python 開発者に提供します。以下では、PyCharm での削除の使用方法に焦点を当てます。
PyCharm の実践的なヒント: プロジェクトを実行可能な EXE ファイルに変換する
Feb 23, 2024 am 09:33 AM
PyCharm は、豊富な開発ツールと環境構成を提供する強力な Python 統合開発環境であり、開発者がコードをより効率的に作成およびデバッグできるようにします。 Python プロジェクト開発に PyCharm を使用するプロセスでは、Python 環境がインストールされていないコンピューター上で実行できるように、プロジェクトを実行可能 EXE ファイルにパッケージ化する必要がある場合があります。この記事では、PyCharm を使用してプロジェクトを実行可能な EXE ファイルに変換する方法と、具体的なコード例を紹介します。頭
基本チュートリアル: IDEA を使用して Maven プロジェクトを作成する
Feb 19, 2024 pm 04:43 PM
IDEA (IntelliJIDEA) は、開発者がさまざまな Java アプリケーションを迅速かつ効率的に開発できるようにする強力な統合開発環境です。 Java プロジェクト開発では、Maven をプロジェクト管理ツールとして使用すると、依存ライブラリの管理やプロジェクトのビルドなどをより適切に行うことができます。この記事では、IDEA で Maven プロジェクトを作成する基本的な手順を詳しく説明し、具体的なコード例を示します。ステップ 1: IDEA を開いて新しいプロジェクトを作成する IntelliJIDEA を開く
PyCharm チュートリアル: PyCharm で項目を削除するには?
Feb 24, 2024 pm 05:54 PM
PyCharm は、開発者が Python プロジェクトをより効率的に作成および管理できるようにする豊富な機能を提供する強力な Python 統合開発環境 (IDE) です。 PyCharm を使用してプロジェクトを開発するプロセスでは、スペースを解放したり、プロジェクト リストをクリーンアップしたりするために、不要になったプロジェクトを削除する必要がある場合があります。この記事では、PyCharm でプロジェクトを削除する方法を詳しく説明し、具体的なコード例を示します。プロジェクトを削除する方法 PyCharm を開き、プロジェクト リスト インターフェイスに入ります。プロジェクトリストでは、
スムーズなビルド: Maven イメージ アドレスを正しく構成する方法
Feb 20, 2024 pm 08:48 PM
スムーズなビルド: Maven イメージ アドレスを正しく構成する方法 Maven を使用してプロジェクトをビルドする場合、正しいイメージ アドレスを構成することが非常に重要です。ミラー アドレスを適切に構成すると、プロジェクトの構築を迅速化し、ネットワークの遅延などの問題を回避できます。この記事では、Maven ミラー アドレスを正しく構成する方法と、具体的なコード例を紹介します。 Maven イメージ アドレスを構成する必要があるのはなぜですか? Maven は、プロジェクトの自動構築、依存関係の管理、レポートの生成などを行うことができるプロジェクト管理ツールです。 Maven でプロジェクトをビルドする場合、通常は
Maven プロジェクトのパッケージ化プロセスを最適化し、開発効率を向上させます。
Feb 24, 2024 pm 02:15 PM
Maven プロジェクトのパッケージ化ステップ ガイド: ビルド プロセスを最適化し、開発効率を向上させる ソフトウェア開発プロジェクトがますます複雑になるにつれて、プロジェクト構築の効率と速度は開発プロセスにおいて無視できない重要な要素になっています。人気のあるプロジェクト管理ツールとして、Maven はプロジェクトの構築において重要な役割を果たします。このガイドでは、Maven プロジェクトのパッケージ化手順を最適化することで開発効率を向上させる方法を検討し、具体的なコード例を示します。 1. プロジェクトの構造を確認する Maven プロジェクトのパッケージ化ステップの最適化を開始する前に、まず確認する必要があります。
