Nuxt+Vue3+TS+Vite入门教程

介绍

什么是Nuxt3

Nuxt3是一个基于Vue.js的应用框架，它提供了一些默认的配置和约定，使得开发者可以更快速地构建出高质量的Vue.js应用程序。Nuxt3是Nuxt.js的下一代版本，它采用了全新的架构和设计，提供了更好的性能和可扩展性。

Nuxt3 的优势

1、更快的启动和渲染速度
2、更好的性能和可扩展性
3、更灵活的配置和插件系统
4、更好的开发体验和文档支持

Nuxt3 的生态

Nuxt3的生态非常丰富，包括了许多插件、模块、组件库、工具等等。可以在Nuxt3官方网站的生态页面（https://nuxt.com/modules）上找到相关的Nuxt3生态。

安装

安装 Nuxt3

在安装Nuxt3之前，你需要保证你的node.js大于16.10.0 或者最新版本

创建一个nuxt项目

npx nuxi init <project-name>

切换到刚创建的项目根目录

cd <project-name>

下载相关依赖

npm install

基础

Nuxt3 的目录结构

• assets/: 存放静态资源文件，如样式、图片、字体等。
• components/: 存放组件文件，可以在页面中引用。
• layouts/: 存放布局文件，可以在页面中引用。
• middleware/: 存放中间件文件，可以在路由中使用。
• composables/: 存放可重用的逻辑代码，可以在页面、组件和插件中使用。
• pages/: 存放页面文件，每个文件对应一个路由。
• plugins/: 存放插件文件，可以在应用程序中使用。
• static/: 存放静态文件，如 robots.txt、favicon.ico 等。
• store/: 存放 Vuex store 文件。
• server/: 存放服务器端代码，包括中间件、API、插件等等。
• utils/: 存放工具函数文件。
• nuxt.config.ts: Nuxt3 的配置文件，使用 TypeScript 编写。
• package.json: 项目的依赖和脚本配置文件。
• tsconfig.json: TypeScript 的配置文件。

页面和路由

Nuxt3的页面和路由是基于文件系统的路由系统，它允许开发者通过在pages目录下创建.vue文件来定义页面和路由。每个.vue文件对应一个路由，Nuxt3会根据文件名自动生成路由路径。例如，pages/index.vue对应的路由路径为/，pages/about.vue对应的路由路径为/about。此外，Nuxt3还支持动态路由和嵌套路由，可以通过在文件名中使用[]和_来定义动态路由和嵌套路由。例如，pages/posts/[id].vue对应的动态路由路径为/posts/:id，pages/posts/_slug/comments.vue对应的嵌套路由路径为/posts/:slug/comments。

动态路由

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

// 你可以通过使用$route.params来获取传递的参数
<template>
  <p>{
  { $route.params.group }} - {
  { $route.params.id }}</p>
</template>

如果要使用组合 API 访问路由，有一个全局函数允许您像在选项 API 中一样访问路由。

<script setup>
const route = useRoute()

if (route.params.group === 'admins' && !route.params.id) {
     
  console.log('Warning! Make sure user is authenticated!')
}
</script>

如果希望参数是可选的，则必须将其括在双方括号中 - 例如，或者将同时匹配和. ~/pages/[[slug]]/index.vue ~/pages/[[slug]].vue

嵌套路由

文件名和目录同名 nuxt3 就会自动给你制造成嵌套路由,父组件中使用NuxtChild组件显示嵌套子组件内容

比如下面目录结构：
-| pages/
---| parent/
------| child.vue
---| parent.vue

// pages/parent.vue
<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

导航

要在应用的页面之间导航，您应该使用 组件。此组件包含在Nuxt中，因此您不必像导入其他组件那样导入它。

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

编程导航

Nuxt 3 允许通过实用程序方法进行编程导航。使用此实用工具方法，你将能够以编程方式在应用中导航用户。这非常适合从用户那里获取输入并在整个应用程序中动态导航它们。
在此示例中，我们有一个名为navigate()的简单方法，当用户提交搜索表单时调用该方法。

<script setup>
const router = useRouter();
const name = ref('');
const type = ref(1);

function navigate(){
     
  return navigateTo({
     
    path: '/search',
    query: {
     
      name: name.value,
      type: type.value
    }
  })
}
</script>

布局和组件

默认布局

Nuxt提供了一个可自定义的布局框架，您可以在整个应用程序中使用，非常适合将常见的UI或代码模式提取到可重用的布局组件中。布局放置在目录中，并在使用时通过异步导入自动加载。

// ~/layouts/default.vue
<template>
  <div>
    Some default layout shared across all pages
    <slot />
  </div>
</template>

在布局文件中，布局的内容将在中加载，而不是使用特殊的组件。

如果您使用，还需要在app.vue添加

<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>

使用其它自定义组件

-| layouts/
---| default.vue
---| custom.vue

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
// You might choose this based on an API call or logged-in status
const layout = "custom&