nuxt3快速上手

最新推荐文章于 2024-09-30 10:14:10 发布

苦海123

最新推荐文章于 2024-09-30 10:14:10 发布

阅读量493

点赞数

分类专栏： vue2&vue3 文章标签： nuxt3快速上手

本文链接：https://blog.youkuaiyun.com/weixin_46758988/article/details/135159815

版权

vue2&vue3 专栏收录该内容

9 篇文章

订阅专栏

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.文件目录：
在这里插入图片描述