vueとnodeを使ってWebpack環境を構築する方法

今回はvueとnodeを使ってwebpack環境を構築する方法を紹介します。vueとnodeを使ってwebpack環境を構築する際の注意点を紹介します。

1. 環境設定

公式Webサイトにアクセスしてnode.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)をインストールします

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

インストールパッケージをダウンロードしたら、「インストール」をクリックするだけです。

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

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

インストールステートメントは次のとおりです: npminstall --globalvue-cli

webpack テンプレートに基づいて新しいプロジェクトを作成します

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

cmd に vue init webpack my-project (プロジェクトフォルダー名) と入力し、Enter キーを押してしばらく待つと、「git」以下の項目が次々と表示されます

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

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

「cnpm install」と入力し、Enter キーを押してしばらく待ちます

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

ウェブストームのインストール、プロジェクトの紹介

公式 Web サイトにアクセスして、webstrom インストール パッケージをダウンロードしてインストールします。

次に進みます。コンピューター システムに応じて、64 ビット システムまたは 32 ビット システムを選択して、js、css、html を選択し、

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

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

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

方法 1: cmd に次のように入力します: cnpm rundev

(明らかに、コードを変更するたびに、毎回 cmd に移動してコマンドを入力するのは非常に面倒なプロセスなので、ウェブストームで npm メニューを表示します。

package.json ファイルを右クリックし、[npm スクリプトの表示] をクリックしてメニューを表示します。今後実行するには、npm メニューで dev.

をダブルクリックします。 コマンド ラインで実行されているプロジェクトと dev で実行されているプロジェクトは同時に実行できないことに注意してください。一方を実行する場合は、もう一方を閉じる必要があります。そうしないと、ポートが占有されているというエラーが報告されます。

)

方法 2: ブラウザに次のように入力します: localhost:8080 (デフォルトのポートは 8080)

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

第一の状況: 港湾占有問題

したがって、 解決策 は次のようになります:

オプション 1: プロセス中にポートを閉じます。

a. cmd を開き、コマンド netstat –ano を入力します。すべてのポート番号が表示されます。 b. ローカルアドレスの下にはポート番号があり、PID はそのポート番号を占有するプログラムのプロセス番号です (プロセス番号を覚えておいてください)

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('パス')

そして、パスはどこから来たのでしょうか？

ルートディレクトリにconfigフォルダーがあるので、configディレクトリにあるindex.jsを開きます

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

タイマーを使用して js でカウントダウン関数を実装する方法

無効なタグ selected="selected" 属性に対処する方法

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