記事のディレクトリ

vue-cliスキャフォールディング
- 必要な環境のインストール
npmコマンドの説明
vue-cliアプリケーションを作成する
webpackの学習と使用（vueプロジェクトの実行プロセス）

vue-cliスキャフォールディング

vue-cliは、vueプロジェクトテンプレートをすばやく生成するために使用される公式のスキャフォールディングです。

vue-cliは、ディレクトリ構造と基本コードを事前に定義します。（Mavenプロジェクトの作成時に生成されるプロジェクトディレクトリと同様）開発を高速化できます！

vue-cliはMavenと考えることができます！次の機能があります。

統一されたディレクトリ構造
ローカルデバッグ
ホット展開
単体テスト
統合されたパッケージング環境

必要な環境のインストール

Node.js：https：//nodejs.org/en/（次のステップになる頭脳はありません。環境変数が自動的に読み込まれます）
Git：https：//git-scm.com/downloads

ミラー：https：//npm.taobao.org/mirrors/git-for-windows/

インストールが成功したことを確認します。

cmdに入力 npm -vバージョン番号を正常に印刷できるかどうかを確認するには
cmdに入力 node -vバージョン番号を印刷できるかどうかを確認するには

npmは、pipに似たパッケージ管理ツールです。

淘宝網ミラーを追加（cnpm）

# -g 是全局安装的意思
npm install cnpm -g

インストールされているもののストレージアドレス： C：\ Users \ ASUS-PC \ AppData \ Roaming \ npm \ node_modules

しかし、インストールパスを変更したので、インストールは次のようになります：E：\ NodeJs \ node_global \ node_modules

vue-cliをインストールします。

cnpm install vue-cli -g

# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序，
vue list

npmコマンドの説明

[Npm install moduleName]：モジュールをプロジェクトディレクトリにインストールします
[Npm install -g moduleName]：[-g]は、モジュールをグローバルにインストールすることを意味します。このディスクは、構成ファイルのインストールパスによって異なります。コマンド[npmconfigprefix]を使用して表示します
[Npm install --save moduleName]：[– save]は、モジュールをプロジェクトディレクトリにインストールし、パッケージファイルの依存関係ノードに依存関係を書き込むことを意味します。[-S]はその略語です
[Npm install -save-dev moduleName]：[– save-dev]は、モジュールをプロジェクトディレクトリにインストールし、パッケージファイルのdevDependenciesノードに依存関係を書き込むことを意味します。[-D]はその省略形です。

vue-cliアプリケーションを作成する

vue-cliの4つのステップを使用してvueプロジェクトを作成します

1.vueプロジェクトを作成します。空のフォルダをプロジェクトディレクトリとして選択するだけです。たとえば、ここにディレクトリを作成します。

D：\ Programming Project \ study \ VueStudy \ vue-cli-study

