まず、プロジェクトを作成します
使用し npm てインストールを vue-cli 3 し、typescript
npm i -g @vue/cli typescript
使用すると、vue createすぐに新しいプロジェクトのための足場を構築するためのコマンド
vue create vue-ts
VUE-TSは、上記のコマンドを実行した後、次のオプションが表示され、私たちのプロジェクトの名前です。
ここでは、押すことができ、単一の選択をする上/下键、オプションを切り替えるには押してenter次のステップを。これらの2つのオプションが表します：
defaultデフォルトのオプションは、背後にあるbabel、eslintこれらの二つの唯一の導入を表しますManully select features手動で選択されています
我々が使用する必要があるので Vue+TypeScript、そう選びます Manully select features。
押して、enter次のステップを入力します。
ここでオプションの数に記載されている上/下键スイッチングオプション、空格键このオプションが選択され、enter键次のステップは。あなたは、プロジェクトの実際の状況に応じて、適切なオプションを選択することができます。
ここで私は後ろの方法を学習していきます、VUE-TSの研究ノートを作るつもりですTypeScript使用 vuex してrouter選択し、したがって、 Babel、 Typescript、 Router、 Vuex、 CSS Pre-processors、 Linter/ Formatter その上にこれらのアイテム。
押して、enter次のステップを入力します。
ここでは、使用するかどうかを尋ねることで class风格、それが簡単に使用できるようにするためには、文法の部品 TypeScript我々はYを選択しました、
私たちは、そのオプションが選択されている場合、あなたは、Enterキーを押し、デフォルトのオプションを使用することができるかわかりません。
押して、enter次のステップを入力します。
ここでは、キーを押してデフォルトのオプションを使用するように入力し、スキップ、何を意味するかは明らかではありません。
押して、enter次のステップを入力します。
ここでは、使用するかどうかを尋ねている サーバは、フォールバックをインデックス化する必要があるため、本番環境では、あなたが選択した場合、モデルを適切な設定を行います。これは、同じによると、私たちのデモには影響しませんデフォルトのオプション。routerhistoryenter
押して、enter次のステップを入力します。
ここでの選択はCSS预处理器、自己が選択かもしれません。
押して、enter次のステップを入力します。
ここでチェックツール選択コードは、私が個人的に使用するように、です ESLint + Prettier。そのため Prettier だけではなく、フォーマットすることができjs代码、あなたもフォーマットできます css し、 vue中にテンプレートファイル template のコードセクション。
押して、enter次のステップを入力します。
ここでは、書式設定をコーディング選択するための選択があります Lint on save。
押して入力して、次のステップを入力します。
ここではどのような構成で尋ねている Babel，PostCSS, ESLint 、など
In dedicated config files特別な設定ファイルでIn package.json設定でpackage.jsonファイル
我々は選びました In dedicated config files 、
押して、enter次のステップを入力してください
選択した現在の設定、あなたは再利用プロジェクトを促進するために設定し、次回を保存するかどうか：ここでは、依頼することです。
我々はによって、スキップenter，、それを初期化するためのプロジェクトの完了を待っています。
第二に、コンフィギュレーション.prettierrc
コードは、ツール選択のチェックESLint + Prettier、時間をESLintとのPrettier競合のエントリが使用して、設定を閉じているPrettier設定項目を。この文書では、一覧表示設定項目の競合を。ESLintPrettier
個人がに慣れているので、 単一引用符の文字列を使用 していないセミコロン文が、文字列がきれい、二重引用符としてフォーマットし、自動的に文の終わりにセミコロンので、個別に設定する必要があります。設定も非常に簡単です：
（package.jsonと同じディレクトリ付き）プロジェクトのルートディレクトリに.prettierrc.jsファイルを作成し、以下の設定を追加することができます：
ファイルを変更.Eslintrc.js、その上に次のコード行を追加します。
今、設定が成功した場合を見てみましょう。まず、オープンSR / main.ts：
それは、セミコロン見ることができ、二重引用符で囲まれた文字列は、文の終わりを与えられている、その後、単にあなたが自動的にすべてのエラーを修正することができ、保存するために、CTR + Sを押してください。
