vue、node、webpackの環境構築チュートリアルを詳しく解説

この記事では主に vue+node+webpack 環境構築チュートリアルを詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。

1. 環境構築

ノードのバージョンに注意してください。Harmony モードをサポートするノードのみが es6 をサポートし、webpack に基づいてプロジェクト名をビルドするときにエラーは報告されません。最新バージョンをお勧めします。

インストールパッケージをダウンロードしたら、クリックするだけでインストールできます。テスト インストールを成功させるためのインターフェイスは次のとおりです:

1.2. npm を使用して webpack をインストールします。コマンド ライン ステートメントは npm install webpack -g です。テスト インストールが成功するためのインターフェイスは次のとおりです:

1.3. 次の手順では、以下に示すように Taobao イメージをインストールします:

1.4。 npm を使用して vue-cli をインストールするには時間がかかり、2 時間以上かかる場合があることに注意してください。 インストール ステートメントは次のとおりです。 webpack テンプレート

コマンド 行ステートメントは vue init webpack my-project (my-project はファイル名であり、ファイル名は小文字のみ使用できます) です。新しいテンプレート プロジェクトを作成するときは、指定したフォルダーに移動する必要があります。

cmdに

vue init webpack my-project

(プロジェクトフォルダー名)を入力し、Enterを押してしばらく待つと、「git」以下の項目が次々と表示され、以下のように操作できます

コマンドを実行すると、my-project フォルダーの下に次の内容が表示されます。

新しいプロジェクトを作成するときに、次のエラーが報告された場合、ノードのバージョンが低すぎてサポートされていないことを意味します。ハーモニーモード (おそらく es6 をサポートしていますが、それ以外の場合はサポートしていません。詳細については専門家の指導が必要です。) ノードの上位バージョンに置き換える必要があります。エラーは次のとおりです:

5. cmd に依存関係

をインストールします。「cd my-project (プロジェクト名)」と入力し、Enter キーを押して、特定のプロジェクト フォルダーを入力します

2)。インストールして Enter キーを押し、しばらく待ちます

このコマンドの実行後に次のエラーが発生する場合があります。解決策は次のとおりです:

プロジェクト フォルダーに戻ると、追加の node_modules ファイルがあることがわかります。プロジェクト構造フォルダー内にあります (このファイルの内容は、以前にインストールされた依存関係です)

スキャフォールディングに基づいて作成されたデフォルトのプロジェクト構造は次のとおりです:

6. Webstorm のインストール、プロジェクトの紹介

公式に移動します。 Webstrom インストール パッケージをダウンロードしてインストールします。

次へ進み、お使いのコンピュータ システムに応じて、64 ビット システムまたは 32 ビット システムのインストールを選択し、js、css、html àjetbrains を選択してインストールします

ウェブストームのファイルの下で開くを選択します (プロジェクト フォルダーを選択します)

とても簡単そうに見えますが、数日以内に間違えてしまうのではないかと心配です。

7. テスト環境が正常にセットアップされているかどうか

方法 1:

cmd に入力:

cnpm rundev

(明らかに、コードを変更するたびに cmd に移動して入力するのは非常に面倒なプロセスです。毎回コマンドを実行するため、Webstorm で npm メニューを表示します package.json ファイルを右クリックし、[show npm scripts] をクリックしてメニューを表示します。今後実行するには、npm で dev をダブルクリックします。 コマンドラインでのプロジェクトの実行とプロジェクトの実行を同時に実行する場合は、もう一方を閉じる必要があることに注意してください。そうしないと、ポートが占有されているというエラーが報告されます。

)

方法 2:

ブラウザに「localhost:8080」と入力します (デフォルトのポートは 8080 です)

場合 run コマンドを入力すると、エラーが報告されます。以下の図に示すように、2 つの状況があります:

最初の状況: ポート占有の問題

その後、

解決策

は次のとおりです:

オプション 1: プロセスでポートを閉じる。 a. cmd を開き、コマンド netstat –ano を入力します。

b. ポート番号は、そのポート番号を占有するプログラムのプロセス番号です。プロセス番号)

c .タスクマネージャーを開き (ctrl + alt + delete)、「プロセス」をクリックし、「表示」をクリックして「列の選択」を選択し、「OK」をクリックすると、ポートを占有しているプロセスプログラムが見つかります

d. 記憶されているプロセス番号を見つけて閉じます

オプション 2: config/index.js ファイルで、ポート番号を変更します。ポート: 新しいポート番号。

2 番目: npm のバージョンが低すぎるため、アップグレードする必要があります:

解決策:

a. コマンドを入力します: npm install -g npm

b. C:Users{あなたの Windows ユーザー名}AppDataRoamingnpmnode_modulesnpm をコピーします。ファイルを NodeJS インストール ディレクトリの node_modulesnpm にダウンロードし、元のファイルをすべて上書きします

(または、比較方法を使用して前の手順を再度実行します)

実行後の効果は以下のようになります:

2. 個人的なニーズに基づく変更

1. vue.js は、デフォルトのポート番号 8080 を指定されたポートに変更します。

npm run dev を実行すると、実際にはルート ディレクトリの package.json が呼び出されます

package.json を開いた後、そのようなコードを見つけることができます

"scripts":{
"dev":"nodebuild/dev-server.js",
"build":"nodebuild/build.js",
"lint":"eslint--ext.js,.vuesrc"

}

これから、ビルドディレクトリにあるdev-server.jsファイルをチェックする必要があります

それはdev-server.jsファイルにあります

varuri ='http ://localhost:'+port

ここで探しているポートは、dev-server.js の先頭で

varpath=require('path')

です。パスはどこから来ていますか？

ルート ディレクトリに config フォルダーがあります。その名前から、config ディレクトリにあるindex.js を開きます。

dev:{
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
cssSourceMap:false

}

ポートを変更できるだけでなく、変更することもできます。必要に応じて他の構成情報も変更します。

関連する推奨事項:

AngularJS 環境構築チュートリアル

vue 環境構築に関する簡単なチュートリアルの詳細な例

PHP サーバー環境の構築に関する最も明確なグラフィック チュートリアル

以上がvue、node、webpackの環境構築チュートリアルを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。