Nuxt.jsをベースにしたVueのサーバーサイドレンダリングについて詳しく解説-jsチュートリアル-php.cn

Nuxt.jsをベースにしたVueのサーバーサイドレンダリングについて詳しく解説

亚连

リリース： 2018-05-26 15:02:57

オリジナル

1884 人が閲覧しました

Vue を直接使用して、フロントエンドの単一ページアプリケーションを構築します。ページのソースコードには単純な HTML が数行しか含まれていないため、現時点では、サーバー側のレンダリングが必要です。この記事では主に、Nuxt.js に基づく Vue のサービス実装の詳細な説明を紹介します。サイドエンドレンダリング (SSR) には一定の参考価値があります。興味のある方は参考にしてください。

フロントエンドのシングルページアプリケーションを構築するには、Vue を直接使用します。ページのソースコードには単純な HTML が数行しか含まれていないため、Web サイトの SEO には役立たないです

2016 年 10 月 25 日に、zeit.co のチームがリリースしました。 React サーバーサイドレンダリングアプリケーションフレームワーク Next.js

数時間後、Vue.js をベースにしたサーバーサイドの Next.js に似たレンダリングアプリケーションフレームワークが登場しました。これが Nuxt.js

です。 1. クイックテンプレート

vue-cli がインストールされていることを前提として、すぐに nuxt プロジェクトテンプレートを作成できます

vue init nuxt-community/starter-template MyProject

ログイン後にコピー

MyProject はプロジェクトフォルダーの名前であり、カスタマイズ可能です

npm install 経由 (yarn install を使用するとよりスムーズなようです) 開発環境 で直接 npm run dev を実行してプロジェクトを開始できます

デフォルトの起動アドレスは http://localhost です。 :3000/。 package.json に次の設定を追加して、ホストのポート番号を変更できます

 "config": {
  "nuxt": {
   "host": "0.0.0.0",
   "port": "7788"
  }
 },

ログイン後にコピー

開発が完了したら、npm run build を実行してコードをパッケージ化し、最後に npm start を実行します。サービス

2. 重要なディレクトリ

生成されるプロジェクトディレクトリは以下の通りです

ほとんどのフォルダ名はデフォルトでnuxtによって予約されており、変更できません

その中には3つあります価格比較にとってより重要なディレクトリ:

1. コンポーネントコンポーネントディレクトリ

は通常、ヘッダー、フッター、その他のパブリックコンポーネントなどの 非ページレベル コンポーネントを保存するために使用されます。このディレクトリには、通常の vue コンポーネントのメソッドと特性が含まれています

2. レイアウトレイアウトディレクトリ

このディレクトリ内のdefault.vueを変更して、デフォルトのレイアウトを変更できます

<template>
 <p>
  <my-header></my-header>
  <nuxt/>
  <my-footer></my-footer>
 </p>
</template>

ログイン後にコピー

が必須の場合、ページのメインコンテンツがここに表示されます (ルートノードのと同様)

さらに、また、ディレクトリにエラーページとして error.vue を追加します。具体的な記述方法については、公式ドキュメントを参照してください

3. ページディレクトリ

は、nuxt が生成するページレベルのコンポーネントを格納するために使用されます。このディレクトリ内のページ構造に基づいてルートを生成します

たとえば、上の図のページ構造は次のようなルーティング設定を生成します:

router: {
 routes: [
  {
   name: &#39;index&#39;,
   path: &#39;/&#39;,
   component: &#39;pages/index.vue&#39;
  },
  {
   name: &#39;about&#39;,
   path: &#39;/about&#39;,
   component: &#39;pages/about.vue&#39;
  },
  {
   name: &#39;classroom&#39;,
   path: &#39;/classroom&#39;,
   component: &#39;pages/classroom.vue&#39;,
   children: [
    {
     path: &#39;student&#39;,
     component: &#39;pages/classroom/student.vue&#39;,
     name: &#39;student&#39;
    },
    { //定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录
     path: &#39;:id&#39;,
     component: &#39;pages/classroom/_id.vue&#39;,
     name: &#39;classroom-id&#39;
    }
   ]
  }
 ]
}

ログイン後にコピー

