[从0学nuxtjs]1. 创建项目与目录结构

最近想做一个官网, 最终还是选择了nuxtjs 包管理工具使用pnpm

创建项目

pnpm dlx nuxi@latest init my-site

刚创建的项目比较简陋, 对于目录结构可以使用cli来创建, 比如一个页面

nuxi add page index

这样会创建 pages目录, 然后在其中生成一个 index.vue的文件

这个cli的重复(或者说别名)比较多 比如 init / create 都是创建项目 比如 add / new 都是创建文件

项目的入口是 app.vue文件 如果只有这一个页面也不会有路由 如果创建了page, 则会自动生成路由, 这个不用去配置还是很方便的

页面的跳转使用 nuxt-link 标签

比如我再创建一个 登录页面, 从首页跳转过去

nuxi add page login

这里说一下页面的默认被nuxt-page包裹就能使用路由,

<template>  
    <div>  
        <NuxtPage />  
    </div>  
</template>  
<script setup lang="ts">  
</script>

默认的是index, 这样便会加载 pages/index.vue的内容

官网参考链接: nuxt.com/docs/guide/…

如果要添加路由跳转则是

<template>  
  <div>  
    Page: index  
    <br>  
    <nuxt-link to="/login" style="margin-right: 16px">login</nuxt-link>  
    <nuxt-link to="/about">about</nuxt-link>  
  </div>  
</template>

layout 默认的layout文件名是 default.vue, 我们使用cli创建这个文件

官网参考链接: nuxt.com/docs/guide/…

nuxi add layout default

便会在layouts目录下创建default.vue文件, 如果要使用的话一定要使用 nuxt-layout显式调用

<template>  
  <div>  
    <nuxt-layout>  
      <NuxtPage name="login" />  
    </nuxt-layout>  
  </div>  
</template>

这里如果hmr没有生效的话就重启下服务 pnpm run dev 这样所有的页面上都会使用这个默认的layout了 如果在某个页面想嵌套的话可以直接加, 比如我这的about

nuxi add layout index

然后加到

<template>  
  <div>  
    <nuxt-layout name="index">  
      <div>Page: about</div>  
    </nuxt-layout>  
  </div>  
</template>

这样就是多嵌套了一个layout, 如果想覆盖掉默认的layout, 目前除了移除掉app.vue的layout外我还没找到其他方法