Nuxt開発経験の共有

Nuxt開発経験の共有
Nuxt紹介
簡単に言えば、Nuxt.jsはVueベースの汎用アプリケーションフレームワークであり、SSR(Server Side Renderingサービス側レンダリング)を採用している.単一ページアプリケーションのSEO問題を解決することを目的とする.vue単一ページアプリケーションレンダリングは、サーバから必要なjsを取得し、クライアントがその解析生成HTMLをappのDOM要素にマウントすることで、2つの大きな問題が発生します.
1.ページの内容はjsを通じて挿入されるため、コンテンツ性のウェブサイトにとって、検索エンジンはウェブサイトの内容をつかむことができなくて、つまりユーザーはこのウェブサイトの関連情報を検索することができなくて、SEOに不利です;2.資源要求量が多く、ウェブサイトのトップ画面のロードが遅く、ユーザーの体験に不利である
うちの会社が作ったサイトは内容的なサイトですエドメディアBlockADM~~~
Nuxtインストール
Nuxt.jsチームは足場ツールcreate-nuxt-appを作成しました

 $ npx create-nuxt-app   

前提は、npmなどのvue足場構築プロジェクトがインストールされている環境である.npxはNPMバージョン5.2.0でデフォルトでインストールされています.インストール中は、統合されたサービス・エンド・フレームワークの間で選択し、私のプロジェクトはNone(Nuxtデフォルト・サーバ)を選択します.好きなuiフレームワークを選択して実際のプロジェクトに基づいて選択します.その後の私は基本的にデフォルトを選択しました.インストールが完了したらプロジェクトnpm run dev起動プロジェクトに入ります

   $ cd 

   $ npm run dev

Nuxtプロジェクトディレクトリ構造
[画像のアップロードに失敗しました...(image-7711 c-1565578464914)]
実戦経験.
ルート
nuxtはpagesフォルダのディレクトリ構造に従ってルーティングを自動的に生成します(vueはsrc/router/index.jsでルーティングを手動で構成する必要があります)
`

  pages/
  --| user/
 -----| index.vue
 -----| one.vue
  --| index.vue

`
Nuxt.jsは、対応するルーティング構成テーブルを生成します.
`

   router: {
     routes: [
      {
       name: 'index',
       path: '/',
       component: 'pages/index.vue'
     },
     {
       name: 'user',
       path: '/user',
       component: 'pages/user/index.vue'
    },
    {
       name: 'user-one',
       path: '/user/one',
       component: 'pages/user/one.vue'
     }
   ]
  }
`

ローカルcssファイルおよびjsプラグインの導入

 `
 export default {
   mode: 'universal',
   head: {
    title: '   BlockADM-      ' || '',
     meta: [
      { charset: 'utf-8' },
       ],
     link: [
      { rel: 'icon', type: 'image/x-icon', href: '/logo_icon.png' }
     ]

    loading: { color: '#fff' },
  /* **        */
    css: [
      'element-ui/lib/theme-chalk/index.css',
      '~static/css/common.css',
     ],
  /***   js */
    plugins: [

     { src: '~/plugins/main_client.js', mode: 'client' },
     { src: '~/plugins/main.js', mode: 'server' },
     '~/plugins/axios'
    ],
   }

 `

プロジェクトのグローバルcssはstatic/css/commonに置かれています.cssでは、プロジェクトで使用されるjsグローバルjsは、2つのファイルに分けられ、1つはサービス側でレンダリングされ、1つはクライアントでレンダリングされ、modeはそれぞれ異なり、ここは私が踏んだ穴ですが、先端の大部分のjsはクライアントです.2点目jsは本来axiosをカプセル化したファイルであり、グローバルなjsファイルとして扱うことができるのでpluginsにブロックし、プロファイルに導入する
リクエスト
Nuxt.jsはVueを拡張した.jsは、asycDataという方法を追加し、コンポーネントのデータを再設定する前に非同期でデータを取得または処理することができます.使用方法:

 **     **

  ` 

   async asyncData (context) {
    let {data} = await context.$axios.get(`news/app/visitor/newsFlash/get`,{params: {id:context.query.id}});
    return {
      content:data.data.content,
      newsFlashTime:data.data.createTime,
      newsFlashTitle:data.data.title,
    }
  },
 
 `

このうちcontent,newsFlashTimeなどは自分で定義したdataのデータです

**    **

 `
  async asyncData (context) {
    console.log(context);
    let [data,dataTwo,dataThree] = await Promise.all([
      context.$axios.get("user/app/visitor/getMemberInfoByUserId",{params: {userId:context.query.id}}),
      context.$axios.post("news/web/visitor/newsArticle/page",{
        pageNum: 1,
        pageSize: 3,
        sortType: 2
      }),
      context.$axios.post("news/web/visitor/newsArticle/page",{
        pageNum: 1,
        pageSize: 6,
        memberId: context.query.id
      })
    ]);

    return {
      personDate:data.data.data,
      allViewDate:dataTwo.data.data.records,
      articleDate:dataThree.data.data.records
    }
  },
       
 `

ポイント:contextは、オブジェクトのすべてのプロパティとメソッドを理解します.
まずここまで整理しておきましょう.今直面している問題はこれらです.