文件创建
· 打开终端执行 npx nuxi init + 文件名 即可创建文件
· 安装依赖 npm install 或 npm i (yarn install 或 yarn i)
· 运行 npm run dev
· 使用指定版本的node可以执行命令 nvm use v14.18.1(需要安装nvm)
静态路由
新建pages文件,在pages目录下新建index.vue文件。
NuxtPage是路由出口,写在app.vue里面
在pages目录下新建detail.vue文件。
同目录下的index.vue文件内添加< NuxtLink to="/detail">Detail Page </ NuxtLink >,可以跳转。
点击跳转后的页面内容就是detail.vue文件里面的内容
动态路由
文件名或者文件夹里包含了方括号,它们将被转换为动态路由参数。
在pages目录下新建user-[group]文件夹,在user-[group]目录下新建[id].vue文件。
在pages目录下的index.vue文件内添加 < NuxtLink to="/user-admin/1">/user-admin/1< /NuxtLink> ,点击可以跳转
点击跳转后的页面内容就是[id].vue文件里面的内容。
嵌套路由
目录和文件同名可以制造嵌套路由
在pages目录下新建parent文件夹和parent.vue文件。在parent目录下新建child.vue文件和index.vue文件。
nuxt自定义布局页
在根目录下创建layouts(文件名必须是layouts)文件夹,在layouts文件夹下新建defult.vue文件(默认自定义布局页的模板)。default文件里要写一个,插槽就是用来放自定义的组件的。
接下来去写自定义的组件。在pages目录下新建一个vue文件(jsls.vue),自定义的内容需要用NuxtLayout标签包裹。
每一个插槽可以放一个组件也就是一个页面,在自定义模板中可以放置多个组件,也就是可以写多个slot,只要给每一个slot取上名字就可实现在页面内展示多个组件。
自定义内容需要用template标签包裹并给一个#后面带上插槽的名字。
组件编写
nuxt3的组件必须写在components文件夹下面。
首先在根目录下新建components文件夹,在components文件夹里新建文件,例如头部组件。新建Header.vue文件。
在index.vue文件里引入这个组件。
也可以在布局模板里面使用组件,使用的方法和上面的方法一样。在defult.vue文件里面引用Header组件。
多层级组件
创建多层级组件。在components目录下创建一个test文件夹,test文件夹内创建自定义组件文件,例如按钮。
在test目录下新建MyButton文件
多层级组件在页面内的引用与上面的组件引用方法一致,不过多层级组件在引用时需要加上文件名
组件懒加载
页面有很多内容,需要过一段时间再显示或者组件有时候显示有时候不显示的时候就可以使用组件懒加载。
在components目录下新建LazyLoad.vue文件。
组件懒加载可以和v-if一起使用。
模块化代码
nuxt3中的模块化代码composables文件夹。共用的方法写在里面可以自动导入到页面,组件插件当中。
写一个获取当前时间的方法。首先在根目录下创建composables文件夹,然后新建time.ts文件。写一个方法getTime()
在pages目录下新建demotime.vue文件,引用getTime方法。
模块化代码有一定的限制,比如在composables目录下新建一个test文件夹,在test目录下智能新建名为index的ts文件,用其他的名字在页面内无法引用方法并且会报错。
服务端请求数据
nuxt中页面渲染常用的四种方法,主要用前两种:
· useAsyncData
· useFetch
· useLazyFetch
· useLazyAsyncData
在pages目录下新建demotwo.vue文件,用useAsyncData方法或者useFetch方法请求参数。
const res = await useAsyncData("getList", () =>$fetch("请求接口的地址"));
const res = await useFetch("请求接口地址",{method:'get'});
两种方法的写法相似,有一点区别,需要注意区分。
中间件的使用&路由
从一个页面跳到另一个页面,在跳转过程中执行一些代码。
在根目录下新建middleware文件夹,新建default.global.ts文件(全局配置),default.ts文件
项目在写的过程中会有不显示效果的可能,需要重跑一下项目。有些报错也需要重启项目。