#Nuxt.js
-Vue.jsエコシステムに基づくサードパーティのオープンソースサーバー側レンダリングアプリケーションフレームワーク
-Vue.jsテクノロジースタックを簡単に使用して同形アプリケーションを構築するのに役立ちます
-公式ウェブサイト:https://zh.nuxtjs.org/
-GitHubリポジトリ:https://github.com/nuxt/nuxt.js
## Nuxtを初期化する
-海抜とnuxt
-package.jsonで「dev」:「nuxt」を設定します
-ページフォルダを作成します
-index.vueを作成します
## Nuxt.jsルーティング-ルーティングナビゲーション
-ラベル
-ページ全体が更新され、サーバー側でレンダリングされます。使用しないでください。
-nuxt-linkコンポーネント
-https://routervuejs.org/zh/api/#router-link-props
-使用法は基本的にrouter-linkと同じです
-プログラマティックナビゲーション
-https://router.vuejs.org/zh/guide/essentials/navigation.html
-@ click = onClick
--this $ router.push( "/")
## Nuxt.js動的ルーティング
-ファイルまたはフォルダのファイル名の前に「_」を追加します。これは/と同等です。
## Nuxt.js構成ファイル
--nuxt.config.js
router:{
base:'/app' 更改初始路径
extendRoutes(routes,resolve){ 自己配置路径
routes.push({
name:'name',
path:'/name',
component: resolve(__dirname,'pages/name.vue')
})
}
}
## htmlテンプレートをカスタマイズする
-app.htmlを作成します
<!DOCTYPE html>
<html {
{ HTML_ATTRS }}>
<head {
{ HEAD_ATTRS }}>
{
{ HEAD }}
</head>
<body {
{ BODY_ATTRS }}>
{
{ APP }} // 渲染的内容会注入到这里
</body>
</html>
-layouts / default.vueを作成して、アプリケーションのレイアウトを拡張します
<テンプレート>
<Nuxt /> Nuxtのページ出口を必ず離れてください
</ template>
-各コンポーネントの下にレイアウト属性があり、デフォルト値はデフォルトです
-ページのレイアウトを変更したい場合は、新しいレイアウトを設定できます
## Nuxt.js非同期データasyncDataメソッド
-https://zh.nuxtjs.org/guide/async-data
-基本的な使用法
-asyncDataによって返されるデータと、コンポーネントデータメソッドによってコンポーネントに返されるデータを結合します
-呼び出しタイミング:サーバー側のレンダリング中およびクライアント側のルーティング更新前
- 予防
-ページコンポーネントでのみ使用できます
-**コンポーネントが初期化される前に呼び出されるため、これはありません
-Nuxt.jsの静的フォルダーでは、アドレスを介して内部ファイルに直接アクセスできます
-使用時に静的を追加する必要はありません:http:// localhost:3000 / data.json
-コンポーネントのasyncDataメソッドを使用してデータを取得し、オブジェクトを返します。これは元のデータと混合されます。これは、data = Object.assign({}、asyncData、data)と同等です。
-パブリックコンポーネントなどの非ページコンポーネントは、親コンポーネントから子コンポーネントに値を渡すことで使用できます
-**動的データをSEOに役立てたい場合、または最初の画面のレンダリング速度を向上させたい場合は、asyncDataでデータを取得するリクエストを送信します
**非同期データまたは通常のデータの場合、通常のデータに初期化できます
## Nuxt.jsコンテキストオブジェクト
-asyncDataにはこれがないため、asyncData(context){console.log(context)};
-着信コンテキストコンテキストを使用して、次の役割を置き換えます:context.route.paramsまたはcontext.paramsを使用して、URLの受け渡し値を取得します