Detaillierte Erläuterung der Schritte zur Implementierung des serverseitigen Renderings mit Nuxt.js (mit Code)

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum Implementieren des serverseitigen Renderings mit Nuxt.js (mit Code). Was sind die Vorsichtsmaßnahmen für das Implementieren des serverseitigen Renderings mit Nuxt.js? Werfen wir einen Blick darauf.

Verwenden Sie Vue direkt, um eine Front-End-Einzelseitenanwendung zu erstellen. Der Seitenquellcode enthält nur wenige einfache HTML-Zeilen, was der SEO der Website derzeit nicht förderlich ist. In diesem Artikel wird hauptsächlich die Implementierung von serverseitigem Rendering (SSR) durch Vue ausführlich vorgestellt. Interessierte Freunde können sich auf

beziehen, um Vue direkt zu verwenden Erstellen Sie eine Front-End-Einzelseitenanwendung. Der Seitenquellcode enthält nur wenige einfache HTML-Zeilen. Dies ist für die Suchmaschinenoptimierung der Website nicht förderlich und erfordert derzeit ein serverseitiges Rendering >Am 25. Oktober 2016 veröffentlichte das Team hinter zeit.co ein serverseitiges React-Rendering-Anwendungsframework Next.js

Einige Stunden später kam ein serverseitiges Rendering-Anwendungsframework auf Basis von Vue.js auf den Markt Sein, das Next.js ähnelt. Das ist Nuxt.js

1. Schnelle Vorlage Unter der Voraussetzung, dass vue-cli installiert wurde, können Sie schnell eine Nuxt-Projektvorlage erstellen

wobei MyProject der Name des Projektordners ist, der über npm install

vue init nuxt-community/starter-template MyProject

angepasst werden kann (es scheint reibungsloser zu sein).

Garninstallation

). Nach der Installation der Abhängigkeiten können Sie npm direkt in der Entwicklungsumgebung ausführen, um das Projekt zu startenDer Standardstart Die Adresse lautet http://localhost:3000/. Sie können die folgende Konfiguration in

package.json

hinzufügen, um die Host-Portnummer zu ändern

Nachdem die Entwicklung abgeschlossen ist, führen Sie npm run aus build, um den Code zu packen, und schließlich npm start, um den Dienst zu starten

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

2. Wichtige Verzeichnisse Das generierte Projektverzeichnis lautet wie folgt

Die meisten Ordnernamen

sind standardmäßig von nuxt reserviert und können nicht geändert werden

Es gibt drei Verzeichnisse, die für den Preisvergleich von entscheidender Bedeutung sind:

1. Das Komponentenverzeichnis

wird im Allgemeinen zum Speichern von

nicht auf Seitenebene

Komponenten verwendet, z als Kopf- und Fußzeile Öffentliche Komponenten wie Die Komponenten in diesem Verzeichnis verfügen über die Methoden und Eigenschaften regulärer Vue-Komponenten und werden nicht durch nuxt.js-Funktionen erweitert

2. Layouts Layoutverzeichnis

Sie können default.vue in diesem Verzeichnis ändern, um das Standardlayout zu ändern

wobei ist erforderlich und stellt den Hauptinhalt der Seite dar. Er wird hier angezeigt (ähnlich der des Root-Knotens)

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

Darüber hinaus können Sie auch einen

-Fehler hinzufügen. vue als Fehlerseite im Verzeichnis

Die spezifische Schreibmethode finden Sie in der offiziellen Dokumentation

3

wird zum Speichern von Komponenten auf Seitenebene verwendet. Routing der Seitenebene

Zum Beispiel die Seitenstruktur Das Bild oben generiert eine solche Routing-Konfiguration:

Darüber hinaus verfügt die Vue-Komponente in diesem Verzeichnis auch über einige spezielle Funktionen, die von Nuxt.js bereitgestellt werden

Darunter das

Die Methode asyncData

wird häufiger verwendet und unterstützt die asynchrone Datenverarbeitung

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

Diese Methode wird in jeder

Seitenkomponente verwendet

Sie wird vor dem Laden aufgerufen, ruft dann die Daten ab und gibt sie an die zurück aktuelle Komponente

Der erste Parameter der asyncData-Methode ist der Kontext

Objekt context Die spezifischen Eigenschaften können hier angezeigt werden

Da die asyncData-Methode zuvor aufgerufen wird Wenn die Komponente initialisiert ist, gibt es innerhalb der Methode keine Möglichkeit,

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

auf das

Instanzobjekt der Komponente zu verweisen.

三、使用插件

如果项目中还需要引入其他的第三方插件，可以直接在页面中引入，这样在打包的时候，会将插件打包到页面对应的 js 里面

但要是别的页面也引入了同样的插件，就会重复打包。如果没有需要分页打包的需求，这时候可以配置 plugins

以 element-ui 为例，在安装了 element-ui 之后，在 plugins 目录下创建 elementUI.js

然后在根目录的 nuxt.config.js 中添加配置项 build.vendor 和 plugins

 build: {
  vendor: ['~/plugins/elementUI.js']
 },
 plugins: [
  {src: '~/plugins/elementUI.js'},
 ]

这里的 plugins 属性用来配置 vue.js 插件，也就是 可以用 Vue.user() 方法 的插件

默认只需要 src 属性，另外还可以配置 ssr: false，让该文件只在客户端被打包引入

如果是像 axios 这种第三方 （不能 use） 插件，只需要在 plugins 目录下创建 axios.js

// axios.js
import Vue from 'vue'
import axios from 'axios'
const service = axios.create({
 baseURL: '/api'
})
Vue.prototype.$ajax = axios
export default service

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

build: {
 vendor: ['~/plugins/axios.js']
}

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

四、Vuex 状态树

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

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';
Vue.use(Vuex)
const store = () => new Vuex.Store({
 state: {
  author: 'WiseWrong',
  info: ''
 },
 mutations: {
  setInfo (state, val) {
   state.info = val
  }
 },
 actions: {
  loadAboutMeInfo ({commit, state}) {
   return Axios.get(`/about`)
    .then(res => {
     console.log('ajax is success')
     console.log(res.data.info)
     commit('setInfo', res.data.info)
    })
    .catch(err => {
     console.log('error')
    })
  }
 }
})
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('loadAboutMeInfo')
 },
 name: 'about',
 data () {
  return {}
 }
}
</script>

成果演示：

 

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

webpack热模块替换使用详解

mint-ui在vue中使用详解

JS排序算法小结

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung des serverseitigen Renderings mit Nuxt.js (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!