准备工作
概述
Web 项目基于Nuxt.js 3框架开发，需要先安装Node.js和npm。推荐使用稳定版本（LTS）以确保最佳兼容性。
安装步骤
1.访问 Node.js官网
2.下载并安装适合您操作系统的 Node.js 安装包（建议下载LTS版本）
3.安装完成后，打开命令行工具验证安装是否成功：
# 检查Node.js版本
node -v
# 检查npm版本
npm -v如果命令返回对应的版本号，则说明安装成功。
学习地址
Nuxt.js 3官方文档：https://nuxt.com/docs/getting-started/introduction
目录结构
web/
├── addon/ # 插件功能模块
│ ├── cms/ # 内容管理系统插件
│ │ ├── api/ # CMS相关API
│ │ ├── assets/ # CMS资源文件
│ │ ├── lang/ # CMS语言包
│ │ └── pages/ # CMS页面组件
│ └── seckill/ # 秒杀插件
│ │ ├── api/ # 秒杀API
│ │ ├── lang/ # 秒杀语言包
│ │ └── pages/ # 秒杀页面组件
├── app/ # 核心应用代码
│ ├── api/ # API接口定义
│ │ ├── article.ts # 文章相关接口
│ │ ├── auth.ts # 认证相关接口
│ │ ├── member.ts # 会员相关接口
│ │ └── system.ts # 系统相关接口
│ ├── assets/ # 应用资源
│ ├── lang/ # 应用语言包
│ │ ├── en/ # 英文
│ │ └── zh-cn/ # 中文
│ ├── pages/ # 页面组件
│ │ ├── article/ # 文章相关页面
│ │ ├── auth/ # 认证相关页面
│ │ ├── member/ # 会员相关页面
│ │ ├── site/ # 站点相关页面
│ │ ├── index.vue # 首页
│ │ └── routes.ts # 路由配置
│ └── router.options.ts # 路由选项配置
├── assets/ # 静态资源文件
├── components/ # 公共组件
│ ├── icon/ # 图标组件
│ │ └── index.vue # 图标组件入口
│ ├── sidebar/ # 侧边栏组件
│ │ └── 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 # 容器布局组件
│ └── default.vue # 默认布局入口
├── middleware/ # 中间件
│ ├── auth.ts # 认证中间件
│ └── lang-load.global.ts # 全局语言加载中间件
├── plugins/ # 插件
│ ├── 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
插件路由位置：addon/插件/pages/routes.ts
路由配置结构
{
path: string, // 路由路径
component: () => import('path/to/component.vue'), // 组件路径
meta: {
layout?: string, // 布局名称
middleware?: string[] // 中间件列表
}
}路由使用
默认布局：layouts/default.vue（含导航栏、侧边栏）
容器布局：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 # 系统相关接口文章接口模块（srticle.ts）
提供文章相关的数据获取功能：
/**
* 文章列表
*/
export function getArticleList(params: Record<string, any>) {
return request.get('article/article', params)
}
/**
* 文章列表
*/
export function getArticleAll(params: Record<string, any>) {
return request.get('article/article/all', params)
}
/**
* 文章详情
*/
export function getArticleDetail(id: number) {
return request.get(`article/article/${id}`)
}
/**
* 文章分类
*/
export function getArticleCategory() {
return request.get('article/category')
}认证接口模块（auth.ts）
处理用户登录、注册、退出等认证相关功能：
// 用户名注册
export function usernameRegister(data: AnyObject) {
let url = 'register'
data.pid && (url += `?pid=${data.pid}`) // 支持推荐人ID
return request.post(url, data)
}
// 手机号注册
export function mobileRegister(data: AnyObject) { /*...*/ }
// 微信登录相关接口
export function wechatLogin(data: AnyObject) { /*...*/ }
export function weappLogin(data: AnyObject) { /*...*/ }
export function scanlogin() { /*...*/ }
// 绑定手机号
export function bind(data: AnyObject) { /*...*/ }会员接口模块（member.ts）
提供会员信息查询和管理功能：
/**
* 获取验证码
*/
export function getCaptcha() {
return request.get('captcha', { time: (new Date().getTime()) })
}
/**
* 获取微信公众号授权码
*/
export function getWechatAuthCode(data: AnyObject) {
return request.get('wechat/codeurl', data)
}
/**
* 同步微信信息
*/
export function wechatSync(data: AnyObject) {
return request.get('wechat/sync', data)
}
/**
* 获取协议信息
*/
export function getAgreementInfo(key: string) {
return request.get(`agreement/${key}`)
}
/**
* 重置密码
*/
export function resetPassword(data: AnyObject) {
return request.post(`password/reset`, data)
}
/**
* 发送短信验证码
*/
export function sendSms(data: AnyObject) {
return request.post(`send/mobile/${data.type}`, data)
}
/**
* 获取微信jssdk config
*/
export function getWechatSkdConfig(data: AnyObject) {
return request.get('wechat/jssdkconfig', data)
}
/**
* 拉取图片
*/
export function fetchImage(data: AnyObject) {
return request.post('file/image/fetch', data)
}
/**
* 拉取base64图片
*/
export function fetchBase64Image(data: AnyObject) {
return request.post('file/image/base64', data)
}
/**
* 获取版权信息
*/
export function getCopyRight() {
return request.get('copyright')
}
/**
* 获取站点信息
*/
export function getSiteInfo() {
return request.get('site')
}接口使用示例
导入并使用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 gengrate 打包命令，进行编译打包
编译完成后在项目源码根目录下web文件夹中可以看到生成一个 dist 文件夹
将 dist 下的所有文件压缩，运行环境（宝塔）中的 niucloud/public/web 中所有文件全部清除掉
将生成的编译压缩包上传到运行环境中，解压
以上操作完成，浏览器就可以访问web端
