前VUE-スパ単一のページをやって、SEOに助長されていません。SEO SSR（サーバ側のレンダリング）複数ページのアプリケーションの容易さは、あなたがnuxt.jsを達成するために、このフレームワークを使用することができます
（0）nuxtインストールを
NPX作成-nuxtアプリ<プロジェクト名>
以下は、生成されたカタログファイルによって理解することが学んでいる
（1）リソースディレクトリの資産および静的ディレクトリ-リソースファイルのセクションの
資産：静的リソースファイルはWebPACKのは、コンパイルプロセスを構築作られています
」。 "1 CSSはリソースファイルを導入
スラッシュ// NOTE〜ノー後
- ：（資産/ banner.svg"）URL背景"
"の：2 VUEファイル"
<〜/資産/ image.png「IMG SRC =>"
静的：なしのWebPACK処理コンパイル
ルーティングの問題解決するために、相対パスのリソースを
「1」VUEファイル
<IMG SRC =「../静的/ 1.png」/>
-の一部の図（2）レイアウトカタログレイアウト/ページページ
デフォルトでは『1』レイアウト（レイアウト/ default.vue）
<テンプレート>
<nuxt />
</テンプレート>
"2"カスタムレイアウト
1.ファイルのレイアウト/自己を作成します。ビュー
<テンプレート>
<div>
小道具：[ 'エラー']、
<div>カスタムレイアウト</ div>
<nuxt />
</ div>
</テンプレート>
2.ページページ/インデックス
エクスポート{デフォルトの
レイアウト：カスタムテンプレートを指定する// '自己'
}
"3"エラーページ
カスタマイズされたエラーページ：.layouts / error.vue
<テンプレート>
の<divクラス= "コンテナ">
<V-IFのh1は= "404 error.statusCode ===">ページが存在しない<の/ H1>
他-Vの<H1 >アプリケーションエラー例外</ H1>が発生
<nuxtリンク"/ =に "> ホーム</ nuxtリンク>
</ div>
</テンプレート>
<スクリプト>
{デフォルトのエクスポートの
レイアウト：「自己」//エラー用のカスタムページレイアウトを指定することができます
}
。</ SCRIPT>
「4」ページとページの設定項目：
asyncDataは、FETCH、頭、レイアウト、ロード、トランジション、scrollToTop、検証、ミドルウェア
のAPIを表示するには、このセクション-ページの一部
（3）コンテンツプラグインプラグ（グローバル） -挿入部
"1"プラグ用い
a.plugins / VUE-notifications.js
ヴュー'VUE'からインポート
VueNotificationsからインポート'をVUE-通知'
Vue.use（VueNotifications）
b.nuxt.config.js内構成
module.exportsは= {
[ '〜/プラグイン/ VUE-通知']プラグイン
}
"2"注射ヴューの例
a.plugins / VUE-inject.js：
ヴュー'VUE'からインポート
。Vue.prototype $ myInjectedFunction =（文字列）=>はconsole.log（ "これは一例である"、文字列）
b.nuxt.config.js
プラグイン：[ '〜/プラグイン/ CTX-注入.js']
}
エクスポートデフォルト{
プラグイン：[ '〜/プラグイン/ VUE-inject.js']
}
c.pages页面使用：
この$ myInjectedFunction（ 'テスト'）
"4"注入コンテキスト
a.plugins / CTX-inject.js：
輸出デフォルト（{アプリ}、注入）=> {
//はcontext.appオブジェクト上で直接機能を設定
app.myInjectedFunction =（文字列）=>はconsole.log（ 'さて、他の機能'、文字列）
}
b.nuxt。 config.jsの：
輸出デフォルト{
c.pages页面使用：
輸出デフォルト{
asyncData（コンテキスト）{
context.app.myInjectedFunction（ '！CTX'）
}
}
"5"同時注入-メソッドの注入
a.pluginsを/複合-inject.js
エクスポートデフォルト（アプリケーション{}、注入する）=> {
ジェクト（ 'myInjectedFunction'、（文字列）=>はconsole.log（ 'それは簡単でした！' 、文字列））
}
。上記Bは両方向ラインを呼び出す
クライアントはnuxt.config.js使用のみ「6」プラグ
{エクスポートデフォルト
：[プラグイン
] /両sides.js〜/プラグイン'：{SRC} 、//クライアントサーバーの両方＆
{SRC： '〜/プラグイン/クライアントonly.js'、MODE： 'クライアント'}、
{SRC： '〜/プラグイン/サーバonly.js'、MODE： 'サーバ'
自動的に係るVUEルータモジュールのページのディレクトリ構造を生成する構成をルーティング
（1）動的ルーティング：
ページ/
- | _slug /
]
}
（4）路由部分：
----- | comments.vue
----- | index.vue
- | ユーザー/
----- | _id.vue
- | index.vue
ルータ：{
ルート：[
{
名： 'インデックス'、
パス： '/'、
コンポーネント： 'ページ/ index.vue'
}、
{
名： 'ユーザー-ID'、
パス「/ユーザ/：ID ？ '
コンポーネント： 'ページ/ユーザ/ _id.vue'
}、
{
名： 'スラグ'、
パス： '/：ナメクジ'、
成分：'
}、
{
名： 'スラグ-コメント'、
パス： '/：スラグ/コメント'、
コンポーネント： 'ページ/ _slug / comments.vue'
}
]
}
ルーティングパラメータは、チェック：ページ/ユーザ/ _id.vue
検証（{paramsは}）{
//数でなければなりません型
戻り/^\d+$/.test(params.id）
}
（2）ネストされたルート
注
1]サブビューアセンブリを格納するために使用Vueのファイルを追加し、同じファイル名でディレクトリを追加します。
2.サブビューの内容を表示するための親要素（.vueファイル）の中に<nuxt-子/>増加することを忘れないでください。
ページ/
- |ユーザー/
----- | _id.vue
----- | index.vue
- | users.vueの
ルータ：{
路線：[
{
パス： '/ユーザ、
コンポーネント： 'ページ/ users.vue'、
子供：[
{
パス： ''、
コンポーネント： 'ページ/ユーザ/ index.vue'、
名称： 'ユーザー'
}、
{
パス：' ：ID」、
コンポーネント： 'ページ/ユーザ/ _id.vue'、
名称： 'ユーザー-ID'
}
]
}
]
}
（5）。ミドルウェアディレクトリミドルウェア
-ストレージ・アプリケーションのためのミドルウェアは、
注意してください：
1.ミドルウェアは、あなたが（同様のVUE-ルータナビゲーションガード）ページのページまたはグループレンダリング前に実行するカスタム関数を定義することを可能にする
2.ファイル名の名前がミドルウェアの名前になりますが（ミドルウェア/ auth.jsは真ん中のauthになります部材）
3ミドルウェアは、最初のパラメータ（コンテキストとしてコンテキストを受信- APIを参照）
エクスポートデフォルト機能（コンテキスト）{
context.userAgent process.server context.req.headers = [「のUser-Agent」]：ナビゲーター？。 userAgentに
}
4.ミドルウェアの実行フローシーケンス：nuxt.config.js - >マッチレイアウト- >ページの一致
5ケース：
1.middleware / stats.js
インポートAxios 'Axios'から
エクスポートデフォルト機能（ルート{}）{
リターンaxios.post（ 'http://my-stats-api.com'、{
URL：route.fullPath
}）
}
nuxt.config 2.。ミドルウェアでのJS、レイアウトやページ
（1）nuxt.config.js：各経路変更で呼び出され
module.exportsは= {
{ルーター
：ミドルウェア'統計'
}
}
（2）レイアウト/又はdefault.vueページ/ index.vue
エクスポートデフォルト{
ミドルウェア：「統計」
}
ストアディレクトリ- vuex状態ツリー（6。）
を行うために、アプリケーションのルートディレクトリの下にストアディレクトリを見つけるために1.Nuxt.js試み、以下の
1. vuex参照モジュール
モジュールvuexは、構成を構築するためにベンダーを追加しました2。
3.ルートインスタンスヴューストアの設定項目に設定
2：HTTPS：//zh.nuxtjs.org/guide/vuex-store
（7）非同期データ（asyncData）
1.限られたページ・コンポーネントは- （それぞれの負荷前に呼び出され実行前beforeCreate）
組立前2としてはasyncData初期化メソッドが呼び出されており、この方法は、このことにより、コンポーネントのオブジェクトインスタンスを参照するためのない方法です。
コールバック/動的ルーティングパラメータ/エラー処理：
前記第1のパラメータは、現在のページ・コンテキスト・オブジェクトに設定されている：パラメータは、オブジェクトコンテキスト、オブジェクトのプロパティである
https://zh.nuxtjs.org/api/context
コンテキスト：{
アプリ：Vueのルートインスタンス//コンテキスト。 。アプリの$ Axiosは、
のparams：route.paramsエイリアス、
クエリ：route.queryエイリアス、
エラー：エラーページの表示は、
リダイレクトは：別のユーザーの要求ルートにリダイレクトし、リダイレクト（[ステータス]のパス [クエリ]）
ENV：環境変数の設定さnuxt.config.jsは、APIの環境変数を参照してください（ネストされたルーティングの例-デモ参照）
ストア：Vuexデータ、
ルート：Vueのルータはルーティングインスタンス、
isDev：DEVの開発モードを、
isHMR：ホット交換用モジュール、
REQ：
RES：
nuxtState：
beforeNuxtRender（FN）：
}
コンフィギュレーションファイル名やフォルダへのアクセスを使用して動的パスパラメータ：_id.vue
エクスポートデフォルト{
asyncData（のparams {}、コールバック）{
axios.get（ `HTTPS：//マイ-API /記事/ params.id} {$`）
.then（（RES）=> {
コールバック（NULL、{タイトル：RES。 } data.title）
}）キャッチ（（E）は=> {。
//からstatusCode：指定するサーバーは、要求のステータスコードを返し
、エラーを（{からstatusCode：404、メッセージ： 'が見つかりませんポスト'}）
}）
}
}
クエリを取得パラメータ
https://zh.nuxtjs.org/api/pages-watchquery
watchQuery：[「ページ」]
定義された文字列が変更された場合、すべてのコンポーネントメソッドを呼び出す（FETCH、asyncDataを、検証、レイアウト、...）
" 8「動的なトランジション効果
、グローバル遷移dongxiao提供
トランジション効果のページのためのNuxt.jsのデフォルト名
例：
//assets/main.css
50％{変換：（1.5）スケール}
Enter-Active-.page、Leave-Active-.page {遷移：不透明.5s;}
.PAGE入力し、Leave-Active-.page {
不透明度：0;
}
//nuxt.config.js
module.exportsは= {
CSS：[
'資産/あるmain.css'
]
}
//使用
用いautoglobal
2ページ遷移効果を可動設け
ページスタイル：
.bounceアクティブ{入力-アニメーション：バウンスで.8s;}
.bounce-ままアクティブアニメーション{：バウンス-OUTの.5s;}
バウンスをイン@keyframes {
0％は{変換：スケール（0）}
（1）：100％{変換スケール}
}
バウンス-OUT {@keyframes
0％は{変換：スケール}（1）
50％{変換：（1.5）スケール}
100％{変換：スケール（0）}
}
ページアプリケーション：
エクスポートデフォルト{
遷移： 'バウンス'、/ /アニメーション
}
または：
エクスポートデフォルト{
遷移：{
名： 'テスト'、
MODE： 'OUT-で'
}
}
型3.transitionの関数として時間を使用して
デモの場合を見る
<テンプレート>
<V-他のクラス> <前</ A> = "無効"
<DIV CLASS = "コンテナ">
<NuxtLink = V-IF "ページ> 1"：= " 'ページ=' +（ページ- 1）"へ> <前</ NuxtLink>
<スパン> {{ページ}} / {{totalPages}} </スパン>
<NuxtLink V-IF = "ページ<totalPages"：=に" '？ページ=' +（ページ+ 1）">次へ> </ NuxtLink>
<a v-else class="disabled">次へ> < />
<UL>
<LI V-ため= "ユーザーがユーザー"：キー= "user.id">
<IMG：SRC = "user.avatar"クラス= "アバター" />
<スパン> {{ユーザー。 FIRST_NAME}}、{{user.last_name}} </スパン>
</ LI>
</ UL>
</ div>
</テンプレート>
<スクリプト>
輸出デフォルト{
//に注意、（asyncDataをコンポーネントのメソッドを呼び出すフェッチ、検証するための$ route.query.page、レイアウト、など）
watchQuery：[ 'ページ']、
//キーのための<NuxtChild>（トランジション）
キー：へ=> to.fullPath、
//適用するためにどの推移を知るために呼び出され
、{（からに）移行を
（！）からであれば{リターン'スライド左'}
リターン+ to.query.page <+ from.query .PAGE？'スライド右'： 'スライド左'
}、
asyncData非同期（{クエリ}）{
CONSTページ= + query.page || 1
CONSTデータ=待つフェッチ（ `https://reqres.in/api/users?page=$ {ページ}`）.then（RES => res.json（））
戻り{
ページ：+ data.page、
totalPages ：data.total_pages、
ユーザー：data.data
}
}
}
</スクリプト>
（9）定义加载自作
第一种：自定义加载组件
1.components /ローディング
loading.vue
2.nuxt.config.js
ローディングを'〜/コンポーネント/ loading.vue'
秒：ロードバー
1.nuxt.config.js
ロード：{色：「赤」} //プログレスバーのスタイル変更
の2.pages /インデックスページ
この$のnuxtます$ loading.start（）のローディングバーを開始// ...
この。$ nuxt $ loading.finish（）//ローディングの間のバー。
（10）その他：
process.static：アプリケーションがジェネレータnuxtすることによって生成されるかどうかを真であるかどうかを決定する
process.server：真の値に対する現在の実行環境を示す場合サーバー
制御プラグインをサーバー上のライブラリの使用のみ特定のスクリプト
案例：process.static？'静的'：（process.server 'サーバ'？： 'クライアント'）