1.概述
nuxt是一个SSR服务器端渲染技术。
什么是 CSR ?
CSR => client-side-render，即客户端渲染。具体过程如下：
- 用户请求页面，返回页面。此时页面只是模版页面
- 浏览器解析页面代码，读到js代码时，会根据我们所写的接口去请求数据
- 得到返回数据后使用模版（vue/react/ng/art-template）进行渲染
什么是 SSR ?
SSR => server-side-render，即服务器端渲染。具体过程如下：
- 用户请求页面
- 后端取到准备好的数据，渲染到我们自己写的服务器模版（next/nuxt/ejs）中，准备好html结构与相应数据后返回给浏览器
2.使用Nuxt
创建nuxt项目
npx nuxi@latest init my-nuxt-app项目目录
Components
你可以新建一个components文件夹，文件夹里面的组件文件会自动导入
app.vue
<script setup lang="ts">
</script>
<template>
<div>
<my-component></my-component>
</div>
</template>
MyComponent.vue
<script setup lang="ts">
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
<template>
<div>
自定义组件。。。
{{count}} {{double}}
</div>
</template>
<style scoped>
div {
color: green;
}
</style>如果Components的文件夹有层级
如：
| components/
--| base/
----| foo/
------| Button.vue则使用BaseFooButton这样的方式导入
<script setup lang="ts">
</script>
<template>
<div>
<my-component></my-component>
<BaseFooButton></BaseFooButton>
</div>
</template>public
public文件夹用来放静态文件，这里面的文件可以静态应用，比如图片。
app.vue
<script setup lang="ts">
</script>
<template>
<div class="main-div">
<img alt="" src="/img/1.jpg" />
<my-component></my-component>
<BaseFooButton></BaseFooButton>
</div>
</template>
<style scoped>
.main-div {
width: 100%;
height: 100%;
}
img {
width: 150px;
height: 150px;
}
</style>
显示结果：
