現在のプロジェクトには、分析後のデータウェアハウス/フロントエンド表示が含まれます。これは、vue-element-adminの成熟したフロントエンドフレームワークに基づいて開発されています。これは、vue + element uiのオープンソーステクニカルソリューションです：vue-element-adminコードクラウドアドレス、チュートリアル：vue-element-adminチュートリアル、インターフェイスはシンプルでさわやかです。
Vue-element-adminに関連するテクノロジースタックには、vue、vuex、vue-router、vue-cli、axios、element-uiが含まれるため、vueフレームワーク自体（vue、vuex、vue-router、vue-cli、axios）、およびvue-element-admin;
Vueの基盤とフレームワーク
MVCとMVVCの理解
以前の一般的なMVCフレームワークによると、ビューレイヤーはデータ視覚化の定義を完了します。フロントエンドとバックエンドが学生クラスの表示を実現すると仮定すると、必要な手順は次のとおりです。①モデルであるStudentのBeanクラスは実現します。 Studentの複数のプロパティとメソッドの定義;②StudentControllerコントローラーはフロントエンドデータリクエストボディを定義します（SpringはRuquestMappingアノテーションを使用します）;③mybatisフレームワークに従ってビュービューアを作成し、最初にクエリインターフェイスStudentMapperを定義します（クエリSQLの名前付けとリターンタイプ）、および同じ名前の静的StudentMapper.xmlファイル（SQL条件付きクエリステートメントをカプセル化）。
MVCの利点は、結合度が低く、再利用性が高く、保守性が高いことです。長所は短所でもあり、システム構造と実装の複雑さが増します。単純なインターフェイスの場合は、MVCに厳密に従い、モデル、ビュー、コントローラーを分離します。これにより、構造が複雑になり、更新操作が多すぎて操作効率が低下する可能性があります。
フロントエンドとバックエンドは、MVVMフレームワーク（Model-View-ViewModel）の双方向データバインディングを使用して分離されます。そのコアはViewModelレイヤーであり、ViewModelレイヤーはViewとModelの間のブリッジです。一方では、モデルの変更をビューにリアルタイムで反映するデータバインディング、つまりデータバインディングを実装します。他方では、DOMモニタリングであるDOMリスナーを実装します。スクロール、タッチなど）、それを聞いて、必要に応じて対応するデータを変更できます。
vueの紹介とデモ
Vueルーキーチュートリアル。Vueは、開発者がDOMを基盤となるVueインスタンスのデータに宣言的にバインドできるようにするjsフレームワークです。基盤となる実装では、Vueはテンプレートを仮想DOMレンダリング関数にコンパイルします。応答システムと組み合わせることで、Vueは次のことができます。インテリジェントに計算するVueをインストールして、再レンダリングする必要のあるコンポーネントの最小数を決定し、DOM操作の数を最小限に抑える方法はたくさんあります。
1.開発環境バージョンまたは本番環境バージョンの導入を選択できます
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.ダウンロードしてインポートします
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
3. NPMのインストール：その後のwebpackおよびCLIによる使用
最も簡単なデモは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</ti tle>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-5">
<p>{
{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>Vueには、次のような接頭辞としてv-を使用するいくつかの特別なタグが含まれています。
v-if：式の値の真または偽の条件に従って要素をレンダリングします。切り替えると、要素とそのデータバインディング/コンポーネントが破棄され、再構築されます。v-制御要素のレンダリングの場合v-falseの場合、要素は作成されません。
v-show：式のtrue値とfalse値に従って、要素の表示CSSプロパティを切り替えます。display noneを使用して、要素の表示と非表示を制御できます。
v-for：リストをレンダリングするための配列またはオブジェクトに基づくループ命令。Vue2.0以降をキー値とともに使用する必要があります。ラベルをバインドして、データソース配列のテーブル番号文字列をループします
v-bind：1つ以上のプロパティ、またはコンポーネントの小道具を式に動的にバインドします。プロパティの後には固定文字列関数が続きます。プロパティバインディングを使用すると、プロパティの後に変数または式を続けることができます。
v-on：クリックイベントなど、指定された要素のDOMイベントを監視するために使用されます。イベントリスナーをバインドします。イベント名= 'イベント処理関数'イベント名はネイティブJSと同じです
v-model：フォーム入力とアプリケーション状態の間の双方向バインディングを実現します。イベントバインディングv-onおよび属性バインディングv-bind（集計）の合成に相当します
v-pre：この要素とその子要素のコンパイルプロセスをスキップします。元のMustacheタグを表示するために使用できます。指示なしで多くのノードをスキップすると、コンパイルが高速化されます
v-once：要素とコンポーネントを1回だけレンダリングし、再レンダリング後、要素/コンポーネントとそのすべての子ノードは静的コンテンツとして扱われ、スキップされます。これは、更新のパフォーマンスを最適化するために使用できます
vueの非常に重要な機能は次のとおりです。コンポーネントベースのビルドアプリケーション。小さな独立した通常は再利用可能なコンポーネントを使用して、liラベルテンプレート+ v-forループ+ vueコンポーネントなどの大きなアプリケーションをビルドしてデータトラバーサルを完了することができます。
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{
{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})vueオプション（オプション）
vueインスタンスは、データ、メソッド、小道具、計算、データに関する監視オプションを定義できます。
data：Vueインスタンスのデータオブジェクト
小道具：小道具は、親コンポーネントからデータを受信するために使用される配列またはオブジェクトにすることができます。
計算済み：計算属性。データ量が多く、キャッシュする必要がある場合に使用されます。
メソッド：キャッシュが不要な場合（時間など）に使用される計算メソッド。関数の形式で呼び出されます。
ウォッチ：オブジェクト。キーは監視する必要のある式であり、値は対応するコールバック関数です。
同時に、Vueは、データモニタリングの設定、テンプレートのコンパイル、インスタンスのDOMへのマウント、データの変更時にDOMを更新する必要性など、いくつかのライフサイクルフックオプションを定義することもできます。
テストフック関数の例：
<!DOCTYPE html>
<html>
<head>
<title>钩子函数</title>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<body>
<div id="app">
<p>{
{ message }}</p>
<input type="button" @click="change" value="更新数据" />
<input type="button" @click="destroy" value="销毁" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message : "Welcome Vue"
},
methods:{
change() {
this.message = 'Datura is me';
},
destroy() {
vm.$destroy();
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message);//undefined
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:green","data : " + this.$data); //[object Object] => 已被初始化
console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue => 已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:green","el : " + (this.$el)); //已被初始化
console.log(this.$el); // 当前挂在的元素
console.log("%c%s", "color:green","data : " + this.$data); //已被初始化
console.log("%c%s", "color:green","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:green","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data); //已被初始化
console.log("%c%s", "color:green","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
alert("更新前状态");
console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
console.log("%c%s", "color:green","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","message: " + this.message);
alert("更新前状态2");
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:green","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>vueのコンポーネント化
コンポーネント化はVue.jsの重要なアイデアです。これは、アプリケーションを構築するための独立した再利用可能な小さなコンポーネントを開発するための抽象化を提供します。すべてのアプリケーションは、通常テンプレートによって定義されるコンポーネントツリーに抽象化されます。コンポーネント：
コンポーネントで、オプションpropsを使用して、親から受信する必要のあるデータを宣言します。親コンポーネントと子コンポーネントの間のデータにアクセスする必要がある場合があります。たとえば、親ページと子ページがジャンプすると、親コンポーネントは子コンポーネントにアクセスします。$ childrenまたは$ refsの場合、子コンポーネントは$ parentを使用して親コンポーネントにアクセスします。
vueスロットスロット
多くのフロントエンドコンポーネントには多くの違いがありますが、多くの共通点もあります。そのようなコンポーネントをカプセル化するにはどうすればよいですか。（共通点を抽出し、相違点を保持します。）予約済みスロットを使用すると、ユーザーは、検索ボックス、テキスト、メニューなど、必要に応じてスロットに何を挿入するかを決定できます。
サブコンポーネントの機能が複雑な場合、サブコンポーネントのスロットが1つにならない場合があります。たとえば、ナビゲーションバーをカプセル化するサブコンポーネントには、左、中央、右に3つのスロットが必要です。スロットに名前を付け、スロット要素に名前を付けます。属性：<slot name = 'myslot'> </ slot>
vueのモジュール性
Webページ開発の初期には、jsプロダクションは、簡単なフォーム検証やアニメーションの実装を行うためのスクリプト言語として使用されていました。当時、コードはほとんどありませんでした。コードを<script>タグに直接書き込むだけです。 ajax非同期リクエストの出現フロントエンドとバックエンドの分離はゆっくりと形成されます。クライアントが完了する必要のあるものはますます増えており、コードの量は日々増加しています。コードの量、コードは複数のjsファイルで維持されますが、この維持方法では、グローバル変数の同じ名前の問題など、いくつかの壊滅的な問題を回避することはできません。さらに、このコードの記述方法は、 jsファイルの依存関係の順序ですが、数十などのjsファイルが多すぎる場合は、それらの順序を理解する必要があります。
一般的なモジュラー仕様：CommonJS、AMD、CMD、およびES6モジュール。モジュール化の2つのコアは、エクスポートとインポートです。
モジュールに特定の関数が含まれている場合があります。この関数に名前を付けたくないので、インポーターに自分で名前を付けさせます。このとき、メインでエクスポートのデフォルトを使用できます（同じモジュール内で複数のA）。 js、myFuncはそれ自体に名前を付けることができます。
モジュール開発を実行する場合は、モジュール間のさまざまな依存関係を処理し、それらをパッケージに統合する必要があります。他のツールに依存する必要があります。webpackはモジュール開発を実行し、JavaScriptだけでなくモジュール間の依存関係を処理できます。ファイル、CSS、画像、jsonファイルなどはすべてwebpackのモジュールとして使用できます。これはwebpackのモジュール化の概念です。Vueはwebpackのモジュール性と構成を使用します。
vueスキャフォールディングvue-cli
Vue CLIは、コードディレクトリ構造、プロジェクトの構造と展開、ホットロード、コードユニットテストなどを考慮する必要があるため、大規模なプロジェクトの開発に使用する必要があります。これらのタスクを手動で完了するのは比較的非効率的であるため、通常、これらのタスクを完了するためにいくつかのスキャフォールディングツールが使用されます。
NPMのフルネームはNodePackage Managerで、これはNodeJSパッケージ管理および配布ツールです。これはNodeモジュール（パッケージ）を公開するための非公式の標準になりました。通常、NPMは開発プロセスでいくつかの依存パッケージをインストールするために使用されます。
vue-cli3とバージョン2には大きな違いがあります。vue-cli3はwebpack4、vue-cli 2、またはwebapck 3に基づいています。vue-cli3の設計原則は、によって削除された構成ファイルのルートディレクトリです。 「0構成」buildやconfigなどのディレクトリの場合、vue-cli3はvueuiコマンドを提供します。これは、よりユーザーフレンドリーな視覚的構成を提供します。静的フォルダーが削除され、パブリックフォルダーが追加され、インデックスが作成されます。 htmlは公開されます。
vue状態管理vuex
Vuexは、Vue.jsアプリケーション用に特別に開発された状態管理モードであり、アプリケーションのすべてのコンポーネントの状態の集中ストレージと管理を使用し、対応するルールを使用して、状態が予測可能な方法で変化することを保証します。状態管理は簡単です。複数のコンポーネントで共有する必要のある変数はすべて1つのオブジェクトに格納され、他のコンポーネントが使用できるように、このオブジェクトは最上位のVueインスタンスに配置されることを理解してください。
大規模な開発タスクでは、ユーザーのログインステータス、ユーザー名、アバター、地理的位置、製品コレクション、ショッピングカート内のアイテムなど、複数の状態を複数のインターフェイス間で共有する必要があります。これらのステータス情報は、保存および管理するために統一された場所に配置でき、応答性があります。
まず、フォルダーストアを作成し、その中にindex.jsファイルを作成し、index.jsファイルに次のコードを記述します。
次に、すべてのVueコンポーネントがこのストアオブジェクトを使用できるようにし、main.jsファイルに移動し、ストアオブジェクトをインポートして、新しいVueに配置します。これにより、他のVueコンポーネントのストアオブジェクトのthis。$ storeから取得できます。
ストアオブジェクトに保存されている状態を他のコンポーネントで使用し、this。$ store.stateプロパティを介して状態にアクセスし、this。$ store.commit（ 'mutation method'）を介して状態を変更します。このカウントの例では、Submitを渡します。 Vuexはstore.state.countの値を直接変更することなく、状態の変化をより明確に追跡できるため、store.state.countを直接変更する代わりにミューテーション。
Vuexには、状態、ゲッター、ミューテーション、アクション、モジュールなど、いくつかのコアコンセプトがあります。Vuexは、単一の状態ツリーを使用して、アプリケーションレベルのすべての状態を管理します。単一の状態ツリーは、状態のフラグメントを見つけるための最も直接的な方法を使用できます。後続の保守およびデバッグプロセスでは、管理と保守も非常に便利です。
状態を更新する唯一の方法はミューテーションです。アクションはミューテーションに似ていますが、ミューテーションの代わりに非同期操作を実行するために使用されます。
Vuexを使用すると、ストアをモジュール（Module）に分割でき、各モジュールには独自の状態、ミューテーション、アクション、ゲッターなどがあります。
vueルーティングvou-router
Vue-routerはVue.jsの公式ルーティングプラグインです。Vue.jsは緊密に統合されており、シングルページアプリケーションの構築に適しています。ルーティングはパスとコンポーネントのマッピングに使用されます。
vue-routerを使用する手順：
手順1：ルーティングコンポーネントを作成する
手順2：ルーティングマッピングを構成する：コンポーネントとパスのマッピング関係
手順3：ルーティングを使用する：<router-link>および<router-view>経由
<router-link>：このタグはvue-routerの組み込みコンポーネントであり、<a>タグとしてレンダリングされます。
Vueの非同期リクエストaxios
Vueは、バックエンドの相互作用にaxiosライブラリを使用してデータを取得します。これは、ブラウザ側とnode.jsで実行できるPromiseベースのhttpライブラリです。リクエストとレスポンスのインターセプト、リクエストのキャンセル、jsonの変換などの多くの優れた機能を備えています。 、およびクライアント防御。最初にメインエントリファイルmain.jsで参照され、次にvueプロトタイプチェーンにハングアップします。
