准备

安装node（我当前环境版本 v22.2.0）
安装yarn或者npm（我当前版本 yarn 1.22.18）

安装 Create Nuxt App

Create Nuxt App 是 Nuxt.js 官方提供的脚手架工具，可以快速生成 Nuxt.js 项目的基础结构。

首先全局安装 Create Nuxt App

npm install -g create-nuxt-app
# 或者使用 yarn
yarn global add create-nuxt-app

安装完成后，您可以使用 create-nuxt-app --version 来确认其安装成功。

创建一个 Nuxt.js 项目

运行下面的命令，您可以创建一个新的 Nuxt.js 项目：

npx create-nuxt-app my-nuxt-ssr-app

接着，会提示选择配置和添加模块

图片[1]-从零搭建Vue SSR应用-www.131417.net

项目结构概览

Nuxt.js 提供了非常清晰的项目结构，关键目录如下：

node_modules/ – 项目的依赖库
.nuxt/ – Nuxt.js 的编译文件和其他配置文件
components/ – 存放 Vue 公共组件文件夹
pages/ – 存放 Vue 页面组件的文件夹
plugins/ – 插件文件夹，例如安装过程中选择了antd-ui.js 、 element-ui.js文件
static/ – 静态资源文件夹
store/ – 如果使用 Vuex, 状态管理相关的文件存放在这里
nuxt.config.js – Nuxt.js 的配置文件
package.json – 项目管理和依赖声明文件

编写一个简单的 SSR 页面

在 pages/ 目录下创建一个名为 index.vue 的文件，这将是我们的首页：

<template>
  <div>
    <h1>{
  { message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎来到我的 Nuxt.js SSR 应用！'
    }
  }
}
</script>

启动开发服务器

npm run dev
# 或者使用 yarn
yarn dev

打开浏览器并访问 http://localhost:3000。您应该能看到页面上显示着 “欢迎来到我的 Nuxt.js SSR 应用！”。

部署你的 Nuxt.js 应用

npm run build
# 或者使用 yarn
yarn build

该命令会为路由、页面以及所需的API调用生成预渲染的 HTML 文件。然后，您可以将这些文件部署到任何支持静态文件托管的服务上，如 Netlify、Vercel、GitHub Pages 等。

总结

通过使用 Nuxt.js，您可以轻松地将服务端渲染功能集成到基于 Vue.js 的应用程序中。这不仅可以提高首屏加载速度，还有助于提高网站在搜索引擎中的排名。Nuxt.js 通过文件系统的智能架构、自动代码分割以及热模块更换等功能，极大地简化了 SSR 的开发流程。掌握 Nuxt.js，您就可以构建出高性能、易于维护的 Vue SSR 应用，为用户提供更优质的体验。