015フロントエンドのビルド管理

1.インポートし、既存のリソース

背景プロジェクトは比較的複雑で、我々はゼロからプロジェクトをビルドしますが、準備ができてソースを直接使用しないでください。

E：私たちは、作業ディレクトリに、解凍\ javaProject \ JavaEEProject

アイデアを使用することができますプロジェクトを開きます。

最初のディレクトリ構造を開きます。

2. インストールが異なり

あなたはnode_modulesフォルダが存在しないことに注意すべきです。しかし、package.jsonで、まだ我々はに依存するために必要なすべてのものを定義しています。

：私たちは、ターミナルを開き、プロジェクトのディレクトリを入力し、タイプする必要があるnpm installコマンド、あなたはこれらの依存関係をインストールすることができます。おそらく数分かかります。

3.それを実行し、参照

package.jsonのスタートアップスクリプトの設定ファイル内のスクリプトがありますが、あなたは、端末のアイデアでコマンドを入力することができますnpm run devかnpm start

これは、デフォルトのポートは9001です。アクセス：HTTP：// localhostを：9001

それは自動的にジャンプします。

4.ディレクトリ構造

WebPACKの：JavaScriptが現代のアプリケーションである静的パッカーモジュール（モジュールバンドラー）。そして、ホットデプロイフロントエンドプラグインプロジェクトが用意されています。

5.呼び出し関係

私たちの主なindex.htmlの間の関係を明確に、main.js、App.vue：

理一下：

index.htmlを：HTMLテンプレートファイル。これは、空の定義divIDを持ちます、app。
main.js：实例化vue对象，并且通过id选择器绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。main.js中使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。index.html引用它之后，就拥有了vue的内容（包括组件、样式等），所以，main.js也是webpack打包的入口。
index.js：定义请求路径和组件的映射关系。相当于之前的<vue-router>
App.vue中也没有内容，而是定义了vue-router的锚点：<router-view>,我们之前讲过，vue-router路由后的组件将会在锚点展示。
最终结论：一切路由后的内容都将通过App.vue在index.html中显示。
访问流程：用户在浏览器输入路径，例如：http://localhost:9001/#/item/brand --> index.js(/item/brand路径对应pages/item/Brand.vue组件) --> 该组件显示在App.vue的锚点位置 --> main.js使用了App.vue组件，并把该组件渲染在index.html文件中（id为“app”的div中）