起步
1、安装Nuxt
npx nuxi init <project-name>
yarn install
yarn dev
SSR、SWR和static
SSR、SWR和static都是前端开发中的概念
-
SSR(Server Side Rendering)是一种服务端渲染技术，它可以将数据从服务器传递到客户端，然后在客户端上进行渲染。与SWR不同的是，SSR可以在服务器端生成HTML代码，然后将其发送到客户端进行呈现。这种技术可以提高网站的性能和SEO效果。
-
SWR(Server-Side Rendered)是一种服务端渲染的技术，可以将数据从服务器传递到客户端，然后在客户端上进行渲染。这种技术可以提高网站的性能和SEO效果。
-
Static(静态页面)是指没有动态内容的网页，它们不会在服务器上运行，而是直接从本地文件系统中读取并显示给用户。这种页面通常比动态页面更快，但是无法响应用户的交互请求。
Nuxt支持三种渲染模式 :SSR、SWR和static
在nuxt配置中添加
ssr: true,//全局配置是否使用服务端渲染//路由规则，不同渲染模式routeRules: {'/test/**': { swr: true }, //swr、static、ssr},
pages目录
Nuxt.js的pages目录是一个存放页面(.vue)的文件夹，这些页面的层级约束的页面路由url的跳转及展示。当项目下有存在pages目录，Nuxt将会自动加载Vue Router来实现路由效果。目录下的文件通常是Vue的组件，也允许具有.vue、.js、.jsx、.ts或.tsx副档名的文件 。
基于文件路径的路由模式
1、pages文件夹下新建index.vue、test.vue，内容如下
//index.vue
<template><div><h1>index page</h1></div>
</template>//test.vue
<template><div><h1>test page</h1></div>
</template>
2、在app.vue中插入<NuxtPage></NuxtPage>
3、启动项目,访问http://localhost:3000/和http://localhost:3000/test，可以看到能够访问到不同也页面，不需要额外配置路由。
复杂的文件夹路由
1、新建test文件夹，并新建[id].vue，内容如下：
<template><h1>test {{$route.params.id}}</h1>
</template>
浏览器中访问 http://localhost:3000/test/111，可以看到页面展示了test 111
2、新建同名的test.vue组件，内容如下：
<template><h1>test parent</h1><NuxtPage></NuxtPage>
</template>
浏览器中访问 http://localhost:3000/test/111，可以看到页面不仅展示了test 111，还展示了test parent。
通过配置自定义路由
- 在
nuxt.config.js中配置路由：
export default {router: {middleware: 'auth', // 添加中间件以进行身份验证mode: 'history', // 使用HTML5历史记录模式routes: [{ path: '/home', component: '~/pages/index.vue' }, // 默认路由{ path: '/about', component: '~/pages/about.vue' }, // 其他路由],},
}
- 在
pages目录下创建一个名为index.vue的文件，并在其中定义页面内容：
<template><div><h1>Welcome</h1></div>
</template>
- 在
pages目录下创建一个名为about.vue的文件，并在其中定义页面内容：
<template><div><h1>About</h1></div>
</template>
- 在浏览器中访问
http://localhost:3000/home,将看到index的内容。访问http://localhost:3000/about将看到about到内容。
layouts文件夹
Nuxt.js 的 layouts 文件夹用于存放页面布局文件。在 Nuxt.js 中，每个页面都有一个默认的布局文件，该文件位于 pages/layouts 目录下。
如果需要自定义页面布局，可以在项目根目录下创建一个新的 layouts 文件夹，并在其中创建一个新的布局文件。例如，可以创建一个名为 default.vue 的文件，然后在该文件中定义页面布局。
<template><div><h1>default</h1><slot></slot></div>
</template>
在app.vue中新增 NuxtLayout
<template><div><NuxtLayout><NuxtPage></NuxtPage></NuxtLayout></div>
</template>
再次访问页面，可以看到页面中展示的default，访问不同的路由都带着该内容
