最初から勉強します.js
4566 ワード
紹介する
Nuxt.jsはVueベースである.jsの汎用アプリケーションフレームワーク.Nuxt.jsはWebpackとNodeを使用する.jsはVueベースのSSRフレームワークをカプセル化し、それを使用すると、自分でSSRプログラムを構築する必要がなく、約束されたファイル構造とAPIを通じてヘッダスクリーンレンダリングのWebアプリケーションを実現することができます.まず、Nuxt.jsはノードプログラムで、上記のようにVueをサービス側に走るので、ノード環境を使用しなければなりません.私たちはNuxt.jsアプリケーションのアクセスは、実際にはこのノードにアクセスしています.jsプログラムのルーティングは、ヘッダレンダリングコンテンツ+再レンダリング用のSPAのスクリプトコードを出力し、ルーティングはNuxtである.jsが約束したpagesフォルダが生成されます.だから全体的には、Nuxt.jsは、拡張性を失わず、各フォルダとプロファイルの制約によって私たちのプログラムを管理し、独自のプラグインメカニズムを持っています.フレームとして、Nuxt.jsは、クライアント/サービス側という典型的なアプリケーションアーキテクチャモデルに、非同期データロード、ミドルウェアサポート、レイアウトサポートなど、多くの有用な特性を提供する.
Nuxt.jsフレームワークはどのように動作しますか?
Nuxt.jsは、Vue 2、Vue-Router、Vuex、Vue-Meta、さらにNuxtといった完全で強力なWebアプリケーションを開発するためのコンポーネント/フレームワークを集積する.jsは、Webpackおよびvue-loader、babel-loaderを使用して、パッケージ化、コード階層化、圧縮などのコードの自動構築作業を処理します.
とくせいはVueに基づく.js 自動コード階層 サービス側レンダリング 強力なルーティング機能、非同期データ をサポート静的ファイルサービス ES 6/ES 7構文サポート JSとCSS のパッケージングと圧縮 HTMLヘッダタグ管理 ローカル開発サポートホットロード 統合ESLint は、SASS、LESS、Stylusなどの のさまざまなスタイルのプリプロセッサをサポートします. HTTP/2プッシュ をサポート
静的(プリレンダリング)
Vueをサポートします.js応用の静的化はNuxtとする.jsの革新的な点はnuxt generateコマンドによって実現される.このコマンドは、アプリケーションのルーティング構成に従って、各ルーティングを対応するHTMLファイルに静的化する.静的化により、任意の静的サイト・サービス・プロバイダでWebアプリケーションを管理できます.導入docsウェアハウスを更新するたびにnuxt generateコマンドを手動で実行して静的ファイルを生成することは望ましくありません.Netlifyのフックアプリケーション:1をトリガーします.クローンnuxtjs.org repository 2.npm installコマンドを使用して依存3をインストールします.npm run generate 4を実行する.distディレクトリを生成するには、
質問:サービス側レンダリングに属する構成
注記(1)Vue-Meta:
Vue SPA(単一ページアプリケーション)では、ページタイトルの変更や、ヘッダに外部jsファイルを導入するなど、HTMLヘッダラベルを変更する場合は、コードに次のように書かれる場合があります.
上のコードはすべてHTMLヘッダを修正するために使用されており、コードが少し面倒だと感じているので、Vue-Metaを導入してヘッダコードを管理すると便利です.参考記事:https://segmentfault.com/a/1190000012849210
注記(2)SSR(サービス側レンダリング):
簡単に理解すると、コンポーネントまたはページをサーバを介してhtml文字列を生成し、ブラウザに送信してcssと組み合わせてページを表示し、最後に静的タグをクライアント上で完全にインタラクティブなアプリケーションに「ブレンド」します.
SSRの優勢と劣勢:
メリット
1.第1スクリーンレンダリングに有利な第1スクリーンのレンダリングは
劣勢
1.サービス側の圧力が大きいのは、もともとクライアントを通じてレンダリングを完了していたが、今はサービス側のnodeサービスに統一されている.特に高同時アクセスの場合、サービス側CPUリソースが大量に占有されます.2.開発条件は、サービス側レンダリングではcomponentDidMount以前のライフサイクルフックのみが実行されるため、プロジェクト参照のサードパーティのライブラリでは他のライフサイクルフックが使用できないため、参照ライブラリの選択に大きな制限があります.3.学習コストが比較的高いwebpack、Reactに詳しいほか、node、Koa 2などの関連技術を身につける必要がある.プロジェクトの構築、導入は、クライアントレンダリングよりも複雑です.
注記(3)ホット・リフレッシュとホット・ロード:
ホットリフレッシュ:ファイル内部が変更された後、ページ全体がリフレッシュされ、何の状態も保持されず(例えば、コンテンツを入力したinputフォーム)、webpackがF 5リフレッシュを押したのと同じです.ホットロード:ファイル内部が変更された後、変更された領域を最小限の代価で変更します.ファイルを変更する前の状態をできるだけ保持します.
注記(4)自動コード階層化:
階層化思想は応用システムで最もよく見られるアーキテクチャモデルであり、MVCなどの業務職責に基づいてモデル層、ビュー層、制御層に分けられるシステムを横方向に切断する.ページとビジネスロジックを分離し、アプリケーションの拡張性とメンテナンス性を向上させます.
コメント(5)検索エンジン:
注記(6)検索エンジンとSPA、SSR:
検索エンジンの基礎爬虫類の原理はurlを捕まえてhtmlソースコードを取得して解析することです.あなたのページは通常vueなどのjsのデータバインドメカニズムでページデータを表示します.爬虫類が取得したhtmlは最終データのレンダリングページではなくモデルページなので、jsでデータをレンダリングするのはseoに友好的ではありません.https://segmentfault.com/q/1010000009369779
参考記事:https://juejin.im/post/58ff960ba22b9d0065b722cd https://www.jianshu.com/p/6516f2a3ce36
Nuxt.jsはVueベースである.jsの汎用アプリケーションフレームワーク.Nuxt.jsはWebpackとNodeを使用する.jsはVueベースのSSRフレームワークをカプセル化し、それを使用すると、自分でSSRプログラムを構築する必要がなく、約束されたファイル構造とAPIを通じてヘッダスクリーンレンダリングのWebアプリケーションを実現することができます.まず、Nuxt.jsはノードプログラムで、上記のようにVueをサービス側に走るので、ノード環境を使用しなければなりません.私たちはNuxt.jsアプリケーションのアクセスは、実際にはこのノードにアクセスしています.jsプログラムのルーティングは、ヘッダレンダリングコンテンツ+再レンダリング用のSPAのスクリプトコードを出力し、ルーティングはNuxtである.jsが約束したpagesフォルダが生成されます.だから全体的には、Nuxt.jsは、拡張性を失わず、各フォルダとプロファイルの制約によって私たちのプログラムを管理し、独自のプラグインメカニズムを持っています.フレームとして、Nuxt.jsは、クライアント/サービス側という典型的なアプリケーションアーキテクチャモデルに、非同期データロード、ミドルウェアサポート、レイアウトサポートなど、多くの有用な特性を提供する.
Nuxt.jsフレームワークはどのように動作しますか?
Nuxt.jsは、Vue 2、Vue-Router、Vuex、Vue-Meta、さらにNuxtといった完全で強力なWebアプリケーションを開発するためのコンポーネント/フレームワークを集積する.jsは、Webpackおよびvue-loader、babel-loaderを使用して、パッケージ化、コード階層化、圧縮などのコードの自動構築作業を処理します.
とくせい
静的(プリレンダリング)
Vueをサポートします.js応用の静的化はNuxtとする.jsの革新的な点はnuxt generateコマンドによって実現される.このコマンドは、アプリケーションのルーティング構成に従って、各ルーティングを対応するHTMLファイルに静的化する.静的化により、任意の静的サイト・サービス・プロバイダでWebアプリケーションを管理できます.導入docsウェアハウスを更新するたびにnuxt generateコマンドを手動で実行して静的ファイルを生成することは望ましくありません.Netlifyのフックアプリケーション:1をトリガーします.クローンnuxtjs.org repository 2.npm installコマンドを使用して依存3をインストールします.npm run generate 4を実行する.distディレクトリを生成するには、
Web があります.さらに、電子商取引アプリケーションのシーンを考慮し、nuxt generateを利用して、アプリケーションを静的化してCDNサーバに導入することができ、1つの商品の在庫が変化するたびに、再び静的化し、商品の在庫を更新することができますか.しかし、ユーザーがアクセスしたときにちょうど更新されたら?私たちは電子商取引のAPIを呼び出すことで、ユーザーが最新のデータにアクセスすることを保証することができます.このように、従来の電子商取引アプリケーションに比べて、このような静的スキームは、サーバのリソースを大幅に節約することができる.Nuxt.js seo 質問:サービス側レンダリングに属する構成
注記(1)Vue-Meta:
Vue SPA(単一ページアプリケーション)では、ページタイトルの変更や、ヘッダに外部jsファイルを導入するなど、HTMLヘッダラベルを変更する場合は、コードに次のように書かれる場合があります.
// title
document.title = ' '
// js
let s = document.createElement('script')
s.setAttribute('src', './vConsole.js')
document.head.appendChild('s')
....
上のコードはすべてHTMLヘッダを修正するために使用されており、コードが少し面倒だと感じているので、Vue-Metaを導入してヘッダコードを管理すると便利です.参考記事:https://segmentfault.com/a/1190000012849210
注記(2)SSR(サービス側レンダリング):
簡単に理解すると、コンポーネントまたはページをサーバを介してhtml文字列を生成し、ブラウザに送信してcssと組み合わせてページを表示し、最後に静的タグをクライアント上で完全にインタラクティブなアプリケーションに「ブレンド」します.
SSRの優勢と劣勢:
メリット
1.第1スクリーンレンダリングに有利な第1スクリーンのレンダリングは
nodeから送信されたhtml文字列であり、jsファイルに依存せず、ユーザがページの内容をより速く見ることができる.2.より時間がかかるのは、クライアントが最初のスクリーンデータを要求するのではなく、サービス側が最初のスクリーンデータを要求するためであり、これは速い主な原因である.クライアントレンダリングはブラウザがjsコード、css、ピクチャなどのファイルをロードするのを待って、解析が完了した後にデータレンダリングを要求して、待つ時間は比較的に長くて、ユーザーの体験はよくありません.サービス側レンダリングは、バックエンドサーバにデータを要求し、HTMLとデータを融合させてブラウザに返し、cssと組み合わせてページを表示し、jsコードのダウンロードが完了してデータを要求する必要がなく、既存の完全なデータの最初の画面ページに戻ることができます.3.SEO(検索エンジン最適化)SEOに有利:検索エンジン最適化とは、さまざまな技術(手段)を通じて、あなたのWebコンテンツが検索エンジンによって最大化され、重みが最大化され、より多くのトラフィックをもたらすことを意味します.流量は変化する高速道路であり、SEOは低コストで流量を得る最良の方法である.現在、ほとんどの検索エンジンはURIから直接出力されたデータリソースしか取得できず、Ajaxクラスの非同期要求のデータは取得できません.Googleを除いて、独自の技術サポートがあります.MVVMフレームワークを使用すると、ページのほとんどのDOM要素はクライアントがjsに基づいて動的に生成し、爬虫類のキャプチャ分析の内容が大幅に減少します.また、ブラウザの爬虫類は私たちのデータが完成してから私たちのページデータをキャプチャすることはありません.サービス側レンダリングは、非同期データを取得してjsスクリプトを実行した最終HTMLをクライアントに返し、ネットワーク爬虫類は完全なページの情報をキャプチャすることができます.劣勢
1.サービス側の圧力が大きいのは、もともとクライアントを通じてレンダリングを完了していたが、今はサービス側のnodeサービスに統一されている.特に高同時アクセスの場合、サービス側CPUリソースが大量に占有されます.2.開発条件は、サービス側レンダリングではcomponentDidMount以前のライフサイクルフックのみが実行されるため、プロジェクト参照のサードパーティのライブラリでは他のライフサイクルフックが使用できないため、参照ライブラリの選択に大きな制限があります.3.学習コストが比較的高いwebpack、Reactに詳しいほか、node、Koa 2などの関連技術を身につける必要がある.プロジェクトの構築、導入は、クライアントレンダリングよりも複雑です.
： ， 。参考文書:https://www.jianshu.com/p/10b6074d772c 注記(3)ホット・リフレッシュとホット・ロード:
ホットリフレッシュ:ファイル内部が変更された後、ページ全体がリフレッシュされ、何の状態も保持されず(例えば、コンテンツを入力したinputフォーム)、webpackがF 5リフレッシュを押したのと同じです.ホットロード:ファイル内部が変更された後、変更された領域を最小限の代価で変更します.ファイルを変更する前の状態をできるだけ保持します.
注記(4)自動コード階層化:
階層化思想は応用システムで最もよく見られるアーキテクチャモデルであり、MVCなどの業務職責に基づいてモデル層、ビュー層、制御層に分けられるシステムを横方向に切断する.ページとビジネスロジックを分離し、アプリケーションの拡張性とメンテナンス性を向上させます.
コメント(5)検索エンジン:
注記(6)検索エンジンとSPA、SSR:
検索エンジンの基礎爬虫類の原理はurlを捕まえてhtmlソースコードを取得して解析することです.あなたのページは通常vueなどのjsのデータバインドメカニズムでページデータを表示します.爬虫類が取得したhtmlは最終データのレンダリングページではなくモデルページなので、jsでデータをレンダリングするのはseoに友好的ではありません.https://segmentfault.com/q/1010000009369779
参考記事:https://juejin.im/post/58ff960ba22b9d0065b722cd https://www.jianshu.com/p/6516f2a3ce36