上手nuxt.js

1.nuxt.js介绍

SPA：单页面web应用，不利于seo优化，初始加载速度慢。常见框架Vue

SSR：服务器端渲染

        1.将前端拆分两部分：客户端和服务端

        2.服务器端渲染，就是让前端服务端的代码先执行，就可以提前获得后端提供的数据

nuxt.js就是基于vue.js的SSR技术

2.SSR技术介绍 

SSR，即服务端渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

SSR两个优点：

        1.SEO不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能索引到页面内容。

        2.更快内容到达时间 传统的SPA引用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。

 搭建第一个路由组件

1.在根目录下创建pages文件夹(写在该文件下的vue文件自动生成路由)

2.在app.vue文件下  <NuxtPage></NuxtPage>  路由的入口

3.嵌套路由  建立相应名称的文件夹 该文件夹下的vue文件就是该名称的子路由

        下图为about的子路由

 

index.vue	/
about.vue	/about

 布局 LayOut目录

 1.在根目录下，创建layouts文件夹。default.vue默认文件

 2.然后我们在 layouts 文件夹下新建一个 default.vue ，它将作为 <NuxtLayout /> 的默认布局

 

注意，这里的 <slot /> 是作为插槽出口

接着，在需要用到该布局的页面文件里添加 <NuxtLayout></NuxtLayout>

在 <NuxtLayout></NuxtLayout> 里添加的元素将添加到布局文件里的 slot插槽出口上

 

 中间件 middleware目录

在项目根目录下创建 middleware 文件夹

定义一个全局的中间件，它的命名应该是 default.global.ts/js

 

路由前置导航守卫: 在路由跳转前做些什么

 

Nuxt使用Element Plus组件库

 安装: 

npm install -D @element-plus/nuxt

配置nuxt.config.js文件：

export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

Nuxt使用Pinia及持久化

安装：

npm i pinia @pinia/nuxt

安装pinia持久化的插件：

npm i -D @pinia-plugin-persistedstate/nuxt

配置nuxt.config.js

export default defineNuxtConfig({
  modules: ['@pinia/nuxt','@pinia-plugin-persistedstate/nuxt'],
})

在项目根目录下创建stores文件夹，在stores创建.js文件，文件名自定义

 pinia代码：

import { defineStore } from 'pinia'

export const usePiniaStore = defineStore('usePiniaConfig',{
    state: () => {
        return {
            info: '在nuxt中使用pinia'
        }
    },
    actions: {},
    persist: {
        key: 'PINAIA_DATA',
        storage: persistedState.localStorage,
        paths: ['info']
    }
})

在组件中使用pinia：

<template>
    <div>
        <Title>关于</Title>
        <h1>我是index页面</h1>
        <h2>{{ usePina.info }}</h2>
    </div>
</template>

<script setup>
import { usePiniaStore } from '../stores/usePinia.js'
const usePina = usePiniaStore()

</script>