Skip to main content
Version: 中文

Nuxt3前端结构

IceCMS平台使用Nuxt3构建其前端应用,提供现代化且高性能的用户体验。本文档解释了Nuxt3前端架构,帮助开发者理解其结构并有效进行开发。

架构概述

IceCMS的Nuxt3前端是一个模块化、基于组件的应用,遵循Nuxt3最佳实践。前端通过全面的API层连接后端服务,使用Pinia管理状态,并通过Vue组件在逻辑页面结构中渲染内容。

目录结构

Nuxt3前端遵循清晰、模块化的组织结构,分离关注点并提升可维护性:

目录用途
/src主要源目录,包含页面、组件和资源
/api按资源类型组织的API端点定义
/service核心HTTP客户端实现和请求处理程序
/storesPinia状态管理存储
/middleware路由中间件,用于导航守卫
/pluginsNuxt插件,用于全局功能
/constants应用范围内的常量和配置值

配置

Nuxt3应用通过 nuxt.config.ts 进行配置,设置源目录、模块、插件和运行时配置等关键参数。

// 关键的nuxt.config.ts设置
export default defineNuxtConfig({
srcDir: 'src/',
modules: [
'@element-plus/nuxt',
'@pinia/nuxt'
],
css: [
'./src/static/mycss/top.css',
'./src/static/mycss/body.css',
'element-plus/dist/index.css',
'element-plus/theme-chalk/display.css',
],
plugins: [
'./plugins/initSettings.ts',
'./plugins/main.ts',
],
// ... 其他配置
})

此配置确立:

  • src/ 为主源目录
  • 集成Element Plus UI框架
  • 使用Pinia进行状态管理
  • 全局CSS样式
  • 应用插件

API通信架构

前端采用双层架构进行API通信:

  • 核心HTTP服务层:抽象通信机制
  • API端点层:按领域组织特定端点调用

HTTP服务

服务层提供两种实现选项:

HttpRequest类

基于Promise的useFetch包装器,提供标准HTTP方法:

class HttpRequest {
request<T = any>(url: string, method: Methods, data: any, options?: UseFetchOptions<T>) {
// 实现
}

get<T = any>(url: string, params?: any, options?: UseFetchOptions<T>) {
return this.request(url, "GET", params, options);
}
// 其他方法:post, put, delete
}

Dollar Fetch服务

基于工厂的方法,带有请求/响应拦截器:

function createUseFetchRequest(method: HttpMethod) {
return async function (url: string, data?: any, options: RequestOptions = {}) {
// 带拦截器的实现
}
}

export const useFetchGet = createUseFetchRequest('GET');
export const useFetchPost = createUseFetchRequest('POST');
// 其他方法

状态管理

应用使用Pinia进行状态管理,将状态组织到领域特定的存储中:

用户存储示例

用户存储管理认证状态和用户信息:

export const useUserStore = defineStore('user', {
state: () => ({
email: localStorage.getItem('email') || "",
// 其他用户属性
token: localStorage.getItem('token') || "",
}),

getters: {
isLoggedIn: (state) => !!state.token,
// 其他获取器
},

actions: {
setUserInfo(userInfo) {
// 设置状态并持久化到localStorage
},
clearUserInfo() {
// 清除状态和localStorage
},
// 其他操作
}
});

此存储提供:

  • 状态:从localStorage加载的用户属性,用于持久化
  • 获取器:计算属性,如认证状态
  • 操作:更新状态和处理localStorage持久化的方法

路由与导航

页面结构

/src/pages目录定义了应用的路由结构,遵循Nuxt的文件路由约定:

  • /pages/index.vue - 首页
  • /pages/AllList/ - 列表页面
  • /pages/Post/ - 帖子详情页面
  • /pages/UserInfo/ - 用户资料页面

中间件

Nuxt中间件提供路由转换的导航守卫。全局中间件目前记录路由变化:

export default defineNuxtRouteMiddleware((to, from) => {
console.log('路由守卫:', to, from)
})

组件

应用的UI由/src/components目录中的可复用Vue组件构建:

  • 布局组件Top.vue, Foot.vue
  • 功能组件Comment.vue, ResComment.vue
  • 专用组件/components/emoji/中的表情选择组件

这些组件可以在应用页面中导入和使用。

工具层

应用包含提供常见功能的工具和钩子:

钩子

/src/hooks中的自定义Vue Composition API钩子:

  • useEmoji.ts - 表情处理函数
  • useInput.ts - 输入管理
  • useUpload.ts - 文件上传功能

工具

/src/utils中的辅助函数:

  • 认证助手
  • 日期格式化
  • 验证函数
  • 滚动管理

开发流程

在扩展Nuxt3前端时:

  • 添加页面:在/src/pages目录中创建新的.vue文件
  • 添加组件:在/src/components中创建可复用的UI元素
  • 添加API端点:在/api目录中创建使用服务层的新TypeScript文件
  • 管理状态:在/stores目录中创建或扩展存储
  • 处理导航:根据需要在/middleware中添加中间件

集成点

Nuxt3前端与多个IceCMS组件集成:

  • 后端API:通过API层与Java后端通信
  • 认证:通过用户存储管理用户会话和权限
  • 内容管理:通过内容存储显示和管理内容

通过理解这些集成点,开发者可以有效地为IceCMS Nuxt3前端做出贡献,同时保持应用的一致性和最佳实践。