2. webpackテンプレートに基づいてvueアプリケーションを作成します:(コマンドを実行するにはcmdを使用します）

# myvue 是项目名称
vue init webpack myvue

その後、ずっと選択しないでください！
ここに画像の説明を挿入

インストールの失敗については、このブログをお読みください：https ：//www.cnblogs.com/taiyanghua0522/p/6043942.html

最初に元のホストを復元してみてください

そして、実行しますvue init webpack myvueコマンド。スクリーンショットは次のとおりです。
ここに画像の説明を挿入

次に、プロジェクトディレクトリにmyvueプロジェクトがあります！

3.依存関係のインポート

# 进入myvue项目目录
cd myvue

# 安装依赖环境，这个是根据myvue项目目录中的package.json进行依赖安装的，所以上面要进入myvue
npm install

実行が完了すると、ディレクトリにはさらに多くの依存関係があります。

4.プロジェクトを開始します

# 运行项目，启动的是nodejs的服务器。（并不是tomcat服务器）
npm run dev

次に、IDEAで開き、開発を開始します。

上記の手順から、mavenがディレクトリを自動的にビルドし、指示を入力せずに依存関係を自動的にインポートすることを除いて、実際にはmavenビルドプロジェクトに似ていることがわかります。

ソースコードへの入り口：myvue / src / main.js

プログラムのメインエントランス：index.html（main.jsのvueオブジェクトに接続します）、メインページは変更されません

webpackの学習と使用（vueプロジェクトの実行プロセス）

webpackはJavaScriptアプリケーションであり、静的モジュールのパッケージ化に使用されます。webpackがパッケージ化する場合、アプリケーションに必要な各モジュールを含む依存関係グラフ（つまり、誰が誰に依存するか、親子関係は何か）を再帰的に作成し、これらのモジュールを1つ以上のバンドルにパッケージ化します。

webpackの役割：ES6仕様のコードをES5仕様のコードにダウングレードするために使用されます。その理由は次のとおりです。現在、ほとんどのブラウザはES6をサポートしていません。

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

npm install webpack -g
npm install webpack-cli -g

インストールが成功したかどうかを確認します。バージョン番号を確認する方法を使用します

webpack -v
wevpack-cli -v

パッケージ化にはWebpackが使用されるため、プロジェクトディレクトリの[build]ディレクトリに[webpack.base.config.js]というファイルが表示されます。このファイルはwebpackパッケージの構成に使用されます。（つまり、webpackは関連するバッチ処理プログラムのみを提供しますが、このバッチ処理プログラムでは、対応するプロセスの情報を手動で構成する必要があります）

ここでは、vue-cliによって作成された[webpack.base.config.js]ファイルを、自分で[webpack.config.js]を記述して解釈します。

2.webpack.config.jsファイルを解釈します

エントリ：エントリファイル、webpackがプロジェクトのエントリとして使用するファイルを指定します
output：output、webpackを指定して、処理されたファイルを指定されたディレクトリに配置します
module：module、指定されたモジュールを入力します
プランジン：ホットアップデート、コードの再利用などのプラグイン。指定されたプラグインを入力します
解決：パスをに設定します
ウォッチ：モニター、ファイル変更を設定した直後にパッケージ化するために使用

メソッドを公開する

module /hello.jsファイルでメソッドを公開します

// 暴露一个方法，这个方法是hello.js中方法。如果其他地方想用必须引用
// 但是根据Commentjs规范中的原则，只有暴露的东西才能在外面引用
exports.sayHi = function () {
    
    
    document.write("<h1>Hello!</h1>")
};

モジュールを紹介する

module / main.jsにモジュール（jsスクリプト）を導入します

var hello = require("./hello");
hello.sayHi();

Jsは、[script]タグを介して参照することもできます。ただし、この方法は適切ではありません。各jsファイルのすべてのグローバル変数と関数がウィンドウオブジェクトに配置されるため、複数のファイルを組み合わせると、同じ名前で競合が発生するためです。

ただし、[exports]を使用してオブジェクトまたはメソッドを公開し、[require]を使用してモジュールを受信します（受信したモジュールはオブジェクトとして使用され、モジュールで公開されたオブジェクトまたはメソッドはポイント呼び出しを使用して呼び出されます）これにより、名前の重複の問題が効果的に回避されます。

webpack.config.jsを作成します

親ディレクトリのファイルディレクトリを作成するモジュール内。

module.exports = {
    
    
    // 打包后程序的入口，相当于某个java类中的main方法。一个程序只能有一个main方法
    entry: "./modules/mian.js",
    // 将打包好的程序输出到哪儿，
    output: {
    
    
        // 输出的文件名，没有会创建一个文件
        filename: "./js/bundle.js"
    }
}

オブジェクト[モジュール]のメソッド[エクスポート]を使用して設定します。

3.小さなデモをパッケージ化します

ターミナルを[webpack.config.js]のあるディレクトリに移動し、[webpack]コマンドを使用してパックします。
ここに画像の説明を挿入

webpackが正常にパッケージ化されると、ターミナルのコンテンツが表示され、dist / js /bundle.jsファイルが生成されます。

4.フロントエンドエントランスの紹介

パッケージ化されたファイルをWebプロジェクトのエントリファイルインデックスに導入すると、ページとそのロジックが含まれます（ページはvueテンプレートコンポーネントで構成され、ロジックはjsによって記述されます）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script src="dist/js/bundle.js"></script>
    </body>
</html>

ここに画像の説明を挿入

上記から、Vueがフロントエンドページをテンプレートに配置し、テンプレートがjsによって記述されていることがわかります。vueプロジェクトのフロントエンドページは、ほとんどのjsファイル、ほとんどのvueファイル、およびhtmlファイル（インデックスエントリファイル）になります。

これは、jspをサーブレットに置き換えることができるのと似ています。

すべてのjsファイルとvueファイルがパッケージ化されたら、パッケージ化されたファイルをインデックスファイルに直接インポートして表示できます。

これはフロントエンドのモジュラー開発です！

Vueの基本（4）