相信大家肯定对SSR，CSR等概念再熟悉不过了。但假如面试的时候面试官问：如果让你去实现一个SSR项目，你该如何去做？你会如何回答？我认为，我们不妨尝试一下Nuxt.js。

什么是Nuxt.js

这里我们看一下Nuxt官方给出的定义

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

Nuxt.js是一款基于Vue.js的，可以以直观且可拓展的方式创建类型安全，高性能生产级的全栈web应用框架。但是在我看来，通常我们选择采用nuxt.js框架开发的原因无非是以下几点：

SSR
更好的SEO
框架基于Vue3，继承了Vue3的所有优势，如：Composition API、性能优化、响应式编程等
文件系统路由：你可以通过目录结构来组织你的页面路由
...

可以说，Nuxt.js的优点不胜枚举，接下来，让我们一起走进Nuxt的世界吧！在此之前，让我们先来复习一下SSR、CSR等相关概念

Nuxt的安装与使用

这里使用官网提供的方法来安装

由于Nuxt.js的服务端是基于node.js的，推荐安装16版本以上的node.js
推荐使用VScode
终端为了运行Nuxt命令方便起见，可以使用VScode的内置终端

这里使用pnpm来安装在终端输入pnpm dlx nuxi@latest init 项目名

例如我输入的是dlx nuxi@latest init mynuxt

等待安装便可看到项目结构了

运行你的第一个Nuxt项目

根据提示，在终端输入cd mynuxt将目录切换到mynuxt下，接着执行npm install安装依赖，最后执行npm run dev运行项目，当出现如下界面时，恭喜！你的Nuxt项目已经运行成功了!

接下来让我们体验一下Nuxt中的响应式编程

响应式

将app.vue文件代码稍作修改

<template>
  <div>
    <h1>My name is {{ nick }}</h1>
    <input type="text" v-model="nick">
  </div>
</template>
<script setup>
const nick = ref('jack')
</script>

可以看到，数据发生变化的同时，依赖该数据的dom也发生了更新，说明数据是响应式的

组件

接下来介绍一下如何使用组件，在项目根目录下创建一个名为components的文件夹，由于nuxt的组件是根据目录结构组织的，所以我们放在components文件夹下的组件会被自动引入注册，无需手动操作

在这里创建一个名叫test.vue的文件作为我们的组件

test.vue

<template>
    <div>
        <h1>
            这是我的小猫，它叫<slot>xxx</slot>
        </h1>
    </div>
</template>

app.vue

<template>
  <div>
    <h1>My name is {{ nick }}</h1>
    <input type="text" v-model="nick">
    <test>糯米</test>
  </div>
</template>
<script setup>
const nick = ref('jack')
</script>

可以看到，组件已经被成功挂载到了页面上

路由

由于在Nuxt中路由也是基于目录结构的，使用方式和组件的使用方式大同小异，这里就简单介绍一下。首先在项目根路径下创建一个pages文件夹，新建一个about.vue文件作为我们的一个页面，需要注意的是，创建/pages目录开启路由后，/app.vue会影响路由与页面，最好将它删除，然后在/pages下建立新主页/pages/index.vue,此时如果项目报错的话，只需要重新启动下服务就OK了

about.vue

<template>
    <div>
        <h1>欢迎来到about页面</h1>
        <nuxtLink to="/">go home</nuxtLink>
    </div>
</template>

index.vue

<template>
    <div>
        <h1>这是我的主页</h1>
        <nuxtLink to="/about">go about</nuxtLink>
    </div>
</template>

运行结果

服务端

要建立服务端接口，首先在/server/api路径下创建一个myapi.js文件，当然，如果你对TypeScript比较熟悉的话，也可以使用ts

实现一个简单api

myapi.js

export default defineEventHandler((event) => {
    return {
        status: 1,
        msg: 'success'
    }
})

在地址栏中输入/api/myapi，以/api开头是为了表明传入的是api的地址，按下回车可以看到数据被成功返回了

这时的你可能会发出疑问，如果我们想传参该怎么办呢？比如这样http://localhost:3000/api/myapi?id=1很简单，我们只需要getQuery()方法

export default defineEventHandler((event) => {

    const query = getQuery(event)
    return {
        status: 1,
        msg: 'success',
        data: { id: query.id }
    }
})

此时在地址栏中输入http://localhost:3000/api/myapi?id=9527查看效果

可以看到，query参数传递成功了

小结

此篇文章是我来到掘金这个大家庭以来发布的第一篇文章，面向Nuxt.js初学者以及对Nuxt.js感兴趣的同学们，起到入门启发之作用，故技术难度不高，技术深度不深，由于本人经验所限，文章难免有不足之处，欢迎各位同学积极留言指出，也可与我讨论有关技术问题，我们下篇文章见

Nuxt.js快速入门

什么是Nuxt.js

相关概念

SEO

SPA

单页面应用优缺点

SSR与CSR

Nuxt的安装与使用

运行你的第一个Nuxt项目

响应式

组件

路由

服务端

小结