前台端

目录结构

├──📂 .nuxt                            # 开发模式下的产物
├──📂 .output                          # 打包构建的产物
├──📂 scripts                          # js脚本
├──📂 server                           # 服务端ts
├──📂 src                              # 源码
│ ├──📂 api                            # 所有请求
│ ├──📂 assets                         # 静态资源（会经过构建工具构建）
│ ├──📂 components                     # 全局公用组件
│ ├──📂 composables                    # 全局可组合物（即hooks）
│ ├──📂 constants                      # 静态数据
│ ├──📂 enums                          # 全局枚举
│ ├──📂 layouts                        # 基础布局  
│ ├──📂 middleware                     # 中间件
│ ├──📂 nuxt                           # nuxt.config.ts辅助函数
│ ├──📂 pages                          # 所有页面
│ ├──📂 plugins                        # 插件安装
│ ├──📂 public                         # 服务器根目录
│ ├──📂 stores                         # 全局状态管理
│ ├──📂 typings                        # ts声明文件
│ ├──📂 utils                          # 全局公用方法
│ ├── app.vue                          # 根页面组件
├── .env.xxx                           # 环境变量配置
├── .gitignore                         # Git忽略配置
├── eslint.config.mjs                  # eslint 配置项
├── nuxt.config.ts                     # nuxt配置文件
├── global.d.ts                        # 全局ts声明文件
├── package.json                       # package.json
├── tailwind.config.js                 # tailwindcss 配置项
├── tsconfig.json                      # ts 配置项

快速上手

复制env文件
- 1.复制.env.template文件，将复制的文件名修改为.env
- 2.复制.env.template.development，将复制的文件名修改为.env.development
- 3.复制.env.template.production，将复制的文件名修改为.env.production
打开.env.development修改配置
- 修改VITE_API_URL变量的值为项目安装部署的服务端地址
- .env.development是开发环境是用的
- .env.production是生成环境使用的
- 请根据你自己当前情况调整这两个文件的请求域名

# 请求域名
VITE_API_URL=https://fastapi.waitadmin.cn

安装依赖
- 您首先要进入到源码的根目录
- 依赖只需要安一次即可
- 在终端执行命令

# 建议你使用 pnpm 作为您的包管理工具
# 如果没有安装请先安装 npm i -g pnpm

# 1、进入到源码目录
cd /waitadmin-python/nuxtjs

# 2、执行安装依赖命令 (请求超时的配置国内源)
pnpm install

# 3、编译运行
pnpm run dev

项目上线

打包支持seo模式和非seo模式，默认为非seo模式, 修改.env文件可以修改模式。

# 是否开启ssr, true=开启,false=关闭
VITE_SSR=true

打包前修改请求域名: 打开 .env.production

注意

如果是非seo模式则不需要修改，将VITE_API_URL留空即可。
这样请求接口时会自动读取当前的域名做为接口请求的域名。

# 请求域名
VITE_API_URL=https://fastapi.waitadmin.cn

运行打包

1、Dev - 开发模式

作用：启动开发服务器，用于本地调试。
特点：
- 使用 .env.development 环境变量文件。
- 启用 热更新（HMR），修改代码后自动刷新浏览器。
- 不会生成静态文件，而是动态渲染页面（适合开发）。
适用场景：开发阶段，需要实时调试功能或样式。

pnpm run dev

2、build - 生成静态站点(SSG)

作用：生成 静态站点（Static Site Generation, SSG），并执行额外的构建脚本。
特点：
- 使用 .env.production 环境变量。
- 预渲染所有路由为静态 HTML 文件（适合部署到 CDN 或静态托管）。
- 执行 scripts/build.mjs（可能是自定义逻辑，如复制文件、压缩资源等）。
适用场景：部署纯静态站点（如 GitHub Pages、Netlify）。

pnpm run build

3、build:ssr - 服务端渲染(SSR)

