1.フロントソフトウェアのインストール

node.js をインストールする

Vue.jsnode環境に基づいて動作するため、最初にインストールする必要がありますnode.js。

nodejs.orgの公式 Web サイトから最新バージョンをダウンロードしてインストールするだけです。
Win + Rキーを使用してターミナルを開き、入力npm -vして Enter キーを押し、数字の文字列が表示されれば、インストールは成功です。

vscode をインストールする

vscode完全な名前はvisual studio code、現在の主流のコードエディターであり、公式 Web サイトからダウンロードしてインストールすることもできます。

vscode 公式 Web サイトのリンクからダウンロードしてインストールします。

2. Vue.js プロジェクトを作成する

ファイルの保存場所を決定する

まず、(これはカスタムです) などのプロジェクトを保存する場所を見つける必要がありますE:\GitBase。次に、このフォルダーの下にvueprojフォルダープロジェクト全体を保存します。

自分の状況に合わせて、プロジェクトの保存場所とフォルダー名を決定します
プロジェクトを収容すること桌面 Desktopはお勧めしません。C盘根部 C:\

プロジェクトの場所でターミナルを開きます

Win + Rキーを使用してターミナルを開くと、 C:\Users\AdministratorThis is your 当前所指向terminal file directory があることがわかります。
ターミナルを介してプロジェクトを作成するため、このディレクトリを今すぐあなたに向ける必要があります确定文件存放的位置。

その場所でフォルダーを開く/作成します。たとえばE:\GitBase、その中に何もないことがわかります。
テキスト此电脑 > 应用程序(E:) > GitBaseで、それを入力してcmd、Enter キーを押します。
E:\GitBaseディレクトリに端末があります。

もちろん、コマンドを使用して現在のファイルディレクトリを直接リダイレクトすることもできますが、とりあえずこれを最初に行うことができます。

vscode でフォルダーとターミナルを開く

上記のターミナルを開く方法を理解したら、vscode を使用してこの操作を実行します。

vscode を開き、言語を切り替えるように求められたら、中国語に切り替えます。
画面の中央をクリックする启动 - 打开文件夹か、上部のメニューバーで選択します文件 - 打开文件夹。
ここで私の项目位置目录ようなE:\GitBase。

このようにして、フォルダーが正常に開かれ、フォルダー名が左側に文件目录略缩图表示されていることGitBaseこれは、vscode でこのフォルダーのすべてのコンテンツを回避することを意味します。

次にをクリックします终端 - 新建终端。
E:\GitBasevscode に埋め込まれたターミナルを取得します。これは、より便利で実用的です。

コマンドを入力して Vue.js プロジェクトを作成します

vscode のターミナルを開いた後、前のセクションの内容を続けます。

入力npm init vue@latest
テキスト行が表示されますVue.js - The Progressive JavaScript Framework。そうでない場合は、npm のソースを変更してみてください (ダウンロードソースサーバーを切り替えます)。
以下は、あなたの名前を入力することを思い出させますproject name。たとえば、ここに入力しますvue。これは、その後の開発Vue.jsのための。
次に、 EnterEnter キー続行します。当分の間、他の拡張機能をインストールする必要はありません。

次に、作成が完了したことを示す次の行が表示されます。

Done. Now run:
  cd vue
  npm install
  npm run dev

3. Vue.js プロジェクトを開始する

上記の手順を理解する

前のセクションの内容を完了したら、上記の行の意味を理解しましょう。

cd vueからE:\Gitbase入力するE:\Gitbase\vue。
npm install現在のnodeプロジェクト作業Vue.jsに基づいています.当面は、新しい依存関係をインストールする限り、このコマンドを入力できることだけを知っておく必要があります.今では、一度だけ入力する必要があります.足場プロジェクトの初期化を完了します。nodeVue.js
npm run devこれnodeはdev、このスクリプトを実行するためのコマンドを表すコマンドでもあります。また、当分の間だけ知っておく必要があります。これを入力して、プロジェクト全体を実行します。

Vue.js プロジェクトを正常に開始する

入力しnpm run devてプロジェクトが正常に開始され、次のメッセージが表示されます。

  VITE v4.0.3  ready in 321 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

この時点で、ターミナルのリンクをCtrl押したままクリックしてを開きます.のデフォルトプロジェクトがここで正常に開始されました. おめでとう, あなたは成功に向けて大きな一歩を踏み出しました~http://127.0.0.1:5173/前端页面Vue.js

vue-cli スキャフォールディングに基づく Vue.js プロジェクト構築の初期化 (vue 学習 - Ch1.1 初期化)

記事ディレクトリ