[Nuxt3]初体验之Nuxt3安装以及vant3引入开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

什么是Nuxt3？

SSR定义

首先要理解一个概念——SSR(服务器渲染)；

是指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程

简单的理解，SSR就是本来服务器要给客户端(浏览器)准备的材料，服务器自己组装好了(服务器渲染)，弄成成品(html文档)，再给客户端。这样做的好处就是，用户在客户端可以立即查看所需的页面，无需等待。
SSR优点：

更好的SEO
首屏渲染更快

Nuxt3

Nuxt3是Vue3的SSR框架。从使用角度来讲，跟Vue3很相似。

不同于Nuxt2,因为Nuxt3基于Vue3,所以有以下三点优点：

更快的渲染
较小的捆绑
组合api
支持ts

Nuxt3渲染模式

安装

前期准备

确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）

 npx nuxi init nuxt3-template

cd nuxt3-template
npm install 或者  npm i

提示成功后，我们的文件目录就变成下面这样。这个只是初始目录，后面我们还会根据自己的需求添加assets、components、pages、plugins等目录

安装vant3

# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

通过插件的形式引入vant3，跟nuxt2不一样的是，在nuxt3会自动注册plugins中的插件。在plugins下创建vant.ts文件。

import { defineNuxtPlugin } from "#app";
import * as vant from "vant";
import "vant/lib/index.css";
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(vant);
});

修改app.vue,启动项目就可以了。

<template>
  <div>
    <van-button type="primary" style="margin: 10px ;">主要按钮</van-button>
    <van-slider v-model="value" @change="onChange" />
  </div>
</template>
<script setup lang="ts">
import { Toast } from 'vant';
const value = ref(50);
const onChange = (value:string) => Toast("当前值：" + value);
</script>

总结

nuxt3使用与vue3大体上一样的，但是有一些细节会有出入，就比如第三方插件的引入，大多都是放在plugins引入。类似于路由参数的设置、路由嵌套等同样都会一些变化，到时候会在后面介绍。plugins除了可以引入一些第三方插件以外，我们还可以将一些会用到window和document的方法放到其中，因为nuxt3是服务端渲染，直接调用这些方法会报错。

道阻且长，愿你我共行！

源码

gitee：h5 通用模版

参考资料

SSR
Nuxt3