サービス側レンダリングnuxtjsにVUE-CLI3全体的な移行

　　VUEプロジェクトとnuxt.jsは本当に、このような大規模な構造変化として、さまざまなプロジェクトをたくさん持って行ってrouter.js、vuex店の文言の変更は、ルータがそうでフックアップ、及びませんでした。結局のところ、いくつかの古いプロジェクトの体重は、私は許容できないので、イライラ、ありますが、いくつかの調査の後、私はこれらの問題は克服できないではないことがわかりました。したがって、移行は移行するが、移行を完了するために、風味VUE-CLIに最小限の変更で3つのプロジェクトを維持しようとすることですが。私は調査の多くをした。この目的を達成するために、本論文の目的は、この点にあります。

1、復興事業

　　何も言うこと、始め直接コマンドラインを取った、npx create-nuxt-app my-projectこれは、文書の公式サイトが運転を始めるではありません。

　　私たちの原則は、一貫してVUE CLI3プロジェクトになることです。基本的にはオープンeslintに加えて、デフォルトのオプションを選択します。それは、これはこれです、axiosモジュールがあることは注目に値する。$ Axiosプラグイン、私は個人的に現在無益で、一般的なaxiosの使用には影響しないと思います。

2、eslintコンフィギュレーション、および三人の者は、プラグインのインストールに依存しています

　　--save-devの@のVUE / eslint-CONFIG-標準NPMインストール：輝きが少し変更.eslintrc.jsは、完成したパッケージをインストールすることを忘れないでください

　　レプリケーションに依存しているために、インストールすることができます

3、それはここでは重要です。nuxtデフォルトSRCDIRは、ルートパスであることに注目すべきであるので、我々は唯一、内部のコピーのsrcコンテンツの前にプロジェクトを直接ルートディレクトリに入れ、静的なディレクトリ上に配置され、元の静的なファイルをコピーする必要があります。

4、最も重要なのは、以下のとおりです。コードのルータを使用するのではなく、自動的に生成されたナビゲーションの設定nuxt

　　nuxt.jsは非常に異なるrouter.jsは、公式声明に応じて動的に自動的にrouter.jsディレクトリを使用して生成されていなかったです。私はそれにも感じるが、そう微妙なことする必要はありません。旧移行プロジェクト、書かれている書き込み、それが直接引き継ぐことです。幸いなことに、それは変更することができ、nuxt.js公式にはプラグインが用意されていますnuxt-コミュニティコミュニティ/ルータ-モジュール

　　プロジェクトに参加するには：npm install --save @nuxtjs/router

　　モジュール参加：次に、設定ファイルを変更します

モジュール：[
     ' @ nuxtjs /ルータ' 
]、

　　プロジェクトの前Router.jsは、ルートディレクトリ/に記述する必要が少し文言を変更する必要性、createRouter機能へのエクスポート：

// のみそのような追加する必要が
エクスポートcreateRouter関数（）{
   CONSTルータ= 新しい新しいルータ（{ 
    MODE：「履歴」、
    ルート
  }）
  を返すルータ
}

　　もう一つ重要なのは、することが必要であるすべての非同期ロードを削除します

　　おそらく、あなたは、私のように、ルック無知な力を、このエラーが発生しました、としている：コンポーネントテンプレートで定義された関数をレンダリングするかどうか：匿名

　　私は長い間調査しています、私たちは、ポットはrouter.jsが、それは内に直接導入することができる（もちろん、前提は、上記移植に従ってrouter.jsアップしている）非同期的にロードされました

import guest from '@/views/carnival/guest'
import partner from '@/views/carnival/partner'

5、Router全局钩子

　　有两种办法，第一种是写nuxt plugin直接拿router对象

export default ({ app }) => {
    app.router.beforeEach(async function (to, from, next) {
    }
}

　　然后在nuxt.config.js配置里加上

    plugins: [
        '@/plugins/route'
    ],

　　但这种办法如果在beforeEach里面做请求拿数据，就会引起DOM渲染不同步的警告（nuxt.js v2.3.4）。只要发出请求，不做任何其他事情，就会出错（其实这是非常不科学的）。顺便提一句，这里通过app.store可以拿到store

　　第二种办法，也是nuxt.js官方推荐的办法，是写middleware：

　　我在middleware下写一个router-guards.js

export default async function ({ store, route, redirect, req }) {
    console.log('hello')
    // let ret = await axios.get(`...`)
}

サービス側レンダリングnuxtjsにVUE-CLI3全体的な移行

おすすめ