前言
当初了解到要做SSR，nuxt比较好，但是了解之后发现，兼容的都是vue2。而我做这些就是为了学习，当然要选择vue3。所以，我们之前实现的方案是基于vue3 + vite2的SSR。
准备
根据官网案例，运行命令：npx nuxi init nuxt3-app，nuxt3-app为项目名。因为网络原因，有很大机率失败，没有关系，重试几次就好了！ 成功之后，它会提示你cd nuxt3-app和npm run dev or yarn install。
下面，我们一个一个介绍这些功能，当然，不需要的话，是不用创建文件夹的。
assets文件夹
assets文件夹主要用于存储样式和字体文件
components文件夹
components文件夹主要用于存放组件，在这个文件夹里的组件，都会自动注册，自动引入，也就是说，不需要import之类的。
composables文件夹
我不是专业的前端，所以我对于这个概念比较模糊 在我理解，这个是存储公共的状态。
比如，我有一个需求：滚轮滚动到一定程度，所有的页面，都要有响应的变化。 那么我会选择写一个ts到这里，然后去维护，true和false，而不用每个组件都去判断滚轮或者最外层页面传值到组件里。
layouts文件夹
layouts主要存储布局文件，可以使用多个布局。
值得注意的是，layouts和app.vue是冲突的，也就是说，如果使用了布局，可以不用app.vue。
默认布局的命名是：default.vue
但是一定要注意，一定要包含：
pages文件夹
pages主要存放页面，存放在这里的页面会自动注册为路由。
举例：我在pages里创建index.vue。如果layouts/default.vue里写了
同时，也支持以下特殊规则命名，比如pages/article/[id].vue，需要注意的是，文件名就是[id]，带中括号。如果我访问localhost:3000/article/10，那么显示的就是[id].vue。[id].vue里面
const route = useRoute();
console.log(route.params.id);
打印出来的，就是10.
plugins文件夹
plugins文件夹用于存放插件，官方文档有写，是可以支持.server 和 .client命名来区分客户端插件和服务端插件的。
public文件夹
public文件夹用于存放公共文件，我把robots.txt这一类的，都放进了这里。
server文件夹
server文件夹用于存放api，但是目前这个用法还很模糊，我贴一下我的代码。 新建：server/api/blog/list.ts
import { useQuery } from 'h3'
export default async (req, res) => {
const params = await useQuery(req);
const data = await $fetch('/blog/aaa/list', {
baseURL: 'http://api.test.com',
method: 'GET',
params: params
}).then(res => {
if (!res) {
return {};
}
if (res.code && res.code === 200) {
return res.data
} else {
return {};
}
})
return data
}那么访问：localhost:3000/api/blog/list，就可以访问的到。 目前还不是很清楚他的使用场景。