vscodeでvueプロジェクトを実行する方法

vue プロジェクトを vscode で実行する方法: 1. vue-cli スキャフォールディングを使用して空の vue プロジェクトを構築します; 2. VSCode を開いて vetur プラグインをダウンロードします; 3. eslint プラグインをダウンロードしてインストールしますin; 4. vue プロジェクトを開き、git を使用します。プロジェクトを反復処理するだけです。

この記事の動作環境: Windows7 システム、vue2.5.17 バージョン、DELL G3 コンピューター

vue の実行方法vscode 上のプロジェクト?

序文

以前都是用webstorm编写前端代码，最近开始尝试使用VSCode来写，目前还是有些懵逼的，一步步将使用流程写下来便于之后自己再次配置。

具体的なプロセス:

1: まず、私たちは空の vue プロジェクトを構築するには、vue-cli スキャフォールディングを使用する必要がありますが、詳細は説明しません。

2: VSCode を開いて vetur プラグインをダウンロードします。

丸で囲まれたアイコンをクリックします。左側のアイコンをクリックして拡張プラグインを開き、上部の検索ボックスで

vetur プラグインを検索してダウンロードしてインストールします。 ダウンロードしてインストールすると、拡張機能リストに拡張機能が表示されます。たとえば、私のバージョンは 0.29.1 です。
次に、設定のために settings.json ファイルを開く必要があります:

 "emmet.syntaxProfiles": {
       "vue-html":"html",
       "vue":"html"
   },

3: インテリジェントなエラー検出プラグインである eslint プラグインをダウンロードしてインストールします。

#左側の丸で囲まれたアイコンをクリックして拡張プラグインを開き、上部の検索ボックスで

eslint プラグインを検索します。ダウンロードしてインストールするだけです。 ダウンロードしてインストールすると、拡張機能リストに拡張機能が表示されます。たとえば、私のバージョンは 2.1.13 です。
次に、設定のために settings.json ファイルを開く必要があります:

"eslint.validate": [
      "javascript",
       "gavesciptreact",
       "html",
       "vue"
   ],
   "eslint.options": {
       "plugins":["html"]
   },

4: 最初のステップで構築した空の vue プロジェクトを開きます。

ターミナルに「

npm install」と入力し、まず対応する依存関係をダウンロードします。 最後の入力:
npm start、プロジェクトの実行:
ブラウザで対応するアドレスを開くと、下の図が表示されます。これは、操作が成功したことを意味します:

5: プロジェクトの反復に git を使用する

詳細については、VSCode が git を使用する方法を参照してください

推奨される学習: 「

vue チュートリアル 」 「

以上がvscodeでvueプロジェクトを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。