この記事は、vscode で vue 環境を構築するプロセスを記録します。初心者 Xiaobai が学び、みんなと議論したいと思っています~
1.nodejsをインストールする
公式サイトリンク：nodejs公式サイト
パソコンの機種の表示に合わせてダウンロードし、インストール時のインストールパスの指定に注意して「次へ」を選択し続けてください。
2. 環境変数を設定する
1. 次の図に示すように、nodejs インストール ディレクトリに 2 つのフォルダー、node_cache (nodejs キャッシュ) と node_global (グローバル パッケージ ストレージ) を作成します。
2. cmd コマンド プロンプトを開き、構成ファイルのパスは次のとおりです。
3. 環境変数を構成します
。 [システム プロパティ] -> [詳細設定] -> [環境変数] -> [新しい環境変数]:
結果は次のとおりです。
3. vscodeでVue環境を構築する
1. プラグイン: ① ESLintJavaScript コードスタイルを統一するためのツールをインストールします。②
2. vscode ターミナルに次のコマンドを入力します。
npm i -g @vue/cli
エラーが報告された場合は、
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程的名称...
vscode を閉じるか、管理者として再度開くことを選択するか、環境変数が正しく構成されているかどうかを確認できます。
webpack をインストールします: js パッケージ化ツール
npm install -g webpack
ノード、npm、vueのバージョンを確認する
node -v
npm -v
vue -V
vue -Vに注意してください。エラーが報告された場合は、
vue : 无法加载文件 D:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本...
まず管理者として vscode を実行し、ターミナルで次のコマンドを入力します。
get-ExecutionPolicy
set-ExecutionPolicy RemoteSigned
get-ExecutionPolicy
vue -V
3. vue プロジェクトを作成します。demo
は vue プロジェクトの名前で、ターミナルに次のコマンドを入力します。
vue init webpack demo
表示された場合:
プロンプトに従って次を入力し、次のオプションneo4j_echarts>npm i -g @vue/cli-init
を再入力しますvue init webpack demo
。表示される場合は、Enter キーを入力してください。
次のプロンプトが表示されます。
上記 2 つのコマンドを入力すると、最終結果は次のようになります。
リンクをクリックしてプロジェクトの作成を完了します。
4. エラー報告を処理する
vue ファイルの実行時にエラーが報告される
Virtual script not found, may missing <script lang="ts"> / "allowJs": true / jsconfig.json.
解決策: プロジェクト ディレクトリに jsconfig.json 構成ファイルを作成し、「allowJs」: true を設定します。
{
"compilerOptions": {
"allowJs": true,
}
}