さらに、このディレクトリ内の vue コンポーネントにはいくつかの特別な機能も提供されていますNuxt.js による

その中でも、

asyncData

メソッドがより一般的に使用され、非同期データ処理をサポートしています

このメソッドは ページコンポーネントで使用されます

各ロードの前に呼び出され、データを取得して返します現在のコンポーネントへ

asyncData ({ params, error }) {
  return axios.get(`api/posts/${params.id}`)
  .then((res) => {
   return { name: res.data.name}
  })
  .catch((e) => {
   error({ statusCode: 404, message: &#39;not found&#39; })
  })
 }

ログイン後にコピー

asyncData メソッドの最初のパラメータはコンテキストオブジェクト context です。特定のプロパティはここで確認できます

asyncData メソッドはコンポーネントが初期化される前に呼び出されるため、次のようになります。メソッドでこれを介してコンポーネントのインスタンスオブジェクトを参照する方法はありません

3. プラグインを使用します

他のサードパーティのプラグインをプロジェクトに導入する必要がある場合は、それらを直接導入できますパッケージ化する際は、そのページに対応するjsにプラグインがパッケージ化されます

しかし、他のページに同じプラグインが導入されている場合は、繰り返しパッケージ化されてしまいます。ページングのパッケージ化が必要ない場合は、この時点でプラグインを設定できます

element-ui を例として取り上げます。element-ui をインストールした後、plugins ディレクトリに elementUI.js を作成し、次に nuxt を作成します。ルートディレクトリに設定項目 build.vendor と plugins を config.js に追加します

 build: {
  vendor: [&#39;~/plugins/elementUI.js&#39;]
 },
 plugins: [
  {src: &#39;~/plugins/elementUI.js&#39;},
 ]

ログイン後にコピー

ここの plugins プロパティは、vue.js プラグインを設定するために使用されます。つまり、Vue.user() メソッドを使用できます。

プラグインの場合

デフォルトでは src 属性のみですが、axios のようなサードパーティ (使用できない) プラグインの場合、ファイルがクライアント上でのみパッケージ化およびインポートされるように、ssr: false を設定することもできます。 plugins ディレクトリに axios.js を作成するだけです

// axios.js

import Vue from &#39;vue&#39;
import axios from &#39;axios&#39;

const service = axios.create({
 baseURL: &#39;/api&#39;
})

Vue.prototype.$ajax = axios
export default service

ログイン後にコピー

然后在 build.vendor 中添加配置 （不需要配置 plugins）

build: {
 vendor: [&#39;~/plugins/axios.js&#39;]
}

ログイン後にコピー

这样在打包的时候，就会把 axios 打包到 vendor.js 中

四、Vuex 状态树

如果在 store 目录下创建了 index.js，nuxt.js 会根据该目录下的文件创建 Vuex 状态树

// store/index.js

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
import Axios from &#39;~/plugins/axios.js&#39;;

Vue.use(Vuex)

const store = () => new Vuex.Store({
 state: {
  author: &#39;WiseWrong&#39;,
  info: &#39;&#39;
 },
 mutations: {
  setInfo (state, val) {
   state.info = val
  }
 },
 actions: {
  loadAboutMeInfo ({commit, state}) {
   return Axios.get(`/about`)
    .then(res => {
     console.log(&#39;ajax is success&#39;)
     console.log(res.data.info)
     commit(&#39;setInfo&#39;, res.data.info)
    })
    .catch(err => {
     console.log(&#39;error&#39;)
    })
  }
 }
})

export default store

ログイン後にコピー

Nuxt.js 内置引用了 vuex 模块，不需要额外安装

上面的代码中，我在 actions 中写了一个 loadAboutMeInfo() 方法，用来请求 /api/about 接口

然后在 about.vue 页面中调用

// about.vue 

<template>
 <section class="container">
  <p>
   <img src="~/assets/about.png" alt="">
  </p>
  <h1>{{$store.state.info}}</h1>
 </section>
</template>

<script>
export default {
 fetch({ store }) {
  return store.dispatch(&#39;loadAboutMeInfo&#39;)
 },
 name: &#39;about&#39;,
 data () {
  return {}
 }
}
</script>

ログイン後にコピー

成果演示：