MFWL 前端模板

这是一个基于 uni-app 的前端项目模板，集成了一些通用的组件和功能，旨在帮助开发者快速启动新的跨平台应用开发。

TIP

部分已有页面请参考项目uniapp_pages

如不知有哪些页面可以复用,可以询问其他技术人员

✨ 技术栈

• 核心框架: Vue.js
• 跨端框架: uni-app
• UI 框架: uView 2.0
• CSS 预处理器: Sass
• 加密库: js-md5, sm-crypto

📁 项目结构

mfwl-frontend-template/
├── api/                  # API 请求模块
│   ├── divide/
│   │   ├── d-api.js
│   │   └── q-api.js
│   ├── http.api.js       # API 配置文件
│   └── http.interceptor.js # 请求拦截器
├── common/               # 公共资源
│   ├── css/              # 公共样式
│   └── js/               # 公共脚本
├── components/           # 可复用的 Vue 组件
│   ├── c-3TimeTips/
│   ├── c-check/
│   ├── c-circleProgress/
│   ├── c-map/
│   ├── c-classify/
│   ├── c-confirmPop/
│   ├── c-fub/
│   ├── c-movable-area/
│   ├── c-navBar/
│   ├── c-scroll-list/
│   ├── c-selectDistrict/
│   ├── c-tabs/
│   ├── c-tipsPop/
│   ├── c-upload-cloud/   # 腾讯云 COS 上传组件
│   ├── c-uploadImg/
│   └── c-upLoadImgs/
├── pages/                # 业务页面
│   ├── my/
│   └── tabbar/
├── static/               # 静态资源 (图片等)
├── utils/                # 工具函数
├── App.vue               # 应用配置，用来配置 App 全局样式以及监听
├── main.js               # Vue 初始化入口文件
├── manifest.json         # 应用配置文件
├── package.json          # 依赖管理
└── pages.json            # 页面、路由、tabBar 配置

🚀 运行项目

1. clone 项目

git clone https://codeup.aliyun.com/5f0ff3755fd102f22f6b7aa2/mfwl/mfwl_frontend_template.git

2. 安装依赖

在项目根目录下执行以下命令安装依赖：

npm

npm install

pnpm

pnpm install

yarn

yarn install

3. 运行

通过 HBuilderX (推荐)

1. 下载并安装 HBuilderX。
2. 将项目导入 HBuilderX。
3. 在顶部菜单栏中选择 运行 -> 运行到浏览器 或 运行到小程序模拟器 等选项来启动项目。

建议

由HBuilderX实现运行

使用vscode或者cursor进行开发

🧩 组件说明

项目中 components 目录下包含了一系列可复用的高质量组件，以下是部分组件的介绍：

• c-navBar: 自定义导航栏组件，方便实现更灵活的头部样式。
• c-tabs: 高度可定制化的选项卡组件。
• c-scroll-list: 滚动列表组件，适用于需要局部滚动的场景。

📦 主要依赖

本项目依赖的一些主要第三方库：

• uview-ui: uni-app 生态中最受欢迎的 UI 框架之一，提供了丰富的组件。
• js-md5: 用于 MD5 加密。
• sm-crypto: 用于国密 SM2/3/4 的加解密、签名验签、密钥交换。
• sass/sass-loader: 用于支持 Sass/SCSS 语法。