nuxt3学习

一、项目搭建

1. 脚手架安装nuxt3

npx nuxi@latest init <project-name>

2. 安装ui框架

npm install -D @element-plus/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],  //引入element-plus模块
})

3.安装pinia

npm install pinia @pinia/nuxt

如果安装失败，将以下内容添加到 package.json中

"overrides": {
  "vue": "latest"
}

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
})

二、nuxt.config.ts的一些配置

export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  modules: ["@element-plus/nuxt", "@pinia/nuxt"],  //导入模块
  css: ["element-plus/dist/index.css"],  //引入全局样式
  app: {
    head: {
      title: "nuxt3学习",  //全局设置网页标题,也可以在页面去设置局部标题
      meta: [
        {
          name: "description",
          content: "Nuxt 3",
        },
      ],
    },
  },
  runtimeConfig:{  //运行时的配置，用于定义全局变量 用法下面的代码
    public:{  //public是服务端和客户端都能拿到值
      baseUrl:"localhost:3000"
    },
    abc:"123"  //只能服务端拿到值
 }
});

//获取runtimeConfig里面的值
const config = useRuntimeConfig();
console.log(config.abc,"config.abc");  //服务端打印123，客户端undefined
console.log(config.public.baseUrl,"config");  //服务端和客户端都一样

三 、路由

nuxt3使用的是约定式路由，只需要在根目录的pages页面中创建文件就行了，/路径对应的是index.vue文件，比如localhost:3000就会访问pages/index.vue文件，localhost:3000/login就会访问pages/login.vue,localhost:3000/users/test就会访问pages/users/test.vue这样就实现了嵌套路由.

-| pages/
---| index.vue   
---| login.vue
---| users/
-----| test.vue
-----| index.vue

命名路由

使用方式和vue-router是一样的，通过localhost:3000/users/123访问

-| pages/
---| users/
-----| [abc].vue

const route = useRoute();
let abc= ref(route.params.abc); //获取命名路由传递的参数

可选路由
localhost:3000/users/test和localhost:3000test访问的是同一个页面

-| pages/
---| [[user]]/
-----| test.vue

全局路由

一般用于404页面，只要路由没有匹配上就来这个页面

-| pages/
---| [...abc].vue

vue-router里面的<router-view/>组件替换成了<NuxtPage />,当然也可以自定义路由，在页面中使用definePageMeta,路由跳转也变成了navigateTo，用法和router.push是一样的

definePageMeta({
    path:"/testLogin"
})
navigateTo("/testLogin"); 

局部路由守卫

在根目录创建middleware文件夹，随便创建一个文件

//test.ts
export default defineNuxtRouteMiddleware((to, from) => {
    console.log(to,"to");
});

在需要的页面使用

definePageMeta({
    middleware:["test"]
});

全局路由守卫

和局部路由守卫定义方式是一样的,只是命名方式不一样,abc.global.ts，需要在文件名中加入global，不需要在任何文件中使用就能全局路由拦截

四、composables文件夹

在这个文件夹里面的文件都会进行自动导出，但是只限于第一层，比如下面的test文件中的myTest.ts文件就不会自动导出,有两种导出方式，见下方代码

-| composables/
---| abc.ts
---test/
------myTest.ts

// abc.ts
export const add = (x, y) => {
  return x + y;
};
export default (x, y) => {
  return x + y;
};

console.log(add(1,2),"add");  //具名导出直接使用导出名
console.log(abc(1,2),"abc");  //默认导出使用文件名

五、useAsyncData

这个hook主要用于网络请求，如果直接使用$fetch('https://api.nuxtjs.dev/mountains')，那么服务端会执行一次，客户端也会执行一次，这样会增加服务器压力，所以使用useAsyncData会有一个缓存效果，当发现第一个参数也就是下面的mountains相同的时候，就直接使用缓存的数据，不会再执行里面的代码，类似于计算属性，useAsyncData必须返回一个promise

const { data, pending, error, refresh } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains')
)

六、 网络请求封装

axios搭配useAsyncData来使用，在上面封装一层，也可以使用nuxt3提供的useFecth，也是封装一层，让所有的接口都走封装的方法，具体使用方法

const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
  onRequest({ request, options }) {
    // 这里是请求拦截
    options.headers = options.headers || {}
    options.headers.authorization = '...'
  },
  onResponse({ request, response, options }) {
  	//这里是响应拦截，不管成功还是失败都走这里
    // Process the response data
    return response._data
  },
  onResponseError({ request, response, options }) {
    //这里是失败的响应拦截
  }
})

7. state

const a = ref(0);
a.value++;
console.log(a.value,"a.value");  //1

上面这串代码会打印1，虽然服务端和客户端都执行了一次，但是每次a都重新赋值了，那么该如何让其打印2呢，第一种方法就是定义在runtimeConfig的public里面，第二种方式就是使用state

const test = useState("abc",() =>{
    return 0;
});
test.value++;
console.log(test.value,"test.value")   //2

这里的state是全局共享的，类似于pinia,可以在任何页面使用useState("test").value来获取值

8.打包发布

npm run build，执行文件在.output/server/index.mjs