Nuxt3创建项目、配置和路由的基本使用

Nuxt3官网Nuxt 中文站 - 直观的Web框架 Nuxt3文档 · Nuxt

nuxt3默认支持typescript

创建项目

npx nuxi@latest init myNuxt

目录结构

project-name
├─ public
│  └─ favicon.ico
├─ server
│  └─ tsconfig.json
├─ .gitignore
├─ .npmrc
├─ README.md
├─ app.vue
├─ nuxt.config.ts
├─ package.json
└─ tsconfig.json
目录结构很简单，里面很多东西都需要自己去配置

首先安装依赖项

npm install

运行项目

npm run dev

基础配置

在nuxt.config.ts文件中：安装 element plus并进行配置

路由的基本使用

命名路由，可选路由，全局路由

NuxtLink支持命名路由[ ] 可选路由[[ ]] 全局路由[...]

嵌套路由的使用

<NuxtPage></NuxtPage>

编程式路由navigateTo

路由中间件

首先在在根目录下创建一个文件夹

可以设置并引入多个中间件

如果设置全局中间件 文件名必须是xxx.global.js

并且不需要进行引入

$fetch和useAsyncData

使用useAsyncData和$fetch配合使用进行获取数据

useAsyncData只会在服务端执行一次

text表示key