nuxt3+Element Plus项目搭建过程记录

背景

本文只记录项目搭建过程中遇到的一些问题和关键点，nuxt框架的说明和API请参照官网学习
官网：https://nuxt.com/docs/getting-started/introduction

1. 初始化项目

指令如下:

npx nuxi@latest init <project-name>

我在安装过程中出现报错：

[17:47:30]  ERROR  Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: Typ
eError: fetch failed

原因是无法连接网络，解决方案：可以配置代理（可以自己搜教程）或者访问 https://github.com/nuxt/starter/tree/v3 直接下载zip包，解压使用

2. 修改文件目录

为了使目录结构更加清晰，我准备把功能性的文件夹都统一放在新建的src目录下，并把app.vue文件也移到src目录下。为了使nuxt能正确找到文件的位置，需要修改nuxt.config.ts文件，增加srcDir，如下：

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

export default defineNuxtConfig({
  devtools: { enabled: true },
  srcDir: 'src/',
  alias: {
    '~assets': resolve('/assets'),
    '~public': resolve('/public')
  },
})

注意：配置路径别名的时候一定要使用path，否则在项目中引入assets文件夹下的文件时可能出错
目录结构如下

3. layouts

layouts文件夹下的每个文件都是一个布局组件NuxtLayout，name就是文件名，使用方法如下：

app.vue

<NuxtLayout name="filename">
  <!--插槽内显示的内容-->
  <NuxtPage />
</NuxtLayout>

filename为你要使用的布局的文件名，如果是以下的文件filename就替换为blank或者default（可省略不写）

4. pages

pages文件夹下每一个文件对应一个路由，路由地址就是文件名，多级路由就是文件的相对地址，动态路由的参数用[]包裹

页面可以配置元数据，这些数据可以在app.vue中获取并使用。API详情参见官网
page.vue

definePageMeta({
  title: '登录', // 页面title
  layout: 'blank', // 布局组件的名称，如果不需要布局组件可以写成false
  index: 2,
})

app.vue

<template>
  <div>
    <!--NuxtLayout组件会根据page中定义的layout切换-->
    <NuxtLayout>   
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
useHead({
  titleTemplate: '%s - XX平台' // %s对应page中定义的title
})
</script>

<style lang="scss">
@import "~assets/style/common.scss"
</style>

动态配置页面标题的时候发现问题，切换子页面title未获取到。可能与更新延迟或页面缓存有关，因此改用更加可靠的方法

<script setup lang="ts">
const route = useRoute();
const pageTitle = computed(() => route.meta.title || 'Default Title');

useHead({
  titleTemplate: `${pageTitle.value} - XX平台`,
  link: [{ rel: 'icon', href: '~public/favicon.ico' }]
})
</script>

5. 引入Element-Plus

参考Element-Plus官网的按需引入说明

1. 安装依赖

npm install -D @element-plus/nuxt

2. 增加配置

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

6. 注入全局scss变量

1. 创建文件保存你的全局scss变量

/* assets/style/variables.scss */

$color-primary-bg: #e6f4ff;
$color-primary-bg-hover: #bae0ff;
$color-primary-border: #91caff;

2. 在nuxt.config.ts中引入文件

// nuxt.config.ts

export default defineNuxtConfig({
  css: [
    '~assets/style/common.scss'
  ],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~assets/style/variables.scss" as *;'
        }
      }
    }
  }
})

此处我尝试了在css配置中添加变量文件和在app.vue中引入变量文件都没有成功，只有vite预加载器中配置生效，原因待我了解之后补充

7. 网络请求

Nuxt3的官方团队将fetch进一步封装成ofetch，并且将$fetch方法集成到Nuxt3中。
初步封装 $fetch方法

function fetch {
  return $fetch(url, {
  	baseURL: '',
  	timeout: 5 *1000,
    ...options,
    // 请求拦截
    onRequest({ request, options }) {
    },
    // 返回拦截
    onResponse({ response }) {
      // 处理返回数据
    },
    onRequestError({ error }) {
      // 请求失败的回调
    },
  }).catch((error) => {
    // 请求不为200等正常码的情况，这里会捕获到，并返回给前端
    return error.data
  })
}
// 此处的url，无需包含baseUrl
export function get<T>(url: string, params?: any) {
  return fetch<T>(url, { method: 'get', ...params })
}

export function post<T>(url: string, params?: any) {
  return fetch<T>(url, { method: 'post', ...params })
}

配置代理，网上包括官网提供了多种方法，最终还是vite配置server生效

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~assets/style/variables.scss" as *;'
        }
      }
    },
    server: {
      proxy: {
        '/api': {
          target: 'https://xx.com.cn/',
          changeOrigin: true,
        }
      },
    },
  },
  nitro: {
    // devProxy: {
    //   '/api': {
    //     target: 'https://xx.com.cn/',
    //     changeOrigin: true,
    //   }
    // },
    // routeRules: {
    //   '/api': {
    //     proxy: 'https://xx.com.cn/'
    //   }
    // }
  }

在此记录一下nuxt3封装的$fetch方法遇到的问题：
1、我请求的接口设置：Accept: 'text/event-stream' 期待返回 事件流对象，然后将流式数据一点点显示在页面上。但是实际应用时发现$fetch已经对返回的流式数据进行了处理，直接返回的是处理过后的字符串，这同时导致了请求等待时间变长，用户体验不太友好