Vue と TypeScript の統合構成チュートリアル

小云云
リリース: 2018-01-15 13:48:59
オリジナル
1329 人が閲覧しました

この記事では主に 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.jsmain.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">
ログイン後にコピー
test

統合は成功しました。src/components/Hello.vue ファイルを編集し、変更します


<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
ログイン後にコピー

テストは成功しました、今では TypeScipt になりますプロジェクト

上級

設定公式推奨 vue-class-component、https://cn.vuejs.org/v2/guide/typescript.html

開発依存関係をインストール


# npm install --save-dev vue-class-component
ログイン後にコピー

ts 設定ファイルを作成し、次の 2 つの設定を追加します


"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
ログイン後にコピー

Hello コンポーネントを書き換えます


<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'  
 }
ログイン後にコピー
vue-class-component を使用した後、初期データをインスタンスの属性として直接宣言できます。 data() {return{}} コンポーネントメソッドは、公式インスタンスなど、インスタンスとして直接宣言されたメソッドも使用できます。詳細な使用方法については、公式ドキュメントを参照してください

https://github.com/vuejs/ Vue-Class-Component#Vue-Class-Component


Rreee-LERETALED推奨:vue VUE 2.5 introductionのタイプスクリプトの改善JavaScriptおよびTypeScript宣言型タイプのintrapscriptのいくつかのヒント

以上がVue と TypeScript の統合構成チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!