准备工作
概述
Web 项目基于 Nuxt.js 3 框架开发，需要先安装 Node.js 和 npm。推荐使用稳定版本（LTS）以确保最佳兼容性
安装步骤
1.访问 Node.js官网
2.下载并安装适合您操作系统的 Node.js 安装包（建议下载LTS版本）
3.安装完成后，打开命令行工具验证安装是否成功：
bash
# 检查Node.js版本
node -v
# 检查npm版本
npm -v如果命令返回对应的版本号，则说明安装成功。
学习地址
Nuxt.js 3官方文档：https://nuxt.com/docs/getting-started/introduction
目录结构
web/
├── addon/ # 插件功能模块
│ └── mall/ # 商城插件
│ │ ├── api/ # 商城API
│ │ ├── hooks/ # 商城钩子函数
│ │ ├── lang/ # 商城语言包
│ │ ├── pages/ # 商城页面组件
│ │ └── stores/ # 商城状态管理模块
├── app/ # 核心应用代码
│ ├── api/ # API接口定义
│ │ ├── article.ts # 文章相关接口
│ │ ├── auth.ts # 认证相关接口
│ │ ├── basic.ts # 基础相关接口
│ │ ├── diy_form.ts # diy 表单相关接口
│ │ ├── index.ts # 相关接口
│ │ ├── member.ts # 会员相关接口
│ │ ├── pay.ts # 支付相关接口
│ │ ├── system.ts # 系统相关接口
│ │ └── verify.ts # 验证相关接口
│ ├── lang/ # 应用语言包
│ │ ├── en/ # 英文
│ │ └── zh-cn/ # 中文
│ ├── pages/ # 页面组件
│ │ ├── article/ # 文章相关页面
│ │ ├── auth/ # 认证相关页面
│ │ ├── member/ # 会员相关页面
│ │ ├── pay/ # 支付相关页面
│ │ ├── site/ # 站点相关页面
│ │ ├── index.vue # 首页
│ │ └── routes.ts # 路由配置
│ └── router.options.ts # 路由选项配置
├── assets/ # 静态资源文件
├── components/ # 公共组件
│ ├── icon/ # 图标组件
│ │ └── index.vue # 图标组件入口
│ ├── login-dialog/ # 登录弹窗组件
│ │ └── index.vue # 登录弹窗组件入口
│ ├── sidebar/ # 侧边栏组件
│ │ └── index.vue # 侧边栏组件入口
│ ├── upload-file/ # 上传文件组件
│ │ └── index.vue # 上传文件组件入口
│ └── sms-code/ # 短信验证码组件
│ └── index.vue # 短信验证码组件入口
├── composables/ # 组合式函数
│ ├── useCaptcha.ts # 验证码相关方法
│ ├── useLang.ts # 语言相关方法
│ ├── useLogin.ts # 登录相关方法
│ └── useSendSms.ts # 短信发送相关方法
├── env/ # 环境配置文件
│ ├── .env.dev # 开发环境配置
│ └── .env.product # 生产环境配置
├── lang/ # 语言包
│ ├── en/ # 英文语言包
│ │ └── common.json # 公共英文翻译
│ └── zh-cn/ # 中文语言包
│ └── common.json # 公共中文翻译
├── layouts/ # 布局组件
│ ├── default/ # 默认布局
│ │ └── components/ # 默认布局组件
│ ├── container.vue # 容器布局组件
│ ├── defalut.vue # 默认布局组件
│ ├── member.vue # 会员布局组件
│ └── shop.vue # 商城布局组件
├── middleware/ # 中间件
│ ├── auth.ts # 认证中间件
│ └── lang-load.global.ts # 全局语言加载中间件
├── plugins/ # 插件
│ ├── aos.ts # Element Plus 插件配置
│ ├── element.plus.ts # Element Plus插件配置
│ ├── i18n.ts # 国际化插件配置
│ └── pinia.ts # Pinia状态管理插件配置
├── public/ # 公共静态资源
│ └── favicon.ico # 网站图标
├── stores/ # Pinia状态管理
│ ├── app.ts # 应用状态
│ ├── config.ts # 配置状态
│ ├── member.ts # 会员状态
│ └── system.ts # 系统状态
├── types/ # 类型定义
│ └── global.d.ts # 全局类型定义
├── utils/ # 工具函数
│ ├── common.ts # 公共工具函数
│ ├── language.ts # 语言工具函数
│ ├── request.ts # 请求工具函数
│ ├── storage.ts # 存储工具函数
│ └── test.ts # 测试工具函数
├── app.vue # 应用入口组件
├── nuxt.config.ts # Nuxt配置文件
├── package-lock.json # npm依赖锁定文件
├── package.json # 项目依赖配置
├── publish.cjs # 发布脚本
├── tsconfig.json # TypeScript配置
└── windi.config.ts # Windi CSS配置路由
路由系统说明
路由配置文件
-
主应用路由位置：
web/app/pages/routes.ts -
插件路由位置：
web/addon/插件/pages/routes.ts
路由配置结构
{
path: string, // 路由路径
component: () => import('path/to/component.vue'), // 组件路径
meta: {
layout: string, // 布局名称
middleware: string[] // 中间件列表
}
}路由使用
布局
-
默认布局：
web/layouts/default.vue（含导航栏、侧边栏） -
容器布局：
web/layouts/container.vue（简洁布局，用于登录等页面）
中间件
-
auth：认证中间件，保护会员中心页面
-
lang-load.global：全局语言加载中间件
跳转方式
<!-- Nuxt Link组件 -->
<NuxtLink to="/auth/login">登录</NuxtLink>
<NuxtLink :to="{ path: '/article/detail', query: { id: 123 } }">文章详情</NuxtLink>
// UseRouter组合式函数
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 跳转路由
router.push('/auth/login')
router.push({ path: '/article/detail', query: { id: 123 } })
// 获取参数
const articleId = route.query.id接口
API 模块结构
API 按业务领域划分为多个模块，位于 web/app/api/ 目录下：
├── app/
│ ├── api/
│ │ ├── article.ts # 文章相关接口
│ │ ├── auth.ts # 认证相关接口
│ │ ├── member.ts # 会员相关接口
│ │ ├── ...
│ │ └── system.ts # 系统相关接口文章接口模块 (article.ts)
提供文章相关的数据获取功能：
/**
* 获取文章栏目
*/
export function getArticleCategory() {
return request.get(`article/category`)
}
/**
* 文章列表
*/
export function getArticleList(params: Record<string, any>) {
return request.get('article/list', params)
}
/**
* 获取文章热门推荐
*/
export function getArticleHot() {
return request.get(`article/hot`)
}
/**
* 获取文章详情
*/
export function getArticleInfo(id: number) {
return request.get(`article/${ id }`)
}
/**
* 文章列表
*/
export function getArticleAll(params: Record<string, any>) {
return request.get('article/all', params)
}
/**
* 增加文章访问量
*/
export function incVisit(id: any) {
return request.put(`article/incVisit/${ id }`, {}, { showErrorMessage: false, showSuccessMessage: false })
}接口使用示例
导入并使用 API：
// 在组件中导入并使用API
import { getArticleList, getArticleDetail } from '@/app/api/article'
export default {
setup() {
// 获取文章列表
const fetchArticles = async () => {
try {
const params = { page: 1, size: 10, category_id: 1 }
const result = await getArticleList(params)
console.log('文章列表:', result)
} catch (error) {
console.error('获取文章列表失败:', error)
}
}
// 获取文章详情
const fetchArticleDetail = async (id: number) => {
try {
const result = await getArticleDetail(id)
console.log('文章详情:', result)
} catch (error) {
console.error('获取文章详情失败:', error)
}
}
return {
fetchArticles,
fetchArticleDetail
}
}
}web 端打包上线
将项目源代码目录切换到 web 下，路径位置输入 cmd 回车启动命令
命令行中输入 npm install 安装依赖
命令行输入npm run generate 打包命令，进行编译打包
编译完成后的文件在项目源码根目录下 web/.output/public 中
将文件都放到运行环境（宝塔）中的 webroot/public/web 中即可
以上操作完成，浏览器就可以访问 web 端