Vueフロントエンドの開発経緯 その1

vueの開発履歴

1.1 ビュー

Vue は進歩的な JavaScript フレームワークです。Vue のコアライブラリはビュー レイヤーのみに焦点を当てており、サードパーティのライブラリや既存のプロジェクトとの統合に便利です。

1.2 フロントエンドナレッジコアの概要

Soc の原則: 関心事の分離

HTML + CSS + JS: 表示:バックエンドによって提供されたデータを更新してユーザーに表示します。

ネットワーク通信:axios

ページジャンプ: vue-router

状態管理: vuex

Vue-UI: ICE 、要素 UI

1.3 Web ページの 3 つの要素

1. HTML (構造): ハイパー テキスト マークアップ言語 (Hyper Text Markup Language)、Web ページの構造とコンテンツを決定します。

2. CSS (パフォーマンス): カスケード スタイル シート (Cascading Style Sheets)、Web ページの表示スタイルを設定します。

3. JavaScript (動作): 弱い型指定のスクリプト言語であり、ソース コードをコンパイルする必要はありませんが、ブラウザによって解釈されて実行され、Web ページの動作を制御します。

1.4 jsの分類

1. JQuery: 有名な JavaScript ライブラリ。利点は DOM 操作が簡略化されることですが、欠点は DOM 操作が頻繁になりすぎてフロントエンドのパフォーマンスに影響することです。フロントエンドから見ると、これは IE6、7、8 との互換性のためにのみ使用されます。

2. Angular: Google が買収した、Java プログラマーのグループによって開発されたフロントエンド フレームワークで、バックエンドの MVC モデルをフロントエンドに移し、モジュール開発の概念を追加したのが特徴で、Microsoft と協力して採用されています。 TypeScript 構文の開発; バックグラウンド プログラム向け スタッフには優しいが、フロントエンド プログラマーにはあまり優しくない; 最大の欠点は、バージョンの反復が不合理であること (第 1 世代 –> 第 2 世代など、名前を除けば基本的に 2 つのこと) ; ブログ公開時点では Angular6 が起動されています)

3. React: Facebook が開発した高性能 JS フロントエンド フレームワーク; 特徴は、実際の DOM 操作を削減し、メモリ内で DOM 操作をシミュレートし、フロントエンドのレンダリングを効果的に改善するための新しい概念 [仮想 DOM] が提案されていることです。効率性; 欠点は、追加の [JSX] 言語を学習する必要があるため、使用が複雑であることです。

4. Vue: プログレッシブ JavaScript フレームワーク. いわゆるプログレッシブとは、モジュール開発、ルーティング、状態管理などの新機能の実現など、新しい機能を段階的に実現することを意味します。Angular (モジュール化) と React (仮想 DOM) の利点特徴です。

5. Axios:フロントエンド通信フレームワーク; Vue の境界は非常に明確であるため、DOM を処理するためのものであるため、通信機能はありません。このとき、Vue と対話するには追加の通信フレームワークを使用する必要があります。もちろん、jQuery通信機能が提供するAJAXを直接選択することも可能です。

1.5 フロントエンド UI フレームワーク

1. Ant-Design: Alibaba が開発、React をベースにした UI フレームワーク

2. ElementUI、iview、ice: Vue UI フレームワークに基づいて Ele.me によって作成されます。

3. BootStrap: Teitter によって開始されたフロントエンド開発用のオープンソース ツールキット

4. AmazeUI: 「シスター UI」とも呼ばれる、HTML5 クロススクリーン フロントエンド フレームワーク

1.6三端同一

ハイブリッド開発(ハイブリッドアプリ)

主な目的は、3 つの端末 (PC、Android: .apk、iOS: .ipa) で一連のコードを統合し、デバイスの基盤となるハードウェア (センサー、GPS、カメラなど) を呼び出せるようにすることです。 . 梱包方法は主に2つあります。

1 クラウド パッケージ化: HBuild -> HBuildX、DCloud によって作成、API クラウド

2 ローカル パッケージング: Cordova (旧 PhoneGap)

WeChat アプレット

詳細については、WeChat の公式 Web サイトを参照してください。WeChat アプレットの UI 開発フレームワークは次のとおりです: WeUI

1.7 プロジェクト管理ツール

1. NPM: Maven に似たプロジェクト総合管理ツール

2.YARN: Maven と Gradle の関係に似た、NPM の代替手段

1.8 主流のフロントエンド UI フレームワーク

1.Vue.js

2.iviewは、主流のフロントエンド フレームワークに属する強力な Vue ベースの UI ライブラリであり、モデルを選択する際に考慮することができます。主な特徴は、より多くのモバイル端末をサポートしていることです。

3. Element は、Ele.me のフロントエンド オープン ソースによって維持されている Vue UI コンポーネント ライブラリです。主流のフロントエンド フレームワークに属しています。モデルを選択する際に考慮できます。主な特徴は、より多くのデスクトップをサポートしていることです。

4.ice Feibing は、Alibaba チームの React/Angular/Vue ベースのミッドバックグラウンド アプリケーション ソリューションです。メイン コンポーネントはReact です。2019 年 2 月 17 日現在、ブログ更新前の Vue のサポートは完全ではありません。まだ様子見段階

5. Vant UI は、Youzan の統一仕様に基づいて Youzan のフロントエンド チームによって実装された Vue コンポーネント ライブラリであり、UI 基本コンポーネントとビジネス コンポーネントの完全なセットを提供します

6.cube-ui は、Didi チームによって開発された Vue js をベースにした精巧なモバイル コンポーネント ライブラリです。

7. Flutter は Google のモバイル UI フレームワークで、Android および iOS 上で高品質のネイティブ アプリケーションを非常に短時間で構築できます。

8. mpvue は、小規模プログラムの使用と開発のために Meituan によって開発されたフロントエンド フレームワークでVue.js、現在、WeChat 小規模プログラム、Baidu スマート小規模プログラム、Toutiao 小規模プログラム、および Alipay 小規模プログラムをサポートしています。

9. WeUI は、WeChat のネイティブなビジュアル エクスペリエンスと一致する基本的なスタイル ライブラリのセットであり、WeChat の内部 Web ページおよび WeChat アプレット用に WeChat の公式デザイン チームによって設計されており、ユーザーの使用認識をより統一します。

1.9MV*モード

ここでの MV* スキーマは次のとおりです。

1. MVC(主に同期通信):モデル、ビュー、コントローラー

2. MVP (主に非同期通信): モデル、ビュー、プレゼンター

3. MVVM (主に非同期通信): モデル、ビュー、およびビュー モデル フロントエンド開発の複雑さを軽減するために、次のような多数のフロントエンド フレームワークが登場しました。これらのフレームワークは、Angular JS最初テンプレート、コントローラー、モデルなどのタイプごとに階層化され、次に複数の階層に分割されますReactVue.jsEmber JS

1.10 mvvm モード

ビュー レイヤーが表示するのはModel、レイヤーのデータではなく、レイヤーViewModelのデータです。ビュー レイヤーは、レイヤーViewModelとのModel対話を担当し、ビュー レイヤーとモデル レイヤーを完全に分離します。この分離は非常に重要であり、重要です。 1 つのリングの分離スキームの実装の一部。  

おすすめ

転載: blog.csdn.net/u011066470/article/details/132609623