【源码】基于Vue框架的快速页面开发模版项目

项目简介

本项目是基于Vue CLI 3的快速页面开发模版，适用于需快速创建多个独立页面（如活动页面）的场景。通过组合环境变量插入公共逻辑，简化了页面开发和构建流程，避免重复的基础设施配置。

项目的主要特性和功能

主要特性

• 基于Vue CLI 3，利用其强大功能简化项目构建和开发流程。
• 独立页面管理，每个页面有独立文件夹和环境变量配置，互不干扰。
• 可通过环境变量插入公共逻辑，如viewport适配、移动端适配、骨架屏、异常监控等。

功能特点

• 支持每个页面配置独立环境变量，覆盖全局配置。
• 构建时输出到dist/${页面名称}目录，并在JS/CSS文件中标记Git提交日志。
• 封装了HTTP客户端、基础路由器、微信JS - SDK等常用功能，简化开发。

安装使用步骤

开发准备

1. 新建页面：运行npm run new-page命令，按提示输入页面名称、标题等信息，该命令会自动生成页面文件夹、必要的文件和目录结构。
   • 单页面：不使用路由。
   • 多页面：使用路由，支持多个子页面。
2. 开发页面：在生成的页面文件夹下进行开发。启动开发服务器： shell npm start -- --__page__=${页面名称} 例如： shell npm start -- --__page__=demo1
3. 其他命令：
   • 启动HTTPS： shell npm start -- --https --__page__=${页面名称}
   • 自定义端口： shell npm start -- --port=${端口} --__page__=${页面名称}

示例

• demo页面提供了开发页面所需的代码示例和常用公共库的使用示例。
• 第三方库筛选记录记录了项目中使用的第三方库及其筛选过程。

封装的公共逻辑

• HTTP客户端封装了HTTP请求方法。
• 基础路由器提供了基础的路由功能。
• 微信JS - SDK封装了微信JS - SDK的功能。
• 验证器简化了validatorjs库的使用，用于验证单个值。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】