nuxt 走约定大于配置的路线，有些问题需要注意一下下。特意记录下来。
- 如果创建了 pages 目录，但是里边没有文件，就会出现 404。要不去掉 pages 页面，要不填充必须的页面。
-
试用 NuxtLayout 的时候，layouts 目录下的模板名不要叫 default.vue，会渲染成双倍的 div。
相关
https://juejin.cn/post/7038957796351541261
https://juejin.cn/post/7080007366808666119
服务端渲染
https://vue3js.cn/interview/vue/ssr.html
https://v3.nuxtjs.org/getting-started/quick-start
这里尝试下 vue ssr 项目。可是，真正应用到项目上，还得服务端做好支持和配置。pm2,nginx 这些也是要处理
演示结果：
初始化安装 nuxt 项目
个人喜欢用 yarn 的
npx nuxi init mengmeng
cd mengmeng
# 加入版本控制
git init
git add .
git commit -m 'nuxt 初始化项目'
yarn install
# 启动起来看看
yarn dev
构建基本 layout 和 跳转
一个 pc 端网站，通常有顶部，中间部分，底部三个部分构成，而顶部和底部，几乎是共用不变的。这种场景，我们很容易想到抽象成模板的方式来做。不过，网站除了这些共用外，还有其他地方共用，暂时就不考虑那么细致。
- 先删除 app.vue
- 创建 layouts 目录，在目录中建立一个 base.vue 的模板。内容如下：
<template>
<div class="base-container">
<div class="header"></div>
<div class="body">
<slot></slot>
</div>
<div class="footer"></div>
</div>
</template>
<style>
*,
html,
body {
margin: 0;
padding: 0;
}
</style>
<style lang="scss" scoped>
.base-container {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
.header {
display: flex;
width: 100%;
height: 80px;
background-color: aquamarine;
}
.body {
display: flex;
flex: 1;
}
.footer {
display: flex;
width: 100%;
height: 160px;
background-color: bisque;
}
}
</style>
- 新建 pages 目录，该目录下新建 index.vue 文件，该文件作为项目的首页。代码如下：
<template>
<NuxtLayout name="base">
<div class="container">
<NuxtLink to="/meets"><h4>meets</h4></NuxtLink>
</div>
</NuxtLayout>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 20px 30px;
}
</style>
meets 是另一个路由对应文件，下边会建立。
- 新建 meets 目录，meets 下新建 index.vue 文件。index 是默认映射。 内容如下。
<template>
<div>
<NuxtLayout name="base">
<div class="container">
<NuxtLink to="/"><h4>home</h4></NuxtLink>
<NuxtLink to="/meets/5"><h4>详情一</h4></NuxtLink>
</div>
</NuxtLayout>
</div>
</template>
<script>
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 20px 30px;
h4 {
margin-top: 12px;
}
}
</style>
/meets/5 是另一个路由文件，下边会建立
- meets 下新建 [id].vue 文件，[]包含的是动态映射，动态详情很好用。 内容如下：
<template>
<NuxtLayout name="base">
<div class="container">
<h4>id {{ id }}</h4>
</div>
</NuxtLayout>
</template>
<script setup>
import { ref } from 'vue'
const route = useRoute()
const id = ref(route.params.id)
</script>
<style lang="scss" scoped></style>
这几个文件，串起来就可以组成首页、列表页、详情页三个页面。这刚好是一个项目最基本的构件。上边这些只是最基础最基础的一点点东西。要做好整个项目，这些是远远不够的。
使用 vuetify 作为 ui 框架
https://next.vuetifyjs.com/en/getting-started/installation/
vue add vuetify