Vue 初心者ガイド: 最初の Vue-cli スキャフォールディングプログラムの作成

1. Vue - 最初の vue-cli プログラム

Vueの開発はNodeJSに基づいています。実際の開発では、Vue-cliスキャフォールディング開発、vue-routerルーティング、状態管理にvuexを使用しています。Vue UIについては、通常、ElementUI（Ele.me製）またはICE（Alibaba製）を使用して、フロントエンドプロジェクトを迅速に構築します~~

要素UI

氷

1.1 vue-cliとは

vue-cli によって公式に提供されるスキャフォールド。vue プロジェクトテンプレートをすばやく生成するために使用されます。

定義済みのディレクトリ構造と基本コードは、Maven プロジェクトを作成するときに、スケルトンプロジェクトを作成することを選択できます。この推定プロジェクトがスキャフォールディングであり、開発が高速化されます。

プロジェクトの機能

統一されたディレクトリ構造
ローカルデバッグ
ホットデプロイメント
ユニットテスト
統合パッケージングと発売

1.2 必要な環境

Node.js
ギット

nodejs が正常にインストールされていることを確認します。

cmd に node -v と入力して、バージョン番号が正しく印刷できるかどうかを確認してください。
cmd に npm -v と入力して、バージョン番号が正しく印刷できるかどうかを確認してください。

ここに画像の説明を挿入

npmはソフトウェアパッケージ管理ツールです

vue-cliをインストールする

vue.js で vue.js をインストールします。
#インストールが成功したかどうかをテストする#Vueアプリケーションを作成するために使用できるテンプレートを確認します。通常はwebpackを選択します
ビューリスト

ここに画像の説明を挿入

ヒント: vue listクエリが失敗する場合は、path環境変数にnode_globalターゲットを追加してください。
ここに画像の説明を挿入

1.3 最初のvue-cliプログラム

1.3.1 Vueプロジェクトを作成する

コンピューターに空のフォルダーを作成するだけです。ドライブ D の下に新しいディレクトリを作成します。

ここに画像の説明を挿入

1.3.2 webpackテンプレートに基づいてVueアプリケーションを作成する

#1. まず、対応するディレクトリcdE:\IDEACode\Vue\vueに入る必要があります。
#2. Myvueはトップの名前です。必要に応じて名前を付けることができます。vue init webpack myvue

ずっと「いいえ」を選択してください。

例:

1.3.3 初期化して実行

CD マイビュー
npmインストール
npm 実行 dev

コマンドが正常に実行されると、次のプロンプトが表示されます。

ここに画像の説明を挿入

ブラウザでポートを開く

ここに画像の説明を挿入

index.jsでポート番号やその他の設定ファイルを変更できます。

ここに画像の説明を挿入

要約する

これで、Vue 初心者のための初めての vue-cli プログラム作成ガイドに関するこの記事は終了です。初めての vue-cli プログラムの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: