nuxt3学习

一、项目搭建

1. 脚手架安装nuxt3
javascript 复制代码
npx nuxi@latest init <project-name>
2. 安装ui框架
javascript 复制代码
npm install -D @element-plus/nuxt
javascript 复制代码
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],  //引入element-plus模块
})
3.安装pinia
javascript 复制代码
npm install pinia @pinia/nuxt

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

javascript 复制代码
"overrides": {
  "vue": "latest"
}
javascript 复制代码
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
})

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

javascript 复制代码
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"  //只能服务端拿到值
 }
});
javascript 复制代码
//获取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这样就实现了嵌套路由.

javascript 复制代码
-| pages/
---| index.vue   
---| login.vue
---| users/
-----| test.vue
-----| index.vue

命名路由

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

javascript 复制代码
-| pages/
---| users/
-----| [abc].vue
javascript 复制代码
const route = useRoute();
let abc= ref(route.params.abc); //获取命名路由传递的参数

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

javascript 复制代码
-| pages/
---| [[user]]/
-----| test.vue

全局路由

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

javascript 复制代码
-| pages/
---| [...abc].vue

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

javascript 复制代码
definePageMeta({
    path:"/testLogin"
})
navigateTo("/testLogin"); 

局部路由守卫

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

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

在需要的页面使用

javascript 复制代码
definePageMeta({
    middleware:["test"]
});

全局路由守卫

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

四、composables文件夹

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

javascript 复制代码
-| composables/
---| abc.ts
---test/
------myTest.ts
javascript 复制代码
// abc.ts
export const add = (x, y) => {
  return x + y;
};
export default (x, y) => {
  return x + y;
};
javascript 复制代码
console.log(add(1,2),"add");  //具名导出直接使用导出名
console.log(abc(1,2),"abc");  //默认导出使用文件名

五、useAsyncData

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

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

六、 网络请求封装

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

javascript 复制代码
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

javascript 复制代码
const a = ref(0);
a.value++;
console.log(a.value,"a.value");  //1

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

javascript 复制代码
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

相关推荐
Boilermaker19923 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子15 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102429 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构