介绍
什么是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&