Vue でプロジェクトを作成するための詳細な手順

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 ページを開きます。これは、プロジェクトが正常に作成されたことを示します。

おすすめ

転載: blog.csdn.net/qq_60633836/article/details/123343398