非你网

nuxt 走约定大于配置的路线，有些问题需要注意一下下。特意记录下来。

1. 如果创建了 pages 目录，但是里边没有文件，就会出现 404。要不去掉 pages 页面，要不填充必须的页面。

2. 试用 NuxtLayout 的时候，layouts 目录下的模板名不要叫 default.vue，会渲染成双倍的 div。

相关

https://juejin.cn/post/7038957796351541261

https://juejin.cn/post/7080007366808666119

https://juejin.cn/search?query=nuxt3

https://juejin.cn/post/6844903906200256525

服务端渲染

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