vue.js開発環境の構築方法

清浅
リリース: 2020-09-10 13:18:41
オリジナル
6101 人が閲覧しました

vue.js 開発環境の構築: 最初に [vue.js] をインストールし、次に npm パッケージ マネージャー、モジュール、webpack、および vue スキャフォールディングをそれぞれインストールし、最後に Vue 環境の初期化とプロジェクトの依存関係のインストールを開始します。ここからVueへ 開発環境が整いました。

vue.js開発環境の構築方法

[推奨チュートリアル: Vue.js チュートリアル]

環境準備

Node.js Javascript 実行環境

npm Node.js 配下のパッケージ管理ツール

webpack フロントエンドリソースのモジュラー管理およびパッケージ化ツール

vue-cli足場構築ツール

cnpm npmの淘宝ミラー

Vue.jsのインストール

1. Node.js のインストールは非常に簡単で、公式 Web サイトから必要なバージョンのオペレーティング システムをダウンロードしてから、次の手順に進みます。
インストールが完了したら、コマンド ラインで「node -v」と入力します。対応するバージョン番号が表示されれば、インストールは成功です。

vue.js開発環境の構築方法

2. npm は、Node.js とともにインストールされるパッケージ管理ツールで、コマンド ラインに直接 npm -v と入力すると、インストールが成功したかどうかを確認できます。

vue.js開発環境の構築方法

npm パッケージ マネージャーは利用可能ですが、npm ダウンロードが依存する必要があるパッケージのサーバー アドレスが海外にあるため、多くのリソースへのアクセスが非常に遅くなります。タオバオの国内ミラーをインストールできます。
3. コマンド ラインに「npm install -g cnpm --registry=http://registry.npm.taabao.org」と入力します。
このように、cnpm コマンドを使用してモジュールをインストールできます:

cnpm install [name]
ログイン後にコピー

4. webpack をインストールします

cnpm install webpack -g
ログイン後にコピー

5. vue Scaffolding をインストールします

npm install vue-cli -g
ログイン後にコピー

Vue .js 環境を初期化する

コードを保存するための新しいフォルダーをコンピューター上に作成します。次に、コマンド ラインを使用して、このフォルダーの cd ディレクトリ パスを入力します。
その後、コマンド

vue init webpack name
ログイン後にコピー

を使用して vue 環境を初期化します。このコマンドは、webpack がビルド ツールであるプロジェクトを初期化することを意味します。つまり、プロジェクト全体が webpack に基づいています。インストールプロセス中にいくつかの初期化設定が行われますが、デフォルト設定を使用して Enter キーを押し続けます。

vue.js開発環境の構築方法

上の図からも、vue が非常に思慮深く、すぐに開始するコマンド (開始するには)

インストール プロジェクトを指示していることがわかります。依存関係

は公式ウェアハウスからインストールする必要があります。npm サーバーは海外にあるため、このステップのインストール速度は非常に遅くなります。

npm install
ログイン後にコピー

国内ミラー cnpm からはインストールしないでください (後で多くの依存ライブラリが失われることになります)

cnpm install
ログイン後にコピー

vue ルーティング モジュール vue-router とネットワーク リクエスト モジュール vue-resource# をインストールします##

cnpm install vue-router vue-resource --save
ログイン後にコピー

プロジェクトを開始

npm run dev
ログイン後にコピー
#操作が成功すると、IP とポート番号が通知されます

##このアドレスにアクセスしてくださいvue.js開発環境の構築方法

#上の画像が表示された場合。おめでとうございます。Vue.js の旅を始める準備ができました。

以上がvue.js開発環境の構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート