1.node.js をインストールする
1. この例の環境
node.js: v16.14.0
npm:8.3.1
vue:@vue/cli 5.0.1
2. Node.js 環境のインストールとテスト
vue のインストールと作成は、node.js (JavaScript 実行環境) の npm (パッケージ管理および配布ツール) に依存するため、node.js を最初にインストールする必要があります。
ダウンロードURL:Node.js(nodejs.org)
ダウンロードが完了したら、インストールが成功したかどうかを確認します。
検出方法:cmdコマンドウィンドウを開き(Window + R、cmdと入力してEnterキーを押す)、node -vと入力してEnterキーを押すと、node.jsのバージョンが正常に表示されればインストール済みです。図1に示すように、
npmはnode.jsと一緒にインストールされますので、node.jsが正常にインストールされていればnpmがインストールされています。検出方法:cmdコマンドウィンドウでnpm -vと入力してEnterキーを押すと、npmのバージョンが正常に表示されます。
2. vue スキャフォールディングをインストールします: Vue CLI
ダウンロードリンク:ホーム | Vue CLI (vuejs.org)
公式ドキュメントによると、インストール コマンドは「npm install -g @vue/cli」です。ただし、ネイティブ npm のダウンロード速度は実際には満足できるものではないため、Taobao ミラーを使用してインストールします。
コマンド: npm install -g @vue/cli --registry=https://registry.npm.taobao.org インストールが完了したら、cmd コマンド ウィンドウに vue -V (大文字の V) と入力し、Enter キーを押して @ を表示します。 vue/ 通常 cli バージョンは、インストールが成功したことを示します。
3.vue プロジェクトを作成する
まず、D ドライブのルート ディレクトリにプロジェクトを作成する予定です.コマンド ウィンドウで d: と入力して Enter キーを押し、次に vue create myvue と入力して Enter キーを押すと、図のように myvue フォルダーが作成されます。下図
Default (bable, eslint) // デフォルト
機能を手動で選択 // 項目を手動で作成することを選択します (ここでは、手動で作成することを選択し、上矢印と下矢印を使用して選択します)
(*) Babel // 高次構文変換をサポート
( ) TypeScript // TypeScript を使用したソース コードの記述をサポート
( ) プログレッシブ Web アプリ (PWA) のサポート // PWA をサポート
(*) ルーター // ルート
(*) Vuex // ストア
( ) CSS プリプロセッサ // CSS プリプロセッサ
( ) Linter / Formatter // コード スタイルのチェックとフォーマット
( ) 単体テスト // 単体テストをサポート
( ) E2E テスト // E2E テストをサポート
キャリッジ リターンの後、スペース バーと上下の矢印キーを使用して、図の選択と一致させてから、キャリッジ リターンを押します。
3.x を選択し、Enter キーを押します
Enter キーを押した後、再度 [いいえ] を選択し、もう一度 [Enter] をクリックすると、依存関係パッケージがダウンロードされ、プロジェクトが作成されます。
ダウンロードが完了すると、次の図が表示されます
入力: cd myvue を入力し、Enter キーを押して myvue プロジェクトに入ります。
入力: npm run serve Enter キーを押してサービスを開始します
下の図に示すように、ブラウザーのアドレス バーに http://localhost:8080/ と入力し、通常どおり Web ページを開きます。これは、プロジェクトが正常に作成されたことを示します。