从零开始搭建Nuxt3项目

准备工作

Nodejs版本需要最新的 >= 16.11

创建项目

初始化项目

# nuxt-app为项目名称，运行之后会再当前文件夹下创建名为nuxt-app的文件夹
npx nuxi init nuxt-app

安装依赖

# 使用npm安装也可以
# npm install
yarn install

开发模式启动项目

yarn dev

在浏览器中打开http://localhost:3000/

这个是官方给出的demo页面我们可以自己通过vue开发自己的页面

开发一个服务接口

• 在项目根目录新建文件夹/server/api，然后在api创建文件hello.ts

export default defineEventHandler(() => 'Hello World!')

• 修改app.vue

<script setup>
	const {data} = await useFetch(`/api/hello`)
</script>
<template>
	<div>
		{{ data }}
	</div>
</template>

此时页面就会展现出大家最喜欢的Hello World!😉

这样一个基于Nuxt3的ssr项目就搭建完成了