%20(2).svg)
项目简介
本项目是基于vue-cli4.0、webpack 4、vant ui、sass、rem适配方案以及axios封装构建的手机端模板脚手架，适用于开发各类手机端网页，如电商、商城、直播、新闻等应用。
项目的主要特性和功能
- 多环境开发支持：通过
package.json的scripts配置及不同环境变量文件，结合src/config下的对应配置文件，灵活管理多环境变量。 - rem适配方案：利用
postcss-pxtorem和lib-flexible，自动将px单位转化为rem单位，根据屏幕宽度动态调整根元素font-size，实现响应式设计。 - Vant UI组件按需加载：采用
babel-plugin-import插件，编译时自动按需引入组件，减少项目体积，组件在src/plugins/vant.js统一管理。 - Sass全局样式：支持Sass作为CSS预处理器，通过
vue.config.js配置将sass的mixinvariables注入全局。 - Vuex状态管理：有完整的Vuex目录结构，在
main.js中引入使用。 - Vue-router：采用
hash模式，支持路由懒加载，可修改mode和base。 - Axios封装及接口管理：在
utils/request.js封装axios，接口在src/api文件夹统一管理。 - Webpack 4基础配置：对
vue.config.js进行配置，支持设置publicPath、端口、跨域、打包分析、引入CDN资源、去掉console.log、单独打包第三方模块等。 - 低版本浏览器兼容：使用
core-js和regenerator-runtime实现IE兼容。 - 统一开发规范：使用Eslint和Prettier统一代码开发规范。
安装使用步骤
前提条件
假设用户已下载本项目的源码文件。
具体步骤
- 进入项目目录
bash cd vue-h5-template - 安装依赖
bash npm install - 启动开发环境
bash npm run serve启动后，在浏览器中打开http://localhost:8080查看项目。 - 构建生产环境
bash npm run build - 路由配置
在
src/router目录下配置路由，引入vue和vue-router并创建router实例。 - 使用Vant UI组件
按需引入Vant UI组件，在Vue组件中使用，组件在
src/plugins/vant.js统一管理。 - 使用axios接口
在
src/utils/request.js封装axios，在src/api目录创建API接口文件并引入接口。 - 环境变量配置
修改
.env文件设置不同环境的环境变量，通过--mode参数切换环境，如npm run serve --mode staging切换到测试环境。
开发过程中，请遵循Eslint和Prettier的规则，保持代码整洁和一致性。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】