この記事では主に vue と TypeScript の統合設定に関する最も簡単なチュートリアル (推奨) を紹介します。興味のある方は参考にしていただければ幸いです。
前書き
Vue の公式ドキュメントには、TypeScript と統合するための具体的な手順が記載されていません。インターネット上の他のチュートリアルには問題があるか、vue-cli で作成されたプロジェクトとは異なるため、開始するのが困難です。
以下に、vue-cliで作成したプロジェクトをTypeScriptと統合する最も簡単な構成を示します。
プロジェクトを初期化する
まずvue-cliでwebpackプロジェクトを作成します。デモンストレーションの便宜上、ここではルーターと eslint は開かれていません。状況に応じて開くことができます。
# vue init webpack vue-typescript ? Project name vue-typescript ? Project description A Vue.js project ? Author ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No
TypeScript 関連の依存関係とプロジェクトのその他の依存関係をインストールし、npm または cnpm を使用します
# cd /vue-typescript # npm install typescript ts-loader --save-dev # npm install
Configuration
ディレクトリ内の bulid/webpack.base.conf.js ファイルを変更します。 file module>rules 次のルールを追加します
{ test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } },
src ディレクトリに新しいファイル vue-shims.d.ts を作成して、単一ファイル内の ts コードを識別します vue
declare module "*.vue" { import Vue from "vue"; export default Vue; }
TypeScript 構成ファイルを作成しますプロジェクトのルート ディレクトリの tsconfig .json
{ "compilerOptions": { "strict": true, "module": "es2015", "moduleResolution": "node", "target": "es5", "allowSyntheticDefaultImports": true, "lib": [ "es2017", "dom" ] } }
src の下の main.js
の名前を main.ts
に変更しますmain.js
为main.ts
修改webpack.base.conf.js
下的entry>app为'./src/main.ts'
webpack.base.conf を変更します。 js</code >The <code>entry>app under is './src/main.ts'
src の下の App.vue ファイルを変更すると、それが下で行われたかどうかをテストできます <script lang="ts">
<script lang="ts"> import Vue, {ComponentOptions} from 'vue' export default { name: 'hello', data() { return { msg: 'this is a typescript project now' } } } as ComponentOptions
# npm run dev
上級
設定公式推奨 vue-class-component、https://cn.vuejs.org/v2/guide/typescript.html開発依存関係をインストール# npm install --save-dev vue-class-component
"allowSyntheticDefaultImports": true, "experimentalDecorators": true,
<script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' @Component export default class Hello extends Vue { msg: string = 'this is a typescript project now' }
Rreee-LERETALED推奨:vue VUE 2.5 introductionのタイプスクリプトの改善JavaScriptおよびTypeScript宣言型タイプのintrapscriptのいくつかのヒント
以上がVue と TypeScript の統合構成チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。