ホームページ > 記事 > ウェブフロントエンド > 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" } }完全な tsconfig .json 設定項目については、公式ドキュメントを参照してください ./src ディレクトリに vue-shim.d.ts ファイルを作成し、ts に .vue ファイルを認識させます:
// vue-shim.d.tsdeclare module "*.vue" { import Vue from "vue"; export default Vue; }
Four。ファイル変換
src ディレクトリの .vue ファイルを変更します。 すべての js ファイルのサフィックスを .ts に変更し、webpack 構成ファイル ./build/webpack.base.conf のエントリを変更します。 js を main.ts に 変換された ts ファイルは .vue ファイルを認識しないため、.vue ファイルを導入するときは、.vue サフィックスを手動で追加する必要があります
すべての .vue ファイルは、