从零搭建 UniApp 电竞护航项目源码（无NPM依赖、纯净版架构

最近准备开发一套电竞护航/游戏陪玩代练类小程序/App项目，踩了很多 UI 库、依赖打包、Git 仓库治理的坑。

最终打磨出一套零 NPM 依赖、无需安装插件、仓库干净、团队拉取即用的最优架构方案。

本篇完整记录：项目选型、目录结构、Tab 配置、界面设计、核心配置、避坑指南，新手可直接照着搭建上线项目。

一、项目核心选型（关键决策）

很多人做 UniApp 项目习惯性装  uView ，但有两个致命问题：

1. 需要  npm install ，新人拉代码跑不起来
2. 产生  node_modules ，仓库臃肿、容易版本错乱

所以本项目最终选型：

• 放弃 uView
• 只使用 UniApp 官方  uni-ui
• 全程 0 NPM 依赖、无需任何命令行
• 依靠  easycom  自动引入组件

优势：

• Git 仓库极度干净
• 任何人克隆项目，打开 HBuilderX 直接运行
• 官方组件稳定、多端兼容（小程序/H5/App）无BUG
• 电竞暗黑风格完美适配

二、最终项目目录结构（纯净版）

去除所有冗余依赖，只保留业务源码：

plaintext

电竞护航项目
├── pages # 所有业务页面
│ ├── index # 首页大厅
│ ├── service # 护航下单页
│ ├── order # 订单管理页
│ └── user # 个人中心页
├── static # 图标、Tab图片、静态资源
├── components # 自定义公共组件
├── uni_modules # uni-ui 官方组件（免npm）
├── utils # 工具方法
├── App.vue # 全局入口
├── main.js # 全局配置
├── pages.json # 路由+Tab+样式核心配置
└── manifest.json # 项目打包配置

Git 忽略规则（无需上传文件）

plaintext

unpackage/
.hbuilderx/
.vscode/
.DS_Store
*.log
project.config.json

重点：无 node_modules、无 package 冗余文件

三、什么是 Easycom？（项目核心原理）

本项目能做到零引入、零注册、直接用组件，全靠  easycom 。

简单理解：

配置规则后` 标签，项目自动匹配组件文件，无需 import、无需注册。

本项目专属 Easycom 规则（适配 uni-ui）：

json

"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue"
}
}

效果：
直接写       所有官方组件开箱即用。

四、电竞护航专属 Tab 底部导航配置

根据电竞行业调性，定制暗黑赛博+红黑电竞风底部 Tab，4 大核心业务页面：

1. 首页大厅
2. 护航下单
3. 订单管理
4. 个人中心

完整 pages.json 成品配置（直接复制可用）

json

{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页大厅"
}
},
{
"path": "pages/service/service",
"style": {
"navigationBarTitleText": "护航服务"
}
},
{
"path": "pages/order/order",
"style": {
"navigationBarTitleText": "我的订单"
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "个人中心"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "电竞护航",
"navigationBarBackgroundColor": "#1a1a2e",
"backgroundColor": "#0f0f1b"
},
"tabBar": {
"color": "#888899",
"selectedColor": "#ff3e6c",
"borderStyle": "black",
"backgroundColor": "#16162a",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tab/home.png",
"selectedIconPath": "static/tab/home_active.png"
},
{
"pagePath": "pages/service/service",
"text": "护航下单",
"iconPath": "static/tab/service.png",
"selectedIconPath": "static/tab/service_active.png"
},
{
"pagePath": "pages/order/order",
"text": "订单管理",
"iconPath": "static/tab/order.png",
"selectedIconPath": "static/tab/order_active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "static/tab/user.png",
"selectedIconPath": "static/tab/user_active.png"
}
]
}
}

电竞配色说明

• 全局背景：深空暗黑  #0f0f1b
• 导航栏底色：赛博深紫黑  #1a1a2e
• Tab 选中色：电竞热血红  #ff3e6c
• 未选中文字：浅灰蓝，低调高级

五、四大页面界面功能介绍

1. 首页大厅

项目核心展示页，主打引流、展示服务：

• 顶部电竞风格轮播 banner（活动、优惠套餐）
• 游戏分类快捷入口（王者、吃鸡、LOL、原神等）
• 热门护航大神推荐列表
• 爆款护航套餐、限时优惠模块

2. 护航下单页

核心业务交易页：

• 游戏品类筛选
• 段位选择、服务时长选择
• 打手/护航技师挑选
• 实时价格计算、立即下单功能

3. 订单管理页

用户售后核心页面：

• 标签分类：全部、进行中、已完成、已取消
• 订单卡片展示：游戏、打手、价格、状态
• 联系打手、确认完工、退款申诉功能

4. 个人中心

用户个人账户主页：

• 头像、昵称、游戏段位展示
• 我的钱包、余额充值
• 消息通知、客服中心、设置
• 登录/注册入口

六、本架构的核心优势总结

1. 零 NPM 依赖，彻底告别  npm install  报错
2. 纯官方 uni-ui 组件，稳定无兼容BUG
3. Easycom 自动引入，代码极度简洁
4. 电竞专属黑红赛博风格，贴合行业产品
5. Git 仓库干净，无冗余文件，适合团队协作
6. 多端统一适配（小程序/H5/APP）

七、适合人群 & 项目场景

• 游戏陪玩、电竞护航、代练接单项目
• 不想折腾依赖、想要开箱即用的开发者
• 新手入门 UniApp 商业项目开发
• 需要干净仓库、团队协作开发的项目