1.安装:
npx nuxi init project-name # project-name 是项目名,如果下载不下来请挂梯子。
2.安装依赖:
npm install
3.运行项目:
npm run dev
4.代码解释:
<template>
<!-- app.vue 是所有页面的入口: -->
<!-- 1.nuxt默认会找pages文件下index.vue,index.vue相当于浏览器中输入的/开始,index.vue外面可以像其它页面一样放个文件夹,但是必须命名为index,否则找不到,报错,通常情况下不会放index文件夹 -->
<!-- <TestComp /> 2.nuxt中可以直接写组件名,组件会被渲染,不过需要注意的是:template下只要一个根标签 -->
<!-- <NuxtLink to='/'>首页</NuxtLink> 3.NuxtLink相当于vue中router-link标签,to后面的值给路由值,nuxt中基于文件路由(无需按装vue-router,但是所有页面需要放到pages文件下。并且里层文件需要命名为index.vue,如:pages/musicPage/index.vue,如果需要放到其它目录,则需要更改配置),如果想要访问pages下的musicPage页面,那么只需要在to后面给/musicPage,如:to='/musicPage' -->
<!-- 4.NuxtPage相当于vue中router-view标签 -->
<NuxtPage />
{{ data }}
</template>
<script setup lang='ts'>
// 5.useSeoMeta函数用来优化seo,设置网站的标题,描述等信息,可被爬虫爬到,此函数在其他页面也是可以使用的。
const title = '苦海123'
useSeoMeta({
title: title,
description: '苦海123是一个程序员!',
keywords: '程序员,前端,web,uniapp,node.js,java,mySql,php,it男,宅男'
})
// 6.ui库的使用:nuxt中使用ui库步骤,以:vant/nuxt为例:1.安装(yarn add vant、yarn add @vant/nuxt --dev) 2.在nuxt.config.ts文件modules中配置,如:modules: ['@vant/nuxt']
// 7.nuxt中支持写服务接口,接口/默认指向server文件夹,如果想要写一个路径为:/api/musicListApi的接口,那么文件路径为:server/api/musicListApi.ts,接口同样支持文件路径(server下可以嵌套更多的文件,进行路由处理),会自动去匹配;除了可以以文件路径访问接口外,nuxt还支持文件名中指定请求方式,如果不写则都可以访问,如:videoListApi.get.ts,表示:get请求,路径为:/api/videoListApi
// 获取server/api/musicListApi接口数据:在nuxt3中无需按钮axios等工具,可以直接使用useFetch来获取数据,官方也推荐使用useFetch,useFetch同样可以请求其它语言提供的网路接口,请求此服务外的ip时需要设置baseURL或配置代理
const data = await useFetch('/api/musicListApi', {
method: 'get', // 指定请求方式,接口文件中没有指明请求方式的情况下都可以设置
query: { key1: 'value1', key2: 'value2' }, // 底层自动转问号传参
params: { 'paramsKey1': 'paransValue1' }, // 请求提传参
headers: { 'token': 'token123'}, // 设置请求头信息
// baseURL: 'http://www.baidu.com', // 设置基础URL
onRequest({ request, options }) { // onRequest用于设置请求拦截器,可用于设置请求头等信息
options.headers = options.headers || {}
options.headers.authorization = 'token'
console.log('请求成功:', options)
},
onRequestError({ request, options, error }) { // onRequestError请求异常时执行
console.log('请求异常:', error)
},
onResponse({ request, response, options }) {
console.log('响应成功:', response)
},
onResponseError({ request, response, options }) {
console.log('响应异常:', response)
}
})
console.log('data', data) // 返回值:{ "data": { '接口返回的实际数据' }, "pending": false, "error": null, "status": "success" }
// 8.有的时候写ts接口是很麻烦的事,此时推荐一个通过json数据转接口的工具:json2ts,在vscode插件中安装,按快捷键:cmd+alt+v 或 ctrl + alt + v,测试无效
// 9.动态路由:有的时候接口是路由传参的形式,如:/api/videoList/123,这个接口中123是参数,此时不可能在videoList下面写多个文件,此时可以将videoList下所有的文件统一到一个文件上,此时可以使用动态命名如:/api/videoList/[id].vue,在[id].vue文件模版中可以通过:$route.params.id拿到动态参数,js中可以通过: const { params } = useRoute()获取动态参数
// 10.组将上面加keepalive可以做到缓存数据,还可以加缓存页面数量,如: <NuxtPage :keepalive='{ max: 10 }' />
</script>
<style scoped lang="scss">
// 8.nuxt支持全局导入scss代码-测试异常:
// @import '~/assets/css/mixins.scss';
/* 全局修改ui组件库风格:测试无效 */
:root {
--van-button-primary-background: red !important;
}
</style>
5.服务接口示例:
// 1.nuxt中支持写服务接口,接口/默认指向server文件夹,如果想要写一个路径为:/api/musicListApi的接口,那么文件路径为:server/api/musicListApi.ts,接口同样支持文件路径,会自动去匹配;除了可以以文件路径访问接口外,nuxt还支持文件名中指定请求方式,如果不写则都可以访问,如:videoListApi.get.ts,表示:get请求,路径为:/api/videoListApi
// 2.定义的接口可以在页面中通过:await useFetch('/api/musicListApi')获取数据,useFetch类似axios,defineEventHandler中可以调其它接口或者访问数据库等
export default defineEventHandler(event => {
return {
code: 200,
msg: '获取音频列表数据成功!',
data: [
{ id: 0, name: '音频1', label: '音频文件1' },
{ id: 1, name: '音频2', label: '音频文件2' },
{ id: 2, name: '音频3', label: '音频文件3' }
]
}
})
6.公共scss代码引入:
<template>
<div>
<span>TestComp组件</span>
</div>
<van-button type='primary'>vant按钮</van-button>
</template>
<style scoped lang="scss">
// 引入公共代码:
@import '~/assets/css/mixins.scss';
div {
background: yellow;
span {
color: blue;
@include mx_font($size: 46px, $color: red, $weight: false, $lineHeight: false, $fontFamily: false, $letterSpacing: false);
}
}
</style>
7.nuxt.config.ts配置:
export default defineNuxtConfig({
// 1.是否开启服务端渲染ssr模式:
// ssr: true,
// 2.是否开启调试工具:
devtools: { enabled: true },
// 3.注册应用模块,如UI库等:
modules: ['@vant/nuxt']
})
8.文件目录:
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海123
其它问题可通过以下方式联系本人咨询:
QQ:810665436
微信:ConstancyMan