記事ディレクトリ
Vueビルドスキャフォールディングプロジェクトおよび関連するナレッジノード、npm、webpackの紹介
1.予備準備環境
以下に示すように、環境変数のパスにノードのインストールディレクトリを構成する必要があります。
node.exeのインストールパスは以下のとおりです。
スキャフォールディングでは、主にnode.exeに付属のnpm（Node Package Manager）ツールを使用します。npmツールの主な機能は、インストールパッケージを管理することです。npmを介してパッケージ名からパッケージを検索し、パッケージをインストールできます。Npmはウィンドウに相当します。システム内のソフトウェアインストールマネージャー、npmのコマンドの一部は次のとおりです。
NPMコマンド：
npm -v
-view version
npm version-
すべてのモジュールのバージョンを表示
npm -help
description
npm search package name
-search module name
npm install package nameここで、installはiと省略できます-
現在のディレクトリに
パッケージをインストールしますnpm install -g package名前
-グローバルモードインストールパッケージ、グローバルインストールパッケージは一般的にいくつかのツールです
npmインストールパッケージ名--save
-installパッケージを依存関係に追加します。つまり、バージョン情報をpackage.jsonの依存関係に追加します。ランタイム依存関係* ********
npm install package name --save-dev
-installパッケージを依存関係に追加します。つまり、開発に依存するpackage.jsonのdevDepenciesにバージョン情報を追加します****** **
NPMインストール
現在のプロジェクトが依存するパッケージ-download
削除をrと略称することができNPM削除パッケージ名
-deleteパッケージを
理解：npm就相当于我们的软件管家，npm search 包名 可以搜索出相关的包
npm install 搜索到的包 可以下载相关的包，下载到当前文件夹里面
2.vueスキャフォールディングをダウンロードします
Vue Cli3ダウンロードコマンド：npm install -g @ vue / cli
足場3でもあるVueCli3をダウンロードすると、足場3は足場2をカバーするため、足場2を使用して足場プロジェクトを作成することはできなくなります。したがって、足場2を使用して足場プロジェクトを作成する場合は、 VueCli2で初期化テンプレートをプルします。プルコマンドはnpminstall -g @ vue / cli-initで、後でもう1つ書き込みます。
-init、scaffold 2のプロジェクトを初期化するコマンドは、vue init webpackプロジェクトの名前であり、initもあるため、pullコマンドは、追加の-initを使用してscaffoldをダウンロードするだけです。
Vue Cli3スキャフォールディング3プロジェクトを初期化するコマンドは、vuecreateプロジェクトの名前です。
Vue Cli2スキャフォールディング2初期化プロジェクトコマンドは、vue initwebpackプロジェクトの名前です。
3.Webpackはvueスキャフォールディングに自動的にダウンロードされます
Vue CLIはWebpackに依存する必要があり、以下に示すように、scaffoldingプロジェクトを作成するとWebpackが自動的にダウンロードされます。
Webpackテンプレートの主な機能は、すべてのリソースの圧縮などの操作を最適化することです。これは、開発プロセス中に機能の完全なセットを提供し、開発プロセスをより効率的にすることができます。
webpackの主な機能は、以下に示すように、プロジェクトに必要なすべてのモジュールをjsモジュールにパックすることです。
上記のパッケージ化プロセスは、コマンドnpx webpack ./src/main.js ./dist/bundle.jsを使用して実行できます。後で、。/ src /を配置するため、簡略化された操作npxwebpackコマンドを使用して同じ効果を実行します。 main.jsおよび./dist/bundle.jsファイルモジュールのパスは、以下に示すように構成ファイルに保存されます。
4.ノードの紹介
ノード内の各jsファイルはモジュールと見なされ、ノードxxx.jsを使用してjsファイルを直接実行できます。
そして、各jsファイルの内容は関数にラップされます。この関数はfunction（exports、requrie、module、__ filename、__ dirname）{}です。
したがって、exports、require（）、__ dirnameは、実際にはjsファイルのコンテンツが使用される関数のパラメーターである多くのjsファイルで使用できることがわかります。これらのパラメータの説明は次のとおりです。
輸出：
-このオブジェクトは、変数または関数を外部に公開するために使用されます。これにより、モジュールの関連コンテンツをrequire関数を介して他のモジュールに導入できます。エクスポートでは、次の図を使用します。
必要とする
-以下に示すように、外部モジュールのインポートに使用される関数
モジュール
-moduleは現在のモジュール自体を表します
-exportsはモジュールの属性です
-エクスポートはモジュールの属性であるため、関数と変数をエクスポートする場合は、exportsまたはmodule.exportsを使用できますが、エクスポートは1つずつしかエクスポートできませんが、module.exportsは一度に複数をエクスポートできます。以下に示すように：
__ファイル名：
現在のjsモジュールの絶対パスがD：\ Vue.jsフレームワーク\ Node.js作業パス\ 01.node \ 04-module.jsであるとすると、__ filenameの値は次のようになります。
D：\ Vue.jsframework \ Node.js作業パス\ 01.node \ 04-module.js
__dirname：
現在のjsモジュールファイルの絶対パスがD：\ Vue.js Framework \ Node.js作業パス\ 01.node \ 04-module.jsであるとすると、__ dirnameの値は、現在のjsモジュールファイルが配置されているディレクトリの絶対パスを表します。 、値はD：\ Vue.jsフレームワーク\ Node.js作業パス\ 01.nodeです。