So verwenden Sie Vue+Nuxt.js, um serverseitiges Rendering zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie Vue+Nuxt.js verwenden, um serverseitiges Rendering zu implementieren. Welche Vorsichtsmaßnahmen bei der Verwendung von Vue+Nuxt.js für die Implementierung serverseitiges Rendering gelten Schauen wir uns die praktischen Fälle gemeinsam an.

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. Seitenrendering ist erforderlich

Oktober 2016 Am 25. Oktober veröffentlichte das Team hinter zeit.co ein serverseitiges React-Rendering-Anwendungsframework Next.js

Ein paar Stunden später ein serverseitiges Rendering Es entstand ein auf Vue.js basierendes Anwendungsframework, und Next .js hat den gleichen Zweck, das ist Nuxt.js

1. Schnelle Vorlage

Vorausgesetzt, dass vue-cli installiert wurde, können Sie schnell eine Nuxt-Projektvorlage erstellen

vue init nuxt-community/starter-template MyProject

wobei MyProject der Name des Projektordners ist, der über

angepasst werden kann npm install (mit yarn install scheint es reibungsloser zu laufen) Nach der Installation von Abhängigkeiten können Sie npm direkt dev in der Entwicklungsumgebung ausführen, um das Projekt zu starten

Die Standard-Startadresse ist http://localhost:3000/, die im Paket zu finden ist. Fügen Sie die folgende Konfiguration zu json hinzu, um die Host-Portnummer zu ändern

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

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

2. Wichtiges Verzeichnis

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. Komponenten auf Seitenebene, wie Kopf- und Fußzeile und andere öffentliche Komponenten

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. Layoutverzeichnis

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

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

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'
    }
   ]
  }
 ]
}

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' })
  })
 }

 build: {
  vendor: ['~/plugins/elementUI.js']
 },
 plugins: [
  {src: '~/plugins/elementUI.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/axios.js']
}

// 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

// 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>