Explication détaillée des étapes pour implémenter le rendu côté serveur avec Nuxt.js

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter le rendu côté serveur avec Nuxt.js. Quelles sont les précautions pour implémenter le rendu côté serveur avec Nuxt.js. Voici les pratiques. cas, jetons un coup d'oeil.

Le 25 octobre 2016, l'équipe derrière zeit.co a publié un framework d'application de rendu côté serveur React Next.js

Quelques heures plus tard, un service basé sur Vue.js La fin Un cadre d'application de rendu côté est né, similaire à Next.js. Il s'agit de Nuxt.js

1. Modèle rapide

. a été installé Avec vue-cli, vous pouvez créer rapidement un modèle de projet nuxt

vue init nuxt-community/starter-template MyProject

où MyProject est le nom du dossier du projet, qui peut être personnalisé

via npm install (il semble utiliser yarn install est plus fluide) Après avoir installé les dépendances, vous pouvez directement npm exécuter dev dans l'environnement de développementdémarrer le projet

L'adresse de démarrage par défaut est http://localhost:3000/, vous pouvez ajouter la configuration suivante dans package.json pour modifier le numéro de port hôte

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

Une fois le développement terminé terminé, exécutez npm run build pour empaqueter le code, et enfin npm start pour démarrer le service

2 Répertoires importants

Le projet généré. Le répertoire est le suivant

la plupart des fichiers Les noms de dossiers sont réservés par nuxt par défaut et ne peuvent pas être modifiés

Il existe trois répertoires qui sont essentiels pour la comparaison des prix :

1. Le répertoire des composants des composants

est généralement utilisé pour stocker au niveau autre que la page. composants, tels que l'en-tête, le pied de page et autres composants publics

Les composants de ce répertoire ont le général Les méthodes et fonctionnalités des composants vue ne seront pas étendues par nuxt.js

2. Le répertoire de mise en page des mises en page

peut être modifié par défaut.vue dans le répertoire pour modifier la mise en page par défaut

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

où < ;nuxt/> est requis, et le contenu principal de la page sera affiché ici (similaire à la du nœud racine)

De plus, vous pouvez également ajouter error.vue comme page d'erreur dans le répertoire Pour les méthodes d'écriture spécifiques, veuillez vous référer à la documentation officielle

3. pages page Répertoire

est utilisé pour stocker les composants au niveau de la page. Nuxt générera des routes

basées sur la structure des pages de ce répertoire, comme la page dans l'image ci-dessus, une telle configuration de routage. sera généré :

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

De plus, les composants vue de ce répertoire ont également des fonctionnalités spéciales fournies par Nuxt.js

Parmi eux

asyncData La méthode est plus couramment utilisé et prend en charge le traitement des données asynchrones

Cette méthode sera appelée avant chaque chargement du

composant page, puis obtiendra les données et les renverra au composant actuel

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

Le premier paramètre de la méthode asyncData est le contexte de l'objet contextuel. L'attribut

spécifique peut être consulté ici

Puisque la méthode asyncData est appelée avant l'initialisation du composant, il y a aucun moyen de le transmettre dans la méthode. this pour référencer l'objet instance du composant

3. Utilisez des plug-ins

Si vous Si vous avez besoin d'introduire d'autres plug-ins tiers dans le projet, vous pouvez l'introduire directement dans la page, de sorte que lors de l'empaquetage, le plug-in soit empaqueté dans le js correspondant à la page

Mais si d'autres pages introduisent également le même plug-in, il sera empaqueté à plusieurs reprises. S'il n'est pas nécessaire d'empaqueter la pagination, vous pouvez configurer les plugins

à ce moment en prenant element-ui comme exemple, après avoir installé element-ui, créez elementUI.js

dans le répertoire des plugins.

然后在根目录的 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中文网其它相关文章！

推荐阅读：

mint-ui使用步骤详解

常用的6大JS排序算法与比较

js+css实现页面可控速度的打字效果

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!