20を学ぶ、Nuxt.js

#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の受け渡し値を取得します


 

おすすめ

転載: blog.csdn.net/qq_40289624/article/details/110002553