作用：生成 服务端渲染（SSR） 应用，并执行额外的构建脚本。
特点：
- 使用 .env.production 环境变量。
- 输出服务端渲染所需的代码（如 .output 目录），包含服务器入口文件。
- 适合需要服务端渲染的部署（如 Node.js 服务器）。
- 同样会执行 scripts/build.mjs。
- 但需要注意: 把.env 的 VITE_SSR 的值改为 true
适用场景：部署到 Node.js 服务器，支持 SSR 和动态路由。

pnpm run build::ssr

4、generate - 仅生成静态文件

作用：生成 服务端渲染（SSR） 应用，并执行额外的构建脚本。
特点：
- 使用 .env.production 环境变量。
- 输出服务端渲染所需的代码（如 .output 目录），包含服务器入口文件。
- 适合需要服务端渲染的部署（如 Node.js 服务器）。
- 同样会执行 scripts/build.mjs。
- 但需要注意: 把.env 的 VITE_SSR 的值改为 true
适用场景：与 build 类似，但不需要自定义构建逻辑时使用。

pnpm run generate

5、preview - 预览生产构建

作用：在本地启动一个服务器，预览 build 或 generate 生成的生产环境代码。
特点：
- 需要先运行 build 或 generate。
- 模拟生产环境的行为（如静态文件服务或 SSR）。
适用场景：部署前本地测试生产环境效果。

pnpm run preview

内置组件

Svg图标组件

图标分为 @element-plus/icons-vue 和 本地图标
Element图标: https://element-plus.org/en-US/component/icon
本地图标: 请把图标放置在 src/assets/icons 目录下面，图标可以到阿里图标库找。
组件路径: src/components/Icon/index.vue

Props 参数

参数名	必填	类型	说明
name	是	string	图标名称,如: el-icon-Plus
size	否	string、number	图标大小,如: 14px
color	否	string	图标颜色,如: #ff5058

使用示例

<!-- 使用Element图标,前缀是 el-icon -->
<icon name="el-icon-Plus" :size="20" color="#ff5058" />

<!-- 使用本地图标,前缀是 svg-icon -->
<icon name="svg-icon-Dark" :size="20" color="#ff5058" />

分页组件

组件路径: src/components/Paging/index.vue

Props 参数

参数名	类型	默认值	说明
modelValue	Record<string, any>	{}	分页数据对象，需包含 { page, size, total }
pageSizes	number[]	[15, 20, 30, 40, 50]	每页显示条目数的可选值列表
layout	string	'total, sizes, prev, pager, next, jumper'	组件布局，可选值：sizes, prev, pager, next, jumper, total
size	'default' \| 'small' \| 'large'	'default'	分页组件尺寸
pageCount	number	5	总页数（显示的分页按钮数量）
disabled	boolean	false	是否禁用分页
background	boolean	true	分页按钮是否添加背景色
teleported	boolean	true	将下拉菜单挂载到 body（避免样式穿透问题）
hideOnSinglePage	boolean	false	只有一页时是否隐藏分页组件

事件

事件名	参数	说明
update:modelValue	value: Record<string, any>	分页数据变化时触发（双向绑定）
change	-	分页变化时触发（页码或每页条数变化)


<template>
    <!-- 使用分页组件 -->
  <paging
      v-model="pager"
      layout="total, prev, pager, next"
      @change="queryLists"
  />
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import articleApi from '@/api/article'
 
// 查询参数
const queryParams = reactive({
  keyword: ''
})

// 分页查询
const {pager, queryLists, resetPaging} = usePaging({
  fetchFun: articleApi.lists,
  params: queryParams
})

onMounted(async () => {
  await queryLists()
})
</script>

支付方式组件

组件路径: src/components/Payment/index.vue

价格金额组件

组件路径: src/components/Price/index.vue

文件上传组件

组件路径(批量): src/components/Upload/multiple.vue
组件路径(单个): src/components/Upload/single.vue

裁剪上传组件

组件路径: src/components/UploadCropper/index.vue

弹出框组件

组件路径: src/components/PopoverInput/index.vue

验证码组件

组件路径: src/components/VerifyCode/index